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

Share post with others

1 thought on “How to Add Fields to WooCommerce Variable Product”

Leave a Comment