Working with WooCommerce Custom Fields

anthonyhortin
@maddisondesigns #WPMELB
Working with Custom Fields

Custom Fields allow you to add custom information
to your WooCommerce products

Using the built-in WooCommere hooks, Custom
Fields can be added to any of the standard
WooCommerce product panels (incl. variable
products)

Adding New Fields to Simple Products
function mytheme_woo_add_custom_fields() {
global $woocommerce, $post;
echo '<div class="options_group">';
// Add your custom fields here…
echo '</div>';
}

Adding New Fields - Text Field
// Text Field
woocommerce_wp_text_input(
array(
'id' => '_text_field',
'label' => __( 'My Text Field', 'mytheme' ),
'placeholder' => 'http://',
'desc_tip' => true,
'description' => __( 'Some helpful tooltip.', 'mytheme' )
)
);

Adding New Fields - Number Field
// Number Field
array(
'id' => '_number_field',
'label' => __( 'My Number Field', 'mytheme' ),
'placeholder' => '',
'desc_tip' => false,
'description' => __( 'Some helpful text', 'mytheme' ),
'type' => 'number',
'custom_attributes' => array(
'step' => 'any',
'min' => '0',
),
)
);

Adding New Fields - Textarea
// Textarea
woocommerce_wp_textarea_input(
array(
'id' => '_textarea',
'label' => __( 'My Textarea', 'mytheme' ),
'placeholder' => '',
'desc_tip' => true,
'description' => __( 'Some helpful tooltip.', 'mytheme' ),
)
);

Adding New Fields - Select
// Select
woocommerce_wp_select(
array(
'id' => '_select',
'label' => __( 'My Select Field', 'mytheme' ),
'options' => array(
'one' => __( 'Option 1', 'mytheme' ),
'two' => __( 'Option 2', 'mytheme' ),
'three' => __( 'Option 3', 'mytheme' ),
),
)
);

Adding New Fields - Checkbox
// Checkbox
woocommerce_wp_checkbox(
array(
'id' => '_checkbox',
'wrapper_class' => 'show_if_simple',
'label' => __('My Checkbox Field', 'mytheme' ),
'description' => __( 'Check me!', 'mytheme' )
)
);

Adding New Fields - Hidden
// Hidden field
woocommerce_wp_hidden_input(
array(
'id' => '_hidden_field',
'value' => 'hidden_value'
)
);

Adding New Fields - Custom Fields
// Custom field Type
?>
<p class="form-field custom_field_type">
<label for="custom_field_type">
<?php echo __( 'Custom Field Type', 'mytheme' ); ?>
</label>
<span class="wrap">
<?php $custom_field_type = get_post_meta( $post->ID, '_custom_field_type', true ); ?>
<input placeholder="<?php _e( 'Field One', 'mytheme' ); ?>" type="number" ...
<input placeholder="<?php _e( 'Field Two', 'mytheme' ); ?>" type="number" ...
</span>
<span class="description">
<?php _e( 'Your description here!', 'mytheme' ); ?>
</span>
</p>
<?php

Add Fields to Product Panel
function mytheme_woo_add_custom_fields() {
global $woocommerce, $post;
echo '<div class="options_group">';
// Your custom fields…
echo '</div>';
}
add_action( 'Specify WooCommerce Hook Here...', 'mytheme_woo_add_custom_fields' );

Add Fields to Product Panel - General Panel
// After pricing fields
add_action( 'woocommerce_product_options_pricing', 'mytheme_woo_add_custom_fields' );
// After downloadable file fields
// Only visible when it's a downloable product
add_action( 'woocommerce_product_options_downloads','mytheme_woo_add_custom_fields' );
// After tax fields
add_action( 'woocommerce_product_options_tax', 'mytheme_woo_add_custom_fields' );
// After all General default fields
add_action( 'woocommerce_product_options_general_product_data',
'mytheme_woo_add_custom_fields' );

