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>