Advance WooCommerce Custom Fields Guide For Product Variations

by Owais Alam  January 24, 2017

I n many instances, there is additional product data that is entered in the variation description field. However, WooCommerce offers Custom Fields for Variation for this purpose. Once you have enabled these areas, the fields could be easily added to the form in the native WooCommerce store format. These fields are invaluable for entering additional data for products.

In my previous article, I discussed how to add custom text field, product number and product text area. In this tutorial, I will discuss how you could add dropdown  options, checkbox fields, and custom field types as well as an addition of variable product data.

Product variations

As apparent from the above screenshot, I will discuss how to add custom fields to the Edit Product page. To achieve this objective, I will highlight how to add and edit code in functions.php (located in the theme folder).

The two-step process comprises of:

  • Addition of hook to woocommerce_product_options_general_product_data. This hook contains code for displaying the newly added fields.
  • The addition of hook for woocommerce_process_product_meta, This hook will save the values in the custom fields.

The following code contains code for the above two actions:

Custom Fields

Field Structure

The following code demonstrates how the above snippets combine together for custom input fields. This code must be added to functions.php (located in the theme folder).

Save Data

Once you have created the custom product fields, another function is required to save the values, once the user hit either the update or the publish button.

Here is the complete code of custom input fields which you must paste in the functions.php, located in the theme folder.

Display Field Value

WooCommerce introduced wp.template. After this, it is now easy to display variations custom fields value based on the selection of the attributes selected in the dropdown menu. For this action, add the following code to the functions.php:

Next, you need to make changes to custom template that displays the variation fields. The file is named variation.php (located in wp-plugins/plugins/woocommerce/templates/single-product/add-to-cart/).

Note: Do not edit this file directly. Instead, create a copy in the folder woocommerce/templates/single-product/add-to-cart/ in the theme folder. Next add this code:

Conclusion

In this tutorial, I discussed addition of custom fields (dropdown, checkbox, WooCommerce custom field type) with WooCommerce product variations.

If you find an issue in the code or would like to contribute to the discussion, please leave a comment below.

Start Creating Web Apps on Managed Cloud Servers Now!

Easy Web App Deployment for Agencies, Developers and E-Commerce Industry

About Owais Alam

is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at owais.alam@cloudways.com

Stay Connected:

You Might Also Like...