Display custom field values of product variations to custom product tab in WooCommerce

Question

I successfully created a 3 custom field for each product variation and it's properly working (saving, updating).

For this I use the following code:

/* Add custom field input @ Product Data > Variations > Single Variation */
add_action( 'woocommerce_variation_options', 'add_custom_field_cage_code_to_variations', 10, 3 );
function add_custom_field_cage_code_to_variations( $loop, $variation_data, $variation ) {
    echo '<div class="cage_code_options_group options_group">';
        woocommerce_wp_text_input( array(
            'id' => 'cage_code[' . $loop . ']',
            'class' => 'short',
            'label' => __( 'Cage Code', 'magazine' ),
            'wrapper_class' => 'form-field form-row form-row-first',
            'value' => get_post_meta( $variation->ID, 'cage_code', true )
        ));

        woocommerce_wp_text_input( array(
            'id' => 'cage_code_part_number[' . $loop . ']',
            'class' => 'short',
            'label' => __( 'Cage Code - Part #', 'magazine' ),
            'wrapper_class' => 'form-field form-row form-row-last',
            'value' => get_post_meta( $variation->ID, 'cage_code_part_number', true )
        ));

        woocommerce_wp_text_input( array(
            'id' => 'cage_code_niin_nsn_number[' . $loop . ']',
            'class' => 'short',
            'label' => __( 'NIIN/NSN Number', 'magazine' ),
            'wrapper_class' => 'form-field form-row form-row-first',
            'value' => get_post_meta( $variation->ID, 'cage_code_niin_nsn_number', true )
        ));
    echo '</div>';
}

/* Save custom field on product variation save */
add_action( 'woocommerce_save_product_variation', 'magazine_save_custom_field_variations', 10, 2 );
function magazine_save_custom_field_variations( $variation_id, $i ) {
    $cage_code = $_POST['cage_code'][$i];
    if ( isset( $cage_code ) ) update_post_meta( $variation_id, 'cage_code', esc_attr( $cage_code ) );

    $cage_code_part_number = $_POST['cage_code_part_number'][$i];
    if ( isset( $cage_code ) ) update_post_meta( $variation_id, 'cage_code_part_number', esc_attr( $cage_code_part_number ) );

    $cage_code_niin_nsn_number = $_POST['cage_code_niin_nsn_number'][$i];
    if ( isset( $cage_code_niin_nsn_number ) ) update_post_meta( $variation_id, 'cage_code_niin_nsn_number', esc_attr( $cage_code_niin_nsn_number ) );
}

---

Then I created a new product tab:

// Add a custom product data tab
add_filter( 'woocommerce_product_tabs', 'woo_cage_code_info_tab' );
function woo_cage_code_info_tab( $tabs ) {
    
    // Adds the new tab 
    $tabs['cage_code_information_tab'] = array(
        'title'     => __( 'Cage Code Information', 'woocommerce' ),
        'priority'  => 50,
        'callback'  => 'woo_cage_code_info_tab_content'
    );

    return $tabs;

}

function woo_cage_code_info_tab_content() {
?>
    <script type="text/template" id="tmpl-variation-template">
        <div class="woocommerce-variation-cage-code">
        {{{ data.variation.cage_code}}}
        </div>
    </script>

<?php
}

---

My problem

The custom fields are not displaying on the new product tab I created. I tried to use this code. As applied in next tutorial and put it inside the product tab.

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

But the data is displaying in the variable section (above add to cart button).

---

My question

Is there a way to display the custom fields inside the new product tab that will change the value when select dropdown variable is changed like the data on 'Additional Information' Tab?

Answer 1

In your callback function you could use the following

• The display/output is updated accordingly with the dropdown select menu for variable products

function woo_cage_code_info_tab_content() {
    global $product;
    
    if ( $product->is_type( 'variable' ) ) {
        
        // Loop through the variation IDs
        foreach( $product->get_children() as $key => $variation_id ) {
            // Get an instance of the WC_Product_Variation Object
            $variation = wc_get_product( $variation_id );
            
            // Get meta
            $cage_code = $variation->get_meta( 'cage_code' );
            $cage_code_part_number = $variation->get_meta( 'cage_code_part_number' );
            $cage_code_niin_nsn_number = $variation->get_meta( 'cage_code_niin_nsn_number' );
            
            // Output
            echo '<div class="woo_cage_code_info_tab_content woo_cage_code_info_tab_content-' . $variation_id .'">';
            
            if ( $cage_code ) {
                echo '<p>Cage code: ' . $cage_code . '</p>';
            }

            if ( $cage_code_part_number ) {
                echo '<p>Cage code part number: ' . $cage_code_part_number . '</p>';
            }
            
            if ( $cage_code_niin_nsn_number ) {
                echo '<p>Cage code niin nsn_number: ' . $cage_code_niin_nsn_number . '</p>';
            }
            
            echo '</div>';
        }
        ?>
        <script>
        jQuery(document).ready(function($) {
            // Hide all
            $( '.woo_cage_code_info_tab_content' ).css( 'display', 'none' );

            // Change
            $( 'input.variation_id' ).change( function() {
                // Hide all
                $( '.woo_cage_code_info_tab_content' ).css( 'display', 'none' );

                if( $( 'input.variation_id' ).val() != '' ) {
                    var var_id = $( 'input.variation_id' ).val();

                    // Display current
                    $( '.woo_cage_code_info_tab_content-' + var_id ).css( 'display', 'block' );
                }
            });    
        });
        </script>
        <?php
    }
}