I Doubled my Income in a Year

WordPress allowed me to get a better job & better projects in just a Year. I will give you tips, tricks and guide you into WordPress development so you can get more income. Sign up to my 7-day email course!

How To Add WooCommerce Custom Product Fields

When working on a WooCommerce add-on or a custom solution, you will sometimes have to add some WooCommerce custom product fields so that you can save additional data for each product. In this tutorial we will go through adding fields to existing product tabs and also create a new product tab.

Adding WooCommerce Custom Product Fields

When you want to add a custom product field inside a WooCommerce metabox, you can add it creating a custom input. That is alright and you can work with that. But, creating custom product fields can be a cumbersome task if you want to add multiple fields.

Creating your own custom markup for the product fields is only fine when you are creating a custom layout in the metabox. But, if you are just going to use regular inputs, then use the WooCommerce product fields functions. It will be much easier for you to create many product fields and you will also the WooCommerce API for that.

Let’s learn about those functions.

Text Field

The text input is the basic input field that can receive a different type such as text, number, date etc. Everything that HTML5 does support, you can add there. But, don’t use it if you are going to add a radio input or a checkbox. There are two other functions for that. The function name for adding the text input as a WooCommerce product field is woocommerce_wp_text_input.

Checkbox Field

The checkbox input receives some other parameters and it’s created with the function woocommerce_wp_checkbox. The parameter cbvalue is the value which will make the checkbox checked. This value will be matched againts the parameter value. If they have the same value, the checkbox field will be checked.

Radio Field

To create the radio input, we will need to use the function woocommerce_wp_radio. To create various radio options, you will need to use the parameter options. This will be an associative array where the key will be the value of the input and the value will be text of that input.

Textarea Field

The textarea input is done with the function woocommerce_wp_textarea_input. The parameters are almost the same as for the text input but we can also set the rows and columns in parameters rows and cols.

Select Field

The select input has something similar with the radio input. The parameter options will be used to create all the options. The function that will create the select field is woocommerce_wp_select.

Hidden field

The hidden field can be used for some data that will be used internally and will not be needed to change by the user.

Default Product Tabs

Now that we know all the functions that we can use to add our own WooCommerce custom product fields, let’s learn about the default product tabs. There are 7 default tabs:

  • General
  • Inventory
  • Shipping
  • Linked Products
  • Attributes
  • Variations
  • Advanced

Some of those tabs will be only shown for a specific type of the product. In each of those tabs we can hook our own function to add our custom product fields. Here are the hooks we can use:

General Tab

  • woocommerce_product_options_pricing
  • woocommerce_product_options_downloads
  • woocommerce_product_options_tax
  • woocommerce_product_options_general_product_data

Inventory Tab

  • woocommerce_product_options_sku
  • woocommerce_product_options_stock
  • woocommerce_product_options_stock_fields
  • woocommerce_product_options_stock_status
  • woocommerce_product_options_sold_individually
  • woocommerce_product_options_inventory_product_data

Shipping Tab

  • woocommerce_product_options_dimensions
  • woocommerce_product_options_shipping

Linked Products Tab

  • woocommerce_product_options_related

Attributes

  • woocommerce_product_options_attributes

Variations

  • woocommerce_variable_product_bulk_edit_actions

Advanced

  • woocommerce_product_options_reviews
  • woocommerce_product_options_advanced

Example

Here is an example of the general tab and some WooCommerce custom product fields.

Custom Product Tab

Some add-ons or solutions will also require additional product tabs. We can add custom product tabs using a filter or an action:

  • Filter: woocommerce_product_data_tabs
  • Action: woocommerce_product_write_panel_tabs

If we are going to use the action, then we will need to write the whole markup ourselves. If we are going to use the filter, we just need to extend the existing tab array with our new one. We also need to add the panel that we will show when our tab is clicked.

I will now show you both ways how to add the tabs.

Custom Tab with Filter

When adding a tab using the filter, you need to define the label, target and class. The target will be the attribute id of our panel.

Custom Tab with Action

When defining our custom tab with the action, then we need to create the whole markup. This means adding a li item and also the a with the target as the value in href.

Custom Panel

Since we have our custom tab defined, we also need to add a panel that will show up when clicking our tab. We are adding a custom panel by hooking into woocommerce_product_data_panels.

Be sure to add the same value in the attribute id that you have defined as the target.

Saving WooCommerce Custom Product Fields

The last part that we also need to define is how to save our product field. To save the product fields, you need to use the action woocommerce_process_product_meta.

We are just getting the WC_Product object and then update/add a new metadata. After that, we are calling the method save() to save every new change.

Conclusion

Since WooCommerce uses the WordPress Plugin API, you can customize every possible detail. To add WooCommerce custom product fields, you can use various actions and filters to achieve it. In this tutorial, you have learned a lot about custom product fields and actions/filter that you can use to do that.

If you have ever created your own custom product fields, please do share your experience in the comments below.

If you would like to learn more about WooCommerce, you can check out my eBook:

Book WooCommerce for Developer to buy

About the Author Igor Benic

Web Developer who mainly uses WordPress for projects. Working on various project through Codeable & Toptal. Author of several ebooks at https://leanpub.com/u/igorbenic.

follow me on:

EDD for Developers

In less than 2 weeks, I have earned $1,800 by working on a custom solution with Easy Digital Downloads without any prior experience. Let me teach you how you can too with various custom solutions.

Get the eBook

Leave a Comment:

2 comments
ts says August 1, 2017

Thanks a lot! This was very helpful for a project I’m working on!

Reply
Add Your Reply

How To Add WooCommerce Custom Product Fields

by Igor Benic time to read: 5 min
2
Learn how to develop with Easy Digital DownloadsGet the eBook
+