WooCommerce: Add Custom Field to Each Product Variation

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 products without variations (or the parent product only 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 CustomizeWoo.com FREE
 * @sourcecode    https://businessbloomer.com/?p=73545
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.6
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

// -----------------------------------------
// 1. Add custom field input @ Product Data > Variations > Single Variation

add_action( 'woocommerce_variation_options_pricing', 'bbloomer_add_custom_field_to_variations', 10, 3 );

function bbloomer_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', 'bbloomer_save_custom_field_variations', 10, 2 );

function bbloomer_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', 'bbloomer_add_custom_field_variation_data' );

function bbloomer_add_custom_field_variation_data( $variations ) {
$variations['custom_field'] = '<div class="woocommerce_custom_field">Custom Field: <span>' . get_post_meta( $variations[ 'variation_id' ], 'custom_field', true ) . '</span></div>';
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 a WooCommerce template file called variation.php, which can be found under woocommerce/templates/single-product/add-to-cart

In order to override this template, create a file called “variation.php” and place it in your child theme’s woocommerce/single-product/add-to-cart folder.

Then, add a section with the variation data previously stored (see snippet, step #3).

The final child theme’s woocommerce/single-product/add-to-cart/variation.php file script should look like this:

<script type="text/template" id="tmpl-variation-template">
<div class="woocommerce-variation-description">
{{{ data.variation.variation_description }}}
</div>

<div class="woocommerce-variation-price">
{{{ data.variation.price_html }}}
</div>

<div class="woocommerce-variation-custom_field">
{{{ data.variation.custom_field}}}
</div>

<div class="woocommerce-variation-availability">
{{{ data.variation.availability_html }}}
</div>
</script>