Add GTIN for Variable Product in WooCommerce

Earlier, in one of my post I discussed on how to add GTIN field for "Simple Product" in WooCommerce and shared a snippet. That post has gained tremendous amount of views and has been shared, discussed widely by the community at large.

So, today I will be sharing another piece of snippet that will allow users to add GTIN field for "Variable Product". In other words using this snippet, one should be able to add additional product meta data field to store GTIN field for every single product variations.

/** 
 * Adding Custom GTIN Meta Fields
 * for Variable Products and save
 * meta data to the database.
 */
add_action('woocommerce_product_after_variable_attributes', function ($loop, $variation_data, $variation) {
    echo '<div>';
    // add GTIN fields for variations
    woocommerce_wp_text_input(
        array(
            'id' => '_gtin['.$variation->ID.']',
            'label' => 'GTIN',
            'placeholder' => '01234567891231',
            'desc_tip' => 'true',
            'description' => 'Enter the Global Trade Item Number (UPC,EAN,ISBN)',
            'class' => 'short',
            'wrapper_class' => 'form-row',
            'value' => get_post_meta($variation->ID, '_gtin', true))
    );
    echo '</div>';
}, 10, 3);
    
// save GTIN values of product variations
add_action('woocommerce_save_product_variation', function ($post_id) {
    if (isset($_POST['_gtin'][$post_id]) && !empty($_POST['_gtin'][$post_id])) {
        $gtin = sanitize_text_field($_POST['_gtin'][$post_id]);
        update_post_meta($post_id,'_gtin', esc_attr($gtin));
    } else {
        delete_post_meta($post_id,'_gtin');
    }   
}, 10, 2);

Simply add this snippet on your theme's function.php page and you should see additional GTIN input field for every single variations.

Displaying Data on Front End

By default you won't be able to display these custom GTIN meta data from the front end. However, little modification on the template files will allow you to do that as well. Case in point, you can think of the drop down menu that show cases all the variations. As you change the variations, you can display the GTIN field values for each variation. Here is what you need to do.

add_filter('woocommerce_available_variation', function($variation) {
 $variation['_gtin'] = 'GTIN: '.get_post_meta($variation['variation_id'], '_gtin', true);
 return $variation;
});

Add this snippet on your functions.php page. This will allow the GTIN meta data to be available within the "$variation" variable. JavaScript template can take advantage of this variable to display additional custom meta data of product variations. We have to do little more work to actually display them from the front end.

Simply find the "variation.php" page located within the WooCommerce plugin folder. You should be able to find it within the following directory.

/wp-content/plugins/woocommerce/templates/single-product/add-to-cart/

Open the variation.php page with your HTML editor and you should see a script tag for template with few div elements inside which looks like this (sort of).

<script type="text/template" id="tmpl-variation-template"></script>

Add a simple line within the script tag and you should be able to display the meta GTIN data as you change the drop-down menu from the front end.

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

I hope this resolves your issue with the front end.