WooCommerce custom fields: how to create and display them [+video]

If you want to add additional data points to your products to help customers make a more informed choice before buying, learning how to add WooCommerce custom fields is essential. Our step-by-step informational guide explains the process.

How to add WooCommerce custom product fields – everything you need to know

In this post, you’ll discover how to add WooCommerce product custom fields to your shop items. We’ll look at two types of custom fields:

1. Fields that present additional information about the product
   Here you’ll learn how to add WooCommerce extra product data fields – custom fields that display additional information for your products.
2. Fields that allow the user to customize the product
   Second, we’ll explore custom input fields (also called product add-ons) like text fields, select fields, and checkboxes, that allow the user to enter additional, personalized information about a product

We’ll also discover how to use both types of custom field in combination, displaying extra product data depending on certain user choices.

The primary way to add custom fields (and by far the easiest way) is to use a WooCommerce custom fields plugin. The process is really simple and doesn’t require any programming knowledge. You don’t even need to use shortcodes.

Plus, we’ll take a look at Advanced Custom Fields and how to add custom fields to the checkout.

Finally, we’ll learn how to add custom fields programmatically to WooCommerce. This is an optional extra.

Examples of both types of WooCommerce custom fields

1. Extra product data custom fields

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.

2. Custom add-ons fields

The second example below shows a product page for a jewelry website. You can see that there are a number of extra fields, like ‘Add a personalized message’ and ‘Gift wrap this item’ where the user can enter their own information and make certain choices about the product they want. This is an example of the add-ons type custom field.

This is the difference between the two types of custom fields: add-ons allow the user to enter information about the product; data fields simply present information about the product.

What is the difference between custom fields and attributes?

Using product attributes and variations, you add the description, the price, and the attributes, which will be the same for every customer.

With custom fields, the product is potentially different for every customer. If you are selling bracelets that can be engraved with a name, then each customer will be entering their own name. You can’t create attributes for that.

You can check out this article, if you’d like to learn more specifically about adding custom fields to variations.

How to add custom fields to WooCommerce – a straightforward process

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.

This plugin is used by all kinds of businesses to improve their customer experience and optimize sales. The order processing team at Ella’s Bubbles, for example, was able to save thousands of hours by using this plugin for product add-ons. Similarly, the Bonbon Boys saw a huge spike in gift card sales after using this plugin to add upsells.

You can download the plugin by clicking the image below.

How to display extra product information in WooCommerce using data fields

As mentioned previously, there are two types of WooCommerce custom fields. The first type is used to display extra information about the product to the user.

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

Here you can see that we’ve presented the user with some further information about the product.

A couple of things to note about these 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 in WooCommerce products?

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

We’ll take a look at some of these examples shortly. But first let’s look at exactly how to add custom fields to a WooCommerce product.

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 custom 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 custom 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 custom 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.

Adding WooCommerce custom fields – video

The following video covers all the aspects of adding WooCommerce custom fields discussed in this post:

Adding WooCommerce custom add-on fields

We’ve covered the first type, product information fields, in depth above. Let’s now look at the second type of custom field: custom add-on fields.

To add custom add-on fields to WooCommerce products, you’ll need the WooCommerce Product Add Ons Ultimate plugin. It also enables you to add costs, subtract costs, and use conditional logic.

The plugin will also ensure that any custom field data is displayed in the cart, in notification emails, and in the order.

Let’s look at a simple example.

WooCommerce custom field types

As I mentioned above, custom add-on fields include any kind of form field, such as:

• Text field
• Textarea
• Dropdown/select field
• Radio buttons
• Checkboxes
• File uploads
• Date fields
• Number fields
• Swatches

These fields would be displayed on the front end product page near the Add to Cart button. They give customers the opportunity to configure or provide personalised information for the product.

Typical uses for custom fields

If you’re wondering why you would ever need custom fields in your WooCommerce store, think about any of the following product types:

