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.

Today In History

  •  
  •  

Comment

4 Comments

    AnthonyPublished: 5 days ago

    Hi Iftekhar

    …please can you tell me if the ‘_gtin’ records for all products can be picked up for import/export CSV files i.e. WP All Import?

    Many thanks

    Anthony

      IftekharPublished: 4 days ago

      Hello Anthony, thank you very much for reaching out. Unfortunately, it is almost impossible for me to give you the exact answer to your question as I never tested the plugin you mentioned above. However, I visited the plugin’s website and went through their documentation section. It seems like the plugin supports exporting “custom fields” data. So, it’s sort of safe to say that it is possible to export GTIN data. You just have to find out that specific option of that plugin to get it done. I wish if I could have been more useful. Thank you.

    yariPublished: 2 months ago

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

      IftekharPublished: 2 months 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.