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
            '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 {
}, 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.


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>

I hope this resolves your issue with the front end.

Today In History




    yariPublished: 1 week ago

    Hi, nice work, is this code compatible with the other one to add gtin on simple product? Thanks.

      IftekharPublished: 1 week ago

      Hello Yari, they are totally two different snippet and does not use the same hook. No so surprisingly, they both use the meta key “_gtin” to store GTIN numbers on database for the sake of uniformity. This way one can easily loop through all the products (simple/variable) and echo out the GTIN numbers for various purposes. The short answer is, they should work just fine without any issue unless you are using any other third party plugin that also uses the same meta key. Hope that helps. Thank you.

Leave a Reply

Note: Convet HTML, PHP, JavaScripts from Postable, before posting from comment section.
License: By submitting a comment here you grant this site a perpetual license to reproduce your words and name/Web site in attribution. Please use your real name or a pseudonym (i.e., pen name, alias, nom de plume) when commenting. If you add your site name, company name, or something completely random, I'll likely change it to whatever I want.