Adding and displaying custom fields on WooCommerce products is quite simple. For example, you can add a “RRP/MSRP” field to a product, or maybe use ACF and display its value on the single product page.
Easy, yes. Unfortunately, the above only applies to “simple” products without variations (or the parent product if it’s a variable product). So the question is: how do we add, save and display a custom field for each single variation?
Part 1 – PHP Snippet: Add & Save Custom Field @ Product Variations
/**
* @snippet Add Custom Field to Product Variations - WooCommerce
* @how-to Get tutoraspire.com FREE
* @author Tutor Aspire
* @compatible WooCommerce 4.6
* @donate $9 https://www.tutoraspire.com
*/
// -----------------------------------------
// 1. Add custom field input @ Product Data > Variations > Single Variation
add_action( 'woocommerce_variation_options_pricing', 'tutoraspire_add_custom_field_to_variations', 10, 3 );
function tutoraspire_add_custom_field_to_variations( $loop, $variation_data, $variation ) {
woocommerce_wp_text_input( array(
'id' => 'custom_field[' . $loop . ']',
'class' => 'short',
'label' => __( 'Custom Field', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, 'custom_field', true )
) );
}
// -----------------------------------------
// 2. Save custom field on product variation save
add_action( 'woocommerce_save_product_variation', 'tutoraspire_save_custom_field_variations', 10, 2 );
function tutoraspire_save_custom_field_variations( $variation_id, $i ) {
$custom_field = $_POST['custom_field'][$i];
if ( isset( $custom_field ) ) update_post_meta( $variation_id, 'custom_field', esc_attr( $custom_field ) );
}
// -----------------------------------------
// 3. Store custom field value into variation data
add_filter( 'woocommerce_available_variation', 'tutoraspire_add_custom_field_variation_data' );
function tutoraspire_add_custom_field_variation_data( $variations ) {
$variations['custom_field'] = 'Custom Field: ' . get_post_meta( $variations[ 'variation_id' ], 'custom_field', true ) . '';
return $variations;
}
Part 2 – WooCommerce Template Override: Display Custom Field Upon Product Variation Selection
As the variation selection process uses JavaScript in order to retrieve the correct variation data, the only choice we have is to override the WooCommerce template file called variation.php, which can be found under woocommerce/templates/single-product/add-to-cart
Please note – we won’t edit core files (because a) it’s not a great idea and b) code will be deleted next time we update WooCommerce). Instead, in order to override this template, we create a file called “variation.php” and place it in our child theme’s “woocommerce/single-product/add-to-cart” folder. If that doesn’t exist, create it via FTP.
The final child theme’s woocommerce/single-product/add-to-cart/variation.php file script should look like this (please note you must change “custom_field” occurrences in case you renamed it in Snippet 1):
Is There a (Reliable) Plugin For That?
If you’d love to code but don’t feel 100% confident with PHP, I decided to look for a reliable plugin that achieves the same result (well, actually it gives you more).
In this case, I recommend the WooCommerce Custom Fields for Variations plugin. On top of adding any kind of custom field to variable products (text, textarea, select, checkboxes, or radio buttons), you can group them under separate headings and allow the shop manager to manage them more easily and much more.
But in case you hate plugins and wish to code (or wish to try that), then keep reading 🙂