A few months ago I wrote a post on how to add custom fields to WooCommerce products within the administration, and many of you ask me how to add custom fields to products variations. So I decided to write this tutorial to help you create new fields for each WooCommerce product variation. The final result of this tutorial will look like this:
[box type=”yellow”]The code has been updated for WC 2.4+ If you need compatibility for WC < 2.4 use this code instead, Thanks ;-)[/box]
[box type=”yellow”]WooCommerce 2.5 introduced a new way to display variations custom fields values using wp.template. The code has been added below.[/box]
[box type=”blue”]If you want to add custom fields to products, read this post.[/box]
Hooks
To achieve this, will need to create 3 functions: a first one to register the fields, a second one to create the fields when you click on “add variation” (javascript purpose), and a last one to save the fields data within the database.
Each function will be hooked to these specific actions:
- woocommerce_product_after_variable_attributes
- woocommerce_save_product_variation
woocommerce_product_after_variable_attributes_jswoocommerce_process_product_meta_variable
Fields Types
I will cover only 6 fields types for the moment, and I will probably create a new post for advanced fields later. In this tutorial, you will learn how to add these custom fields to variations:
- Text Field
- Number Field
- Textarea
- Dropdown Select
- Checkbox
- Hidden field
A quick explanation
Basically the method is more or less the same what i explained in my previous post regarding custom fields for products, but in the case of variations, there’s something different that you need to take into account: when you click the “add variation” button, a new div is loaded by a javascript bit of code. The consequence is that when you register fields for variations, you need to register them twice, once for the “regular process”, and one for the javascript method. That’s why we use the two hooks: woocommerce_product_after_variable_attributes and woocommerce_product_after_variable_attributes_js.
Since WooCommerce 2.4+ you can now define only two hooks, and there is no need to register fields for javascript use anymore!
The code
Registering fields is pretty basic as you see we use the WooCommerce builtin functions (All these functions are located in WooCommerce/Admin/WritePanels/writepanels-init.php.):
- woocommerce_wp_text_input()
- woocommerce_wp_textarea_input()
- woocommerce_wp_select()
- woocommerce_wp_checkbox()
- woocommerce_wp_hidden_input()
Finally, the only “tricky” part is the within the save_variation_settings_fields() function, where you need to make sure that each field uses the update_post_meta() function, otherwise your field won’t be saved. The use of a “for” loop is needed to loop through all variations.
To get those values on the frontend we just need to use the popular get_post_meta() function. That’s pretty much all you need.
Displaying Fields Values on the Frontend with WooCommerce 2.5+
WooCommerce introduced wp.template, and it’s now easier to display variations custom fields values based on the selection of the attribute value in the dropdown select. You need to add the following function to functions.php:
And now you need to edit the custom template that display the variation fields. This file is called variation.php and is located in wp-plugins/plugins/woocommerce/templates/single-product/add-to-cart/. Do not edit this file directly but instead, duplicate it and place it in a folder called woocommerce/templates/single-product/add-to-cart/ in your theme folder (Keep in mind: never edit core files). Add this code:
Result:
Thanks to Caleb Burks & Nicola Mustone for the update ;-)
Leave a Reply
You must be logged in to post a comment.