Add Fields to Product Panel - Inventory Panel
// After SKU field
add_action( 'woocommerce_product_options_sku', 'mytheme_woo_add_custom_fields' );
// After Manage Stock field
add_action( 'woocommerce_product_options_stock', 'mytheme_woo_add_custom_fields' );
// After Manage Stock field but only visible if checked
add_action( 'woocommerce_product_options_stock_fields', 'mytheme_woo_add_custom_fields' );
// After Stock Status field
add_action( 'woocommerce_product_options_stock_status', 'mytheme_woo_add_custom_fields' );
// After Sold Individually field
add_action( 'woocommerce_product_options_sold_individually',
// After all Inventory default fields
add_action( 'woocommerce_product_options_inventory_product_data',

Add Fields to Product Panel - Shipping Panel
// After Dimensions field
add_action( 'woocommerce_product_options_dimensions', 'mytheme_woo_add_custom_fields' );
// After all Shipping default fields
add_action( 'woocommerce_product_options_shipping', 'mytheme_woo_add_custom_fields' );

Add Fields to Product Panel - Linked Products
// After all Linked Products default fields
add_action( 'woocommerce_product_options_related', 'mytheme_woo_add_custom_fields' );

Add Fields to Product Panel - Attributes Panel
// After all Attributes default fields
add_action( 'woocommerce_product_options_attributes', 'mytheme_woo_add_custom_fields' );

Add Fields to Product Panel - Advanced Panel
// After Enable Reviews field
add_action( 'woocommerce_product_options_reviews', 'mytheme_woo_add_custom_fields' );
// After all Advanced default fields
add_action( 'woocommerce_product_options_advanced', 'mytheme_woo_add_custom_fields' );

Saving our Fields - Simple Products
// Save Fields
function mytheme_woo_add_custom_fields_save( $post_id ){
// Save your custom fields here…
}
add_action( 'woocommerce_process_product_meta', 'mytheme_woo_add_custom_fields_save' );

Saving our Fields
// Text Field
$woocommerce_text_field = $_POST['_text_field'];
update_post_meta( $post_id, '_text_field', esc_attr($woocommerce_text_field) );
// Number Field
$woocommerce_number_field = $_POST['_number_field'];
update_post_meta( $post_id, '_number_field', esc_attr($woocommerce_number_field) );
// Textarea
$woocommerce_textarea = $_POST['_textarea'];
update_post_meta( $post_id, '_textarea', esc_html($woocommerce_textarea) );
// Select
$woocommerce_select = $_POST['_select'];
update_post_meta( $post_id, '_select', esc_attr($woocommerce_select) );

Saving our Fields
// Checkbox
$woocommerce_checkbox = isset($_POST['_checkbox']) ? 'yes' : 'no';
update_post_meta( $post_id, '_checkbox', $woocommerce_checkbox );
// Hidden Field
$woocommerce_hidden_field = $_POST['_hidden_field'];
update_post_meta( $post_id, '_hidden_field', esc_attr($woocommerce_hidden_field) );
// Custom Field
$custom_field_type = array( esc_attr($_POST['_field_one']), esc_attr($_POST['_field_two']) );
update_post_meta( $post_id, '_custom_field_type', $custom_field_type );

Adding New Fields to Variable Products
function mytheme_woo_add_custom_variation_fields( $loop, $variation_data, $variation ) {
echo '<div class="options_group form-row form-row-full">';
// Text Field
array(
'id' => '_variable_text_field[' . $variation->ID . ']',
'desc_tip' => true,
'description' => __( 'Here's some helpful tooltip text.', 'mytheme' ),
'value' => get_post_meta( $variation->ID, '_variable_text_field', true )
)
);
echo '</div>';
}

Adding New Fields to Variable Products
function mytheme_woo_add_custom_variation_fields( $loop, $variation_data, $variation ) {
echo '<div class="options_group form-row form-row-full">';
// Text Field
array(
'id' => '_variable_text_field[' . $variation->ID . ']',
'desc_tip' => true,
'description' => __( 'Here's some helpful tooltip text.', 'mytheme' ),
'value' => get_post_meta( $variation->ID, '_variable_text_field', true ),
)
);
echo '</div>';
}

Add Fields to Product Panel - Variations Panel
// After variation Enabled/Downloadable/Virtual/Manage Stock checkboxes
add_action( 'woocommerce_variation_options', 'mytheme_woo_add_custom_variation_fields', 10, 3 );
// After Price fields
add_action( 'woocommerce_variation_options_pricing', 'mytheme_woo_add_custom_variation_fields', 10, 3 );
// After Manage Stock fields
add_action( 'woocommerce_variation_options_inventory', 'mytheme_woo_add_custom_variation_fields', 10, 3 );
// After Weight/Dimension fields
add_action( 'woocommerce_variation_options_dimensions', 'mytheme_woo_add_custom_variation_fields', 10, 3 );
// After Shipping/Tax Class fields
add_action( 'woocommerce_variation_options_tax', 'mytheme_woo_add_custom_variation_fields', 10, 3 );
// After Download fields
add_action( 'woocommerce_variation_options_download', 'mytheme_woo_add_custom_variation_fields', 10, 3 );
// After all Variation fields
add_action( 'woocommerce_product_after_variable_attributes', 'mytheme_woo_add_custom_variation_fields', 10, 3 );

Saving our Fields - Variable Products
// Save Fields
function mytheme_woo_add_custom_variation_fields_save( $post_id ){
// Text Field
$woocommerce_text_field = $_POST['_variable_text_field'][ $post_id ];
update_post_meta( $post_id, '_variable_text_field', esc_attr( $woocommerce_text_field ) );
}
add_action( 'woocommerce_save_product_variation', 'mytheme_woo_add_custom_variation_fields_save', 10, 2 );

Using our Fields
// Display our Product custom fields above the summary on the Single Product Page
function mytheme_display_woo_custom_fields() {
global $post;
$ourTextField = get_post_meta( $post->ID, '_text_field', true );
if ( !empty( $ourTextField ) ) {
echo '<div>Our Text Field: ' . $ourTextField . '</div>';
}
}
add_action( 'woocommerce_single_product_summary', 'mytheme_display_woo_custom_fields', 15 );

Resources
// Example Code
https://maddisondesigns.com/woocommerce-custom-fields-wpmelb
// WooCommerce Action and Filter Hook Reference
https://docs.woocommerce.com/wc-apidocs/hook-docs.html
// WordPress Hooks
https://developer.wordpress.org/plugins/hooks

I’m Anthony Hortin
You can ﬁnd me here
@maddisondesigns
maddisondesigns.com
@easywpguide
easywpguide.com
Thanks!
Questions?

Working with WooCommerce Custom Fields

More Related Content

What's hot (6)

Similar to Working with WooCommerce Custom Fields (20)

More from Anthony Hortin (18)

Recently uploaded (20)

Working with WooCommerce Custom Fields