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.
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.
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.
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:
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
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.