Adding Custom Fields to your WooCommerce products are a great way to show custom data on your product pages. This presentation will show you how to add Custom Fields to your Simple & Grouped products as well as adding them to Variable Products.

1. anthonyhortin
@maddisondesigns #WPMELB
Working with Custom Fields

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

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

4. 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>';
}

5. 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' )
)
);

6. Adding New Fields - Number Field
// Number Field
woocommerce_wp_text_input(
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',
),
)
);

7. 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' ),
)
);

8. 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' ),
),
)
);

9. 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' )
)
);

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

11. 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

12. 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' );

13. 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' );

14. 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',
'mytheme_woo_add_custom_fields' );
// After all Inventory default fields
add_action( 'woocommerce_product_options_inventory_product_data',
'mytheme_woo_add_custom_fields' );

15. 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' );

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

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

18. 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' );

19. 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' );

20. 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) );

21. 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 );

22. 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
woocommerce_wp_text_input(
array(
'id' => '_variable_text_field[' . $variation->ID . ']',
'label' => __( 'My Text Field', 'mytheme' ),
'placeholder' => 'http://',
'desc_tip' => true,
'description' => __( 'Here's some helpful tooltip text.', 'mytheme' ),
'value' => get_post_meta( $variation->ID, '_variable_text_field', true )
)
);
echo '</div>';
}

23. 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
woocommerce_wp_text_input(
array(
'id' => '_variable_text_field[' . $variation->ID . ']',
'label' => __( 'My Text Field', 'mytheme' ),
'placeholder' => 'http://',
'desc_tip' => true,
'description' => __( 'Here's some helpful tooltip text.', 'mytheme' ),
'value' => get_post_meta( $variation->ID, '_variable_text_field', true )
)
);
echo '</div>';
}

24. 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
woocommerce_wp_text_input(
array(
'id' => '_variable_text_field[' . $variation->ID . ']',
'label' => __( 'My Text Field', 'mytheme' ),
'placeholder' => 'http://',
'desc_tip' => true,
'description' => __( 'Here's some helpful tooltip text.', 'mytheme' ),
'value' => get_post_meta( $variation->ID, '_variable_text_field', true )
)
);
echo '</div>';
}

25. 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
woocommerce_wp_text_input(
array(
'id' => '_variable_text_field[' . $variation->ID . ']',
'label' => __( 'My Text Field', 'mytheme' ),
'placeholder' => 'http://',
'desc_tip' => true,
'description' => __( 'Here's some helpful tooltip text.', 'mytheme' ),
'value' => get_post_meta( $variation->ID, '_variable_text_field', true )
)
);
echo '</div>';
}

26. 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
woocommerce_wp_text_input(
array(
'id' => '_variable_text_field[' . $variation->ID . ']',
'label' => __( 'My Text Field', 'mytheme' ),
'placeholder' => 'http://',
'desc_tip' => true,
'description' => __( 'Here's some helpful tooltip text.', 'mytheme' ),
'value' => get_post_meta( $variation->ID, '_variable_text_field', true ),
)
);
echo '</div>';
}

27. 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 );

28. 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 );

29. 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 );

30. 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

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