Woocommerce: Display Dynamic Content For Each Product Variation

This is a brief example of how to add custom fields to product variations and then showing/hidding the custom field data per the respective product variation selected by the user.

Introduction

Our client, Almost Heaven Saunas, well you guessed it, makes saunas. The DIY type! Its a pretty cool product. Almost Heaven Saunas makes multiple sauna types and each sauna type has various models. For a while now, certain sauna models have been available for purchase online at Costco.com. However, our client wanted all of their sauna models available for online purchase. Easy enough. In addition though, they wanted to notify customers if a particular sauna model was also available on Costco.com. This notice, in the form of an image that would appear below the “Add To Cart” button, would be displayed soon after the sauna model was selected. Obviously before the “Add To Cart” button was clicked. Our initial thought: How do we do this? Good thing we figured it out.

TLDR

The steps needed to make this happen:

  • Create multiple sauna variable products with an attribute of “Model” for the variations.
  • Add custom fields for all product variations.
  • Display the custom field data on the single product page. This involves modifying some WooCommerce template files.
  • Use jQuery to show, and hide, the custom field data belonging to, and not belonging to, the product variation selected from the “Model” select form element.

The Result

dynamic product variation data

Custom Fields to the Rescue

The solution to the first part of our dilemma: Custom Fields. Custom Fields is an extremely powerful feature of WordPress. This is how additional information can be added to and associated with a particular page or post. It’s sweet.
Similarly, custom fields can be added to both simple and variable products. Remi Corson has written two great tutorials on how to do this:

Mastering WooCommerce Products Custom Fields

WooCommerce Custom Fields for Variations

Following Remi’s tutorials, we were able to figure out how to add and display the contents of the custom fields added to each product variation on the single product page. But one question lingered, how can we make that content be hidden until, and only if, the respective product variation is selected?

The Product Setup

The variable product setup: Attributes and Variations

variable product

variations

This setup renders the following html code on the single product page for the variation drop-down menu:
Important. Notice how the select form element has and id of model and how each of its option child elements have a unique value data-attribute. This will be useful later on.

Retrieving the Custom Field Data

Theoretically, one can insert the custom field data almost anywhere. In this case though, the variable.php template file was the best place to edit and add the following code. A clean version of that template was copied from plugins/woocommerce/tempaltes/single-product/add-to-cart/ folder to (theme folder)/woocommerce/single-product/add-to-cart/. Three custom fields were assigned to each variation, a checkbox used to mark it available for alternative purchasing option, a select option for depicting what the alternative purchasing option is, and text field to enter the url of the online purchasing option if available.

Important. Notice the $model_name variable. It is used to assign a specific id to the wrapping div containing the custom field information. I assume, if the attribute name would be something other than “Model”, such as “Size”, the custom field key name would then be "attribute_size". I believe this is because the corresponding custom field key is of the form: 'attribute_(appended attribute value name)'.

At this point, in the html output, every variation will have a wrapping div with a specific id.

The Secret JS Sauce

WooCommerce already has built in functionality to update fields such as Price and SKUs for the different product variations. Sifting through some of the plugin code revealed that this content was being updated via jQuery and triggered by the .change() event. Using the same technique, we used the .change() event to trigger our js function and show/hide the custom field data.

Thats it: Live Example

Almost Heaven – Barrel Sauna

  • That is a great example of how you can customize WooCommerce using simple methods. Congrats!

    • Guillermo

      Thanks Remi!
      Your tutorials were extremely valuable.

  • Wendy

    Thanks for the great tutorial. Without people like you I would not learn anything.

    I found your blog post because I am looking for a way to add some text/custom fields front end specifically in the variation drop down.
    I would like to add some sub list items which cannot be selected so merely used for information.
    For example:
    51-canopy-barrel
    – Great quality
    – Green
    61-canopy-barrel
    – Extra Big
    – Blue

    Where you can only choose 51-canopy-barrel or 61-canopy-barrel.

    Do you know of a hook or filter that could help me with that?

    Thanks
    Wendy

  • sandeep

    I have used the code but I am not getting the values. I also placed output in the end

    $variation_ids = $product->children;

    foreach( $variation_ids as $var_id ) :

    $url = get_post_meta( $var_id, ‘_text_field’, true );

    $model_name = ‘color-‘.get_post_meta($var_id, ‘attribute_color’, true);?>

    <div class="custom_variation" id ="”>

    Output For Two Variations :

  • Nick

    Hello and congrats on the cool tutorial! Can you please be more specific when you explain about different code snippets.. for example I’m not sure on how and where to put the “The Secret JS Sauce”code :)?

  • Nice tutorial right there, do you know how we can get Variation ID out of WooCommerce page?

    Thanks

  • WillemSiebe

    Hi Guillermo, I prefer not to overwrite variable.php with my own, but just use one of the action hooks, but then I don’t manage to display the items. I posted my problem on StackOverflow, can you have a look as well? See http://stackoverflow.com/questions/30828695/display-get-post-meta-for-woocommerce-variation.

  • Loïc S

    Hello

    This is working only with the attribute name is “Model”.

    How to make it work with other attributre name or when there is more than one dropdown select attribute.
    Cheers

  • chrismmmmmm

    implemented this – was working – just upgraded woocommerce to 2.4.6 and it broke 🙁
    any ideas on what needs to be changed for the updated version?

  • Jorge

    Where do you put this code to show in the product’s variations tab?

  • Jeppe Bech

    Err, you keep writing ‘the following code’, but where IS the code??

  • Adri De Carvalho

    Where is “The Secret JS Sauce”?