This tutorial is part of the “Customizing your WooCommerce site without PHP” series.
In this part, you will learn how to add custom fields and taxonomies to your WooCommerce products.
What We Plan to Achieve
You will learn how to add custom fields and taxonomies to the WooCommerce product editor in the WordPress admin area. These fields allow you to add information to products and to organize products in new ways.
Learn by Doing
This tutorial uses the Types plugin, which is a free Toolset component. The best way to learn how to customize WooCommerce is by doing it yourself. We encourage you to use a free training site, which allows you to follow the entire tutorial, step by step, from inside the WordPress admin area.
Your training site will include sample content and all plugins installed. You can also use the same training site for the rest of the tutorials in this series.
The Difference Between Custom Fields and Custom Taxonomies
Before we add these extra pieces of information to our products, we need to decide which WordPress structure will work best for each. Basically, WordPress offers two ways for storing additional information for your posts:
- custom fields
If you already know the difference between these two, feel free to skip to the next section.
Let’s take a closer look at the specific information we want to enhance our products with. This will enable us to decide when to use a custom field and where a taxonomy fits better.
“Special offer” – a custom field or a taxonomy?
“Special offer” will include promotional text about certain products to make them more attractive for potential buyers.
Only some of our products will have a special offer available, and the offer for each product will have its own wording.
The “Special offer” is definitely a piece of “arbitrary extra information”. That’s why we implement “Special offer” using a custom field.
“Gender” – a custom field or a taxonomy?
Most shops have different departments for women, men, and children. So we understand that gender is a way to group products. This means that we should implement “gender” as a custom taxonomy.
Custom taxonomy versus product categories
We could also use Product Categories to classify products by gender. However, in our case we are already using Product Categories to group shoes by a different criterion, namely: “shoe types” (we have heels, boots, sandals, slippers, etc.).
When you need to organize products by a different criterion, you should create a new custom taxonomy.
Adding Custom Fields to WooCommerce Products
To add custom fields with Types, go to Toolset->Post Fields.
Add a new group and give it a name, for example, “Product details”.
This group will be a container for all custom fields added to your WooCommerce products.
Expand the “Where to display this group” section and choose Products.
Now you can add custom fields to this group.
To create new custom fields, you use the “Available fields” panel on the right.
Click on the “Single line” button to add your custom field to the group. We want the “Special offer” input to appear as a single line of text.
Give the field its name (“Special offer” in our case) and save the group.
Populating custom fields with data
In your WordPress admin area, go to Products and edit any of the products in your site.
Under the main editor, you should see the new group you created containing the “Special offer” custom field.
Adding a Custom Taxonomy to WooCommerce Products
To add a new taxonomy to your WooCommerce products, go to Toolset->Taxonomies. Then, click on the “Add new” button. Give your taxonomy its singular and plural names. We will use “Gender” for both (there’s no plural for “gender”).
In the right sidebar, under “Select Post Types”, select “Product” to connect your taxonomy to WooCommerce products.
Expand the “Options” section. The first option allows you to choose whether this taxonomy is to behave like categories or like tags.
Since we want our taxonomy to look and work similarly to categories, we choose “Hierarchical”.
Adding taxonomy terms
Again, open a product for editing, or refresh the editor if you already have a product open. You should now see both the new “Special offer” field and the new “Gender” taxonomy.
Before we start using the Gender taxonomy, we need to create the actual genders: Men, Women, and Children. These are called taxonomy terms in WordPress terminology.
Go to Products->Gender and add the following new genders:
Once these genders have been added, you will see them in your product editor.
Setting gender for products
When all your gender terms have been set up, you can assign your products to them. You just saw the “Gender” input in the product editor. When you want to set the gender of several products together, use WordPress’s “Bulk Edit” feature to save time.
Go to Products and check the products you are going to bulk-edit.
Select Edit from the drop-down list and press the Apply button.
On the next screen, pick the relevant gender term and save the changes.
We used the Types plugin to add custom fields to WooCommerce products. We also learned how to set up taxonomy terms and edit products by using these custom fields and taxonomies.
Now we have new custom fields in the WordPress admin area, but they aren’t showing up on the site’s front end just as yet. The next tutorials in this series will teach you how to create templates for WooCommerce products to display custom fields.