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.
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
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.
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.
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
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
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:
- Linked Products
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:
Linked Products Tab
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:
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
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
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
Be sure to add the same value in the attribute
id that you have defined as the
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
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.
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:Become a Sponsor