How to create WooCommerce custom product data fields

If you want to add additional data points to your WooCommerce products to help customers make a more informed choice before buying, creating custom product data fields is essential.

The highlighted area in the example below shows extra product data fields that display additional information for a product.

You can see in this example that there’s no user input – it’s simply additional content.

How to add custom product data fields to WooCommerce easily

By far the easiest way to add WooCommerce custom fields is to use the Product Add-Ons Ultimate plugin. This will allow you to add any type of custom field to WooCommerce products in a simple and straightforward way.

Let’s have another look at the screenshot from the start of the article. Or you could view the actual working demo here.

The user is presented with some further information about the product through some extra fields:

• They’re nicely formatted in a simple table making them easy to read and meaning that you don’t need to add any of your own styles
• Each piece of data can have its own row
• You can include an icon or an image with each piece of data (this is optional)
• You can include a title or a label, e.g. ‘Cache’, then further details, e.g. ‘4MB Smart Cache’

There’s a detailed tutorial on displaying additional information on WooCommerce products here.

What can you use custom data fields for?

The example above uses custom data fields to display technical information about a product. But you can use custom product data fields for all kinds of purposes, including:

• Technical specifications
• Nutritional information for food products, e.g. calorie content, fat content
• Additional notes about pricing
• Information about shipping or lead times
• Product data that works best in a table format
• Custom pricing information

How to add WooCommerce custom product data fields

It’s really easy to add WooCommerce custom product data fields. First, we need the WooCommerce Product Add-Ons Ultimate plugin.

Using Add-Ons Ultimate has several advantages:

• Easily add custom fields to any (and multiple) WooCommerce products – for instance, you can create fields that apply to all products, or to all products within certain categories or taxonomies, or to multiple products that you specify
• Display different custom information depending on which variation the user has selected
• Organize multiple custom fields into groups to make it easier for the user to view additional product information
• Create conditions based on custom input fields (see below) so that different information is displayed to the user depending on selections they make

How to add an ‘Information’ field

You can follow the steps in this support document for installing and activating the plugin. When you’ve activated the plugin, you can add an extra field to your product.

We’re going to add an ‘Information’ field type. So first go to a product that you’d like to display some additional information for.

From the Product Add-Ons section in the Product data panel, click ‘Add Field’. Choose ‘Information’ as the ‘Field Type’.

You can enter a ‘Field Label’ that will act as a heading for each row of product information. This makes it easy to organize your product data, helping the user to find what they need.

Then you can add multiple rows for each piece of product information. In each row, you can enter an image, label and data in each.

When you’ve added all the information that you need, you just update the product.

On the front end, the extra product data fields will be displayed in a table format like this:

You can add as many extra product data fields as you like.

How to add data fields to multiple products in WooCommerce

So we’ve just looked at a quick and easy way to display extra information about a single product. But what if you want to display that same information about multiple products?

Here we’ll discover how to add custom data fields to multiple products in a few easy steps:

• Go to Product Add-Ons > Global Add-Ons
• Click ‘Add New Global Group’
• Select ‘On all products’
• Then add your ‘Information’ field as normal

This information field will now be displayed on all your products.

How to add data fields by category or taxonomy in WooCommerce

If you’d like to add custom information fields to all products within certain categories or taxonomies:

• Go to Product Add-Ons > Global Add-Ons
• Click ‘Add New Global Group’
• Select ‘By category’
• Enter the categories or taxonomies where the custom fields should be displayed
• Then add your ‘Information’ field

The information fields will be displayed on all the products within your selected categories.

How to display different WooCommerce custom fields based on user selections

If you are looking to use both WooCommerce add-ons fields and extra product data fields together, this is achieved by setting conditions on our extra product data fields so that they are only displayed when the user has made certain other choices from the custom fields.

Let’s look at a different example. In this product, the user can create their own cereal product by selecting different elements. We want to display nutritional information for each element to help the user make their choices.