• Monogrammed or branded clothing and apparel: e.g. any kind of personalized t shirts, staff uniforms, merchandising, or anything that requires a custom logo
• Personalized jewelry: e.g. bangles that can be engraved with a name or personal message, lockets that contain photos of loved ones, necklaces or bracelets with optional charms or stones
• Build your own products: anything from create your own sandwich or pizza products, through takeaway menus, to configurable skateboards, computers or phones – any product that creates optional elements that the user can configure
• Product Hampers with add-ons: This could be curated product hamper boxes (that use extra product data fields), which come with the add-on options like gift wrapping, personalized gifts cards, etc (which use custom add-on fields)

There are many, many more products where you would need to use WooCommerce custom fields. If you’d like some more ideas, or want to know more about personalized products, these articles can help:

• Creating a WooCommerce product customizer, with examples
• Customizing WooCommerce products by adding extra options

In summary, it’s worth noting that custom fields will improve customer retention and are likely to boost sales. Typical examples of products with custom fields include:

• Menu ordering – e.g. build your own pizza, build your own sandwich
• Personalized greeting cards
• Gift wrapping (find out how to add a WooCommerce gift wrapping option here)
• Extended warranties
• And anything else your business requires

How to add a custom field in WooCommerce

Let’s take a look at a simple example product. In this product, we’re adding custom fields that will allow our users to personalize an item of jewelry.

Firstly, we’ll look at adding one of the most common custom field types – a text field – using WooCommerce Product Add Ons Ultimate. We’ll look at:

• How to add fields in the back end
• What the fields look like on the front end
• How the store owner receives the custom field data in new orders

It’s easy to add a custom field to a product in WooCommerce:

• Go to the product where you’d like to add a custom field
• In the Product Data section, click the Product Add-Ons
• Click ‘Add Group’ then click ‘Add Field’
• Choose the type of field you’d like to add from the ‘Field Type’ option
• In the option below, I’ve selected a text field as the field type

On the front end, this is what it’ll look like:

Note that WooCommerce Product Add Ons Ultimate adds some pricing information above the Add to Cart button. This shows:

• The base price of the product
• Any additional costs added through extra custom fields
• The overall total that the customer will pay after entering custom information

You can configure these totals fields by changing their labels, just displaying the total price, or hiding them altogether.

There’s a detailed tutorial on adding a text field to a WooCommerce product page here.

Configuring extra parameters

Returning to the extra field in the back end, you can see that there are several additional options for configuring your custom field. These vary slightly depending on the type of field you’re adding but let’s look at some of the most common ones:

• Field label: this is where you can create a label for your field
• Field price: want to charge your customers for entering information in this field? Just add the price here. This will get added to the product price automatically
• Required field: if you’d like to ensure the customer completes this field before adding the product to the cart, then check this option
• Flat rate: by default, if the field has a price, it’ll be multiplied by the quantity of product added to the cart. So if the field price is $5 and the user adds 2x the product to their cart, the field cost will be $10. If you only want to charge for this field once, irrespective of the quantity in the cart, check the ‘Flat rate’ option
• Percentage: check this field to make the ‘Field price’ field a percentage instead of a fixed value
• Min chars: this is the minimum number of characters the user can enter into this field. Leave it empty if there’s no minimum
• Max chars: the maximum number of characters the user can enter. Leave it empty if there’s no maximum
• Price per character: check this option if you’d like to multiply the field price by the number of characters entered into the field
• Default: enter a default value here if you’d like this to display to your customer

For further details on all the extra parameters available to all field types, take a look at the support articles here.

Viewing custom fields in the cart and order details

When the customer adds a product to their cart that contains one or more custom fields, the field values will be added to the product name. Take a look at the example below showing a radio button field, a text field, and an image upload field:

The same data is passed through to the order. So if you’re the store owner, you can quickly view what custom extras to add to the product:

We’ve looked at a simple example of adding a text field to your WooCommerce product page where the customer can enter their own text. This text is then displayed with the product in the cart and will be included with the product in the order.

The text field is just one of many field types that you can add using the WooCommerce Product Add Ons Ultimate plugin.

