How to Add Fields to WooCommerce Variable Product

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.

1. create the custom function ci_variation_settings_fields() and within it call the required variation fields functions.
2. 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.

1. create the custom function ci_save_variation_settings_fields() and store the submitted variation fields data.
2. 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

1. In order to override this template, within your child theme’s add directory structure woocommerce/single-product/add-to-cart folder.
2. 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