Display selected variation custom fields value in WooCommerce product additional information tab

Question

I have been able to add a custom text input field to the variations of my variable products using the following code:

// Add custom text input field to admin Product Data > Variations
add_action( 'woocommerce_variation_options_pricing', 'add_custom_field_to_variations', 10, 3 );
function add_custom_field_to_variations( $loop, $variation_data, $variation ) {
    woocommerce_wp_text_input( array(
        'id' => 'custom_field[' . $loop . ']',
        'class' => 'short',
        'label' => __( 'product size', 'woocommerce' ),
        'value' => get_post_meta( $variation->ID, 'custom_field', true )
    ) );
}
 
// Save custom field on product variation save
add_action( 'woocommerce_save_product_variation', 'save_custom_field_variations', 10, 2 );
function 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 ) );
}
 
// Store custom field value into variation data
add_filter( 'woocommerce_available_variation', 'add_custom_field_variation_data' );
function 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;
}

The code works and save inputed variation values (see the screenshot below).

Now here is my code attempt to get and display custom field value in additional information tab:

function yourprefix_woocommerce_display_product_attributes($variation_data, $variations){
    $variation_data['custom_field'] = [
        'label' => __('size', 'text-domain'),
        'value' => get_post_meta($variations->ID, 'custom_field', true),
    ];
    return $variation_data;
}
add_filter('woocommerce_display_product_attributes', 'yourprefix_woocommerce_display_product_attributes', 10, 2);

But it does not show the value I entered in variation.

Any help is appreciated.

Answer 1

Your code is a bit outdated, and there are some mistakes and missing things: Some additional jQuery code is required to display the selected variation "Size" custom field value in additional Information tab.

You should always name custom field field key with an explicit slug.

Here is the complete revisited code:

// Admin Product > Variations: Display an input text field
add_action( 'woocommerce_variation_options_pricing', 'add_admin_product_variations_custom_field', 10, 3 );
function add_admin_product_variations_custom_field( $loop, $variation_data, $variation ) {
    woocommerce_wp_text_input( array(
        'id' => 'size[' . $loop . ']',
        'class' => 'short',
        'label' => __( 'product size', 'woocommerce' ),
        'value' => get_post_meta( $variation->ID, '_size', true )
    ) );
}

// Admin Product > Variations: Save input text field submited value
add_action( 'woocommerce_admin_process_variation_object', 'save_admin_product_variations_custom_field', 10, 2 );
function save_admin_product_variations_custom_field( $variation, $i ) {
    if ( isset($_POST['size'][$i]) ) {
        $variation->update_meta_data( '_size', sanitize_text_field($_POST['size'][$i]) );
    }
}

// Frontend Variable products: Link variation custom field value
add_filter( 'woocommerce_available_variation', 'set_available_variation_custom_field', 10, 3 );
function set_available_variation_custom_field( $variation_data, $product, $variation ) {
    return array_merge( $variation_data, array(
        'size' => $variation->get_meta('_size'),
    ) );
}

// Frontend Variable products > additional information tab: Display "Size" label with an empty value
add_filter( 'woocommerce_display_product_attributes', 'Display_custom_field_label_with_empty_value', 10, 3 );
function Display_custom_field_label_with_empty_value( $product_attributes, $product ) {
    $product_attributes[ 'size' ] = array(
        'label' => __('Size', 'text-domain'),
        'value' => '',
    );
    return $product_attributes;
}

// Variable Product (jQuery): Selected variation displays custom field value
add_action( 'woocommerce_before_variations_form', 'custom_variations_js_script' );
function custom_variations_js_script() {
    wc_enqueue_js( "jQuery( function($){
        var sizeObj = $('tr.woocommerce-product-attributes-item--size > td');
        $('form.variations_form').on('show_variation', function(event, data){
            sizeObj.text(data.size);
        }).on('hide_variation', function(){
            sizeObj.text('');
        })
    });" );
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.