Adding WooCommerce custom fields using code

If you’d like to find out more about coding custom fields from scratch and adding them programmatically, then read on. By the end, you will have learned to build your own custom field plugin for WooCommerce. The plugin will:

• Create a custom field in the Product Data section of a WooCommerce product
• Use the value saved in that field to display a text input field in the product single page
• Save the user input in the custom field to cart meta data
• Pass the value of the custom field to the order object

In this section you can learn about:

• Adding a custom field in the back-end
• Saving the custom field value
• Displaying custom fields in WooCommerce
• Validating custom values
• Adding custom values to the cart
• Updating the product price programmatically
• Displaying custom fields in the cart and checkout
• Displaying custom fields in the WooCommerce order and confirmation emails

I’ve also included all the code used in the article in its entirety at the end.

Adding a custom field in the back-end

Let’s start by looking at some code to add a custom field to the back-end of WooCommerce. This will add a new field in the Product Data section of a WooCommerce product.

This short function uses a standard WooCommerce function, called woocommerce_wp_text_input, to display a text field in the Product Data section.

You’ll notice that woocommerce_wp_text_input accepts several parameters, like ID, label and class.

You can find a complete list of the parameters in the wc-meta-box-functions.php file. There are several cognate functions, all with nice self-explanatory names, like:

• woocommerce_wp_hidden_input
• woocommerce_wp_textarea_input
• woocommerce_wp_checkbox

These functions greatly simplify the task of adding custom fields to WooCommerce products.

Hooking the custom field function

To ensure that the custom field displays in the correct place – in this case, it’s just on the General tab – we need to hook our function to the correct action: woocommerce_product_options_general_product_data.

If you wanted to add your custom field to a different tab, you could try actions like:

• woocommerce_product_options_inventory_product_data
• woocommerce_product_options_shipping

Saving the custom field value

Now we need to save the value of the field when the product is updated.

This function runs when the product is first published or when it’s updated. It looks for a value in our custom field, sanitizes it, then saves it as product metadata using the CRUD methodology introduced to WooCommerce a few versions ago.

The function hooks to the woocommerce_process_product_meta action.

Displaying the custom field on the front-end

Now we can add the custom field to the single product page.

We will check if the custom field has a value. If it does, we’ll use that value as the title of the input field on the front end. The user will be able to enter some text, which will get saved as part of the cart meta data when they add the product to the cart.

Here’s the code to display the custom field on the product page:

This function creates a $product object based on the product ID so that it can look in the product meta data for a value for the custom_text_field_title field. If it finds a value, then it will display a text input field and label.

Note that the function is hooked to the woocommerce_before_add_to_cart_button action. Hooking it to this action ensures that the input field is included in the cart form, which means that its value will be available when the product is added to the cart. Which is what we’ll look at next.

Validating WooCommerce custom field values

When a user enters some text into our custom field, we might want to check that the text conforms to some criteria we’ve laid down before we allow the item to be added to the cart. We do that using the woocommerce_add_to_cart_validation filter.

The code below performs a simple check when the user clicks ‘Add to Cart’ to ensure that they have entered some text in the custom field. Essentially, this makes the field required in order for the user to add it to their cart.

The woocommerce_add_to_cart_validation provides you with three parameters:

• $passed – a boolean value to indicate whether validation is successful or not
• $product_id – the product ID
• $quantity – the value of the quantity field

In this function, we simply get the value of the cfwc-title-field, which we added to the cart form in the previous step. If it’s empty, we display a message to the user and set the $passed parameter to false. Because this is a filter, we need to return a value.

How to add a message if the product fails validation

The function uses wc_add_notice to add a message to the WooCommerce notice. This function accepts two arguments:

• Message – the text to display
• Status – can be ‘error’, ‘success’, or ‘notice’. Most  themes that support WooCommerce would style these notices differently

Adding custom values to the cart