We don’t want to display all the nutritional information for all the elements at once – that would be overwhelming and unhelpful.

Instead, we just want to display the relevant custom field when the user makes a selection. So in the screenshot above, the user has selected ‘Cheerios’ as their base and information fields showing calories, fat and sugar for Cheerios are displayed.

If the user selected a different option, then they’d see different information fields displayed.

Adding conditions to extra product data fields

Here is a much more in depth article on conditional logic here but the basics are simple:

1. Click ‘Add Condition’ for the field where you want to add a condition – in this case, to our information field
2. Choose ‘Show this field if’ in the first select box
3. Add your conditions one by one

You can see this in the screenshot below:

This means that this field will only display if the user has chosen ‘Cheerios’ in the ‘Cereal’ field.

There’s a dedicated tutorial on creating a build your own cereal product in WooCommerce here.

How to display custom fields for different variations

What about if you want to display different information for different variations? This can also be easily accomplished using the Product Add-Ons plugin:

• Create your variable product
• Add as many custom fields as you like
• In each custom field, you can specify one or more variations where the field should be displayed

In the example below, we can display specific size and fitting information for clothing. Each variation is a different size so we need to show slightly different custom fields.

You can see this product here. Notice how the size information fields change when you select a different variation.

How to organize information fields into groups

Finally, let’s look at how you can organize custom fields into groups. This is especially important if you have a lot of custom information fields.

Going back to our first example, the Build Your Own Computer product, you can see that the fields are organized in groups.

We’ve gone a step further and applied an ‘accordion’ layout to the groups, meaning that the user can choose to expand or collapse each group so that they only view the fields within an expanded group. This makes it much easier for the user when there’s a lot of information on the screen.

You could also apply a tabbed layout instead:

To display your groups in a tabbed or accordion layout, just update the ‘Display groups as’ setting.

Please note that these group layouts are only available in the Pro version of Add-Ons Ultimate.

Advanced Custom Fields for WooCommerce

The Advanced Custom Fields plugin for WordPress lets you customize the WordPress edit screens and custom field data. Users can easily add on custom fields in a few clicks using the robust field builder functionality. It’s a great, all-in-one solution for businesses looking to take their WooCommerce store to the next level.

The Advanced Custom Fields plugin is also useful for adding extra information to WooCommerce products. You can use it to display additional information for WooCommerce products that is only required on the back-end of your WooCommerce store.

For instance, you can add important details about WooCommerce products so staff members have an easier time managing the store. This can help your staff figure out stuff like how much stock is left or which product variations are out of stock.

How to set up Advanced Custom Fields

To add custom fields to your WooCommerce store, you need to install the free Advanced Custom Fields plugin on your WordPress site. Here’s how you set it up:

Create a new field group

Using the WordPress dashboard, navigate to the Custom Fields tab and click the Add New button.

Give the field group a name like “Product Customization”. You can set multiple fields in the same group. This way you can display multiple custom fields for one product or a section of your WooCommerce store. 

Add your custom fields

Click on the Add Field button to add custom fields to the field group.

Here, you need to set Field Label, Field Name, and Field Type. Add as many custom fields as you’d like.

If you’re selecting a field that has many options, you’ll need to add your field choices using the text field below Choices. You can also set options such as the default value, the layout, and a value or label. 

Configure additional field group settings

The next step is to set the Location of the field group. You can choose where you want the field group to appear in your WordPress dashboard using the Location section.

Set Post Type to Product. Enable the checkbox next to Active under the Settings section. This allows you to set the field group on product pages and show the field selections to shoppers. 

Add information to products

Navigate to the WooCommerce product’s edit page to add custom fields using the field group we created earlier. 

Final thoughts

In this article, we’ve looked at how to add custom data fields to WooCommerce products. Don’t forget to check out the WooCommerce Product Add Ons Ultimate plugin for its extensive functionality.