To Add the fields to WooCommerce variable product is quite simple. You just need to follow the steps to add your own custom variation fields.
- Step1: Add custom field to each product variation
- Step2: Store custom field value into variation data
- Step3: Variation Template Override
Where to add the fields to WooCommerce variable product on admin side?
WooCommerce has functions for form fields within woocommerce/includes/admin/wc-meta-box-functions.php file. You have to call the right field function e.g woocommerce_wp_text_input($array_args) will add a text field. The arguments will be passed like below code.
l’ll show you how to add following products fields on variations tab.
- Text
- Number
- Textarea
- Select
- Checkbox
- Hidden
Step1: Add custom field to each product variation
Below code adds fields to product variation tab.
- create the custom function ci_variation_settings_fields() and within it call the required variation fields functions.
- Add the function to the variations tab action hook woocommerce_product_after_variable_attributes This hook will display all the fields in ci_variation_settings_fields().
Product Variations Complete Step1 Code
Lets move forward to store the variation fields into database.
- create the custom function ci_save_variation_settings_fields() and store the submitted variation fields data.
- To store the data add the function to action hook woocommerce_save_product_variation
To Add the fields to WooCommerce variable product, copy below code to your child theme functions.php file.
Step2: Store custom field value into WooCommerce variation data
It is must that each custom variation field be added to the WooCommerce available variations filter hook add_filter( ‘woocommerce_available_variation’, ‘load_variation_settings_fields’ );
The below code is self explanatory, add it to the child theme functions.php file
Step3: WooCommerce Variation Template Override
Great! We have now reached to our final step…..
WooCommerce uses JavaScript to fetch the product variation from variation.php template file. If you are familiar with WooCommerce template override in child you know what to do, if you are doing this for the first time. Follow me
- In order to override this template, within your child theme’s add directory structure woocommerce/single-product/add-to-cart folder.
- Next create a file called “variation.php” and place in add-to-cart folder
Add the following code to variation.php file we just created above
Custom variation Fields on WooCommerce Product Detail Page
If you have already added the custom variations fields data from admin, then on product detail page you will see the final result like the below image.
To Add the custom fields to a simple product, check my tutorial How to Add WooCommerce Custom Product Fields
Related Links:
Custom WooCommerce Plugin Development
Flatsome Theme Customization
WooCommerce Checkout Page Fields
Advanced Custom Fields
Thank you so much, I couldn’t find any documentation on what hook I needed to use