Assuming the product successfully validates, it’ll get added to the WooCommerce cart object. We can add our own metadata to this object so that we can use it later in the process, e.g. on the cart and checkout pages and for orders and emails.

This function hooks to woocommerce_add_cart_item_data, which filters the data passed to the cart object when a product is added to the cart. So here we check that the cfwc-title-field has a value then add that to $cart_item_data.

Bonus: If you want to update your product price programmatically, use our guide here: How to update product price programmatically on WooCommerce.

Displaying custom fields in the cart and checkout

Let’s look at how to display the custom field value in the cart and the checkout. We can use the same filter for both pages, so we only need to write one function:

The function checks each item in the cart for our title_field parameter. If it’s set, then it adds the title field to the product name as displayed in the cart.

Note that the woocommerce_cart_item_name filter works on the cart and checkout forms.

Displaying custom field values in the WooCommerce order and email confirmations

Having ensured that our custom field is visible to the user in the cart and checkout forms, we now need to pass its value to the order when the user checks out.

We can do this very easily using the woocommerce_checkout_create_order_line_item action. Like the filter for the product name in the cart, we just check the cart item for the title_field parameter. If it’s present, we add its value as meta data to the $item object.

This will ensure that our custom field value is displayed on the order confirmation field that the user sees once they have checked out, the order in the backend, and on the confirmation email to the admin and to the customer.

The code for the complete plugin can be found on GitHub.

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. 

WooCommerce custom checkout fields

What if you want your custom fields to appear on the checkout page?

The standard checkout fields built-in WooCommerce by default work great. These include check fields for the name, phone number, email address, billing address and shipping address, and payment information. 

Displaying custom fields on the checkout page in WooCommerce can help you deliver a better user experience. It’s also a great way to gather information from the customer before they checkout. 

Let’s go over a few examples of custom checkout fields for WooCommerce:

• Delivery date field: You can add a delivery date field to the checkout page to let customers select a delivery date. For instance, florists and bakeries can let customers choose when they’d like to have the goods delivered.
• Email newsletter opt-in: When the customer is done with their order and is ready to leave your site, you can offer an email newsletter opt-in using a custom field. This is great for deal sites and stores that offer services such as photography.
• Delivery days (subscription products): You can also let customers choose when they want to have the product delivered over multiple days. For instance, you can let customers select from either 3 delivery days a week or 5 delivery days for meal subscription boxes or vegetable subscription boxes.

Adding checkout fields programmatically

It’s also possible to add checkout fields to your WooCommerce store programmatically. All you need to do is add a little code to your WooCommerce store. It’s a great option for developers as it offers tons of flexibility and customizability.

For more information, you can take a look at this guide on WooCommerce Checkout Fields.

Adding WooCommerce checkout fields using a plugin

People who aren’t familiar with coding can add checkout fields to their WooCommerce store using a plugin. This is a good option for all types of users as there is no need to code to add custom checkout fields.

Here are some of the plugins we recommend for adding checkout fields to your WooCommerce site: 

• Checkout Field Editor: The Checkout Field Editor lets you optimize the checkout process on your WooCommerce site and helps take your WooCommerce store to the next level. You can add, remove, or modify custom fields based on your requirements.

• Checkout Field Editor (Checkout Manager) for WooCommerce: The Checkout Field Editor for WooCommerce plugin is an all-in-one solution for creating, managing, and customizing checkout fields on your WooCommerce store.

Further reading

Here are a couple of other articles you might find useful:

• WooCommerce extra product options – this guide details how you can easily create personalized products through custom fields and options.
• If you want to know even more about adding custom cart item data in WooCommerce, including details on the woocommerce_add_cart_item_data and woocommerce_add_to_cart_validation filters, check out our guide to adding custom cart item data in WooCommerce which explains how to add custom text fields using a plugin and how to add and validate cart item data using code.

Final thoughts

Hopefully, you’ve been able to follow through step by step how to create, add and save custom field data in WooCommerce. Don’t forget to check out the WooCommerce Product Add Ons Ultimate plugin for extensive extra functionality.