How to show custom fields on WooCommerce product pages (2023)

Want to make your WooCommerce product pages stand out and give your customers all the information they need to make an informed purchase? One effective way to do that is by adding custom fields.

WooCommerce custom fields are a powerful tool you can use to add extra information about your products, but also to allow customers to personalize their product before purchase. With custom fields, you can showcase the unique aspects of your products that set them apart from competitors. For example, if you sell clothing, you could use custom fields to display size charts, washing instructions, or material composition.

Similarly, you can use custom fields to ask information from customers who want to personalize their product. For example, if you sell handmade products, you could use custom fields to ask customers for the text they want to see engraved on their product. Customers cannot add the product to their cart until they enter the information.

WooCommerce provides the ability to add product attributes and product variations by default. Unfortunately, the level of customization and interaction is limited. Essentially, you can only add dropdown lists or short pieces of information. Furthermore, the available options are quite restricted. 

This means that if you want to offer a more comprehensive range of options to your customers, you will need to look at other solutions, such as using a plugin or custom coding.

In this post, we’ll explore how you can add extra custom fields to WooCommerce product pages using a plugin like Advanced Product Fields for WooCommerce, in order to provide a best-in-class user experience and showcase your products!

What Are Custom Fields in WooCommerce?

Custom fields are unique pieces of information that you can add to a product. They are called “custom” because they are not included in the default WooCommerce offering. There are two different types of custom fields that you can use in WooCommerce: additional product information fields and extra input fields for customers:

1. Additional product fields (informational fields): These fields display additional pieces of information on your product page to better help your user understand it. Here are some examples of additional product information: size, color, product warranty instructions, or care instructions.
2. Extra input fields: In these form fields, customers can submit free text or select other options. Customers can customize their product, providing additional information such as an email address, or selecting additional products to add to their order. These fields are also often known as product add-ons, “product fields”, or form input fields. They are essential if you want to give your customers a more personalized experience when shopping on your site.

To illustrate both custom field types, take a look at the example below. It contains both custom field types: 2 input fields (width and height) and 1 informational field (the total square feet):

Terminology and use cases

If you’ve been Googling this topic for a while, you’ll notice the internet uses a few terms to describe the same thing. Custom fields are also often named:

• Extra product options
• Product add-ons
• Additional (product) fields
• Informational fields

It can be a bit confusing, but they all refer to the same 2 definitions as we described above.

Custom fields are flexible and can be used for a variety of purposes, such as:

• Adding product dimensions or weights.
• Displaying a product’s SKU number.
• Allowing customers to personalize products.
• Asking your customer for information required to manufacture the product.
• Providing additional details about product features. Essentially, you can give a potential customer all the information they need to purchase a product in a nice layout. 

Why Add Custom Fields to Your WooCommerce Products?

Adding custom fields to your WooCommerce products can provide a number of benefits to your online store. Not only can they create a better shopping experience for customers, but they can also help improve SEO and make product management easier. In the next section, we list some of the benefits of adding custom fields to your WooCommerce products.

The benefits

1. With custom fields you can provide more detailed product information that may not be included in the default product settings. By adding custom fields, you can provide customers with more detailed information about your products, such as additional instructions or technical specifications. This can help customers make more informed purchasing decisions, which can lead to increased sales and customer satisfaction.
2. By adding custom input fields, you can create a better shopping experience for customers. Customizable products can help them feel more connected to your brand and products.
3. By presenting customers with a range of options (input fields) that can be combined in different ways, you encourage them to spend more as each option can increase the final product price.
4. Custom fields help you display unique product features. They stand out more than a long description. For example, you can add custom fields to display product certifications or unique product features that can make your products more appealing to customers.
5. Custom fields can also help you save time and effort because you can manage information in a more organized way. You can add all the relevant product information to a custom field, which makes it easier to manage and update the information as needed. This can help reduce the time it takes to manage your products and keep information up to date.
6. Custom fields can improve your store’s SEO. By providing more (and specific) information, you can make your product rank higher in search results.
7. It’s worth mentioning that custom fields are not only useful for a good user experience on the product frontend but can also be very helpful to use in the backend to keep product variations organized so that you can update and manage your products when needed.

Adding Custom Fields to WooCommerce Products

Now that we understand the importance of custom fields in WooCommerce, let’s take a look at how to add them to your products.

By default, WooCommerce lets you display extra options as product variation options in a drop-down menu on a single product page. That’s quite limiting! If you need further customization, you’ll need to use code or a plugin.

By using custom code

If you have a developer or are tech savvy, you can use code to add custom fields to your WooCommerce products. However, we do not recommend doing this unless you are already familiar with coding in WordPress. This method is quite complex and time-consuming each time you want to add a new field.

If you want to go this route, you will need to add custom PHP code to your active theme’s functions.php file to hook into the different parts of WordPress and WooCommerce. We recommend reading this in-depth tutorial on how to add custom fields in WooCommerce. 

The tutorial explains the process step by step, but be prepared to spend at least 1-2 hours to understand all the different parts that go into it.

By using a plugin

Whenever possible, we advise custom code over a plugin because it is usually a more lightweight solution (no extra bells and whistles that some plugins bring to the table). But one drawback of using code is that you also need to maintain that code. If WooCommerce or WordPress makes breaking changes, your custom code may also require updates to remain compatible.

That’s why we recommend using a plugin to add custom fields to your WooCommerce products. The task is simply too complex to do with code alone.

The easiest way to leverage the benefits of custom fields in WooCommerce is by using a plugin like Advanced Product Fields (APF). It can handle both field types: informational fields and input fields.

Introducing Advanced Product Fields

The most straightforward and effective way to create custom fields is using a plugin like Advanced Product Fields (APF). 

APF allows store owners to fully customize their product fields with 16 different field types to choose from, including text fields, textarea, number fields, dropdown lists, checkboxes, radio buttons, image swatches, color swatches, date fields, and file uploads.

You can also display static information by adding content fields such as text, images, or real-time calculations.

Benefits of Advanced Product Fields

Below are some of the benefits of using APF to create custom fields. We are deliberately keeping it short, but there are plenty more advantages.

• You can add custom fields to one product, a set group of products (for example, all products of category X), or all products. This allows you to create a “template” and assign that to multiple products in one go to speed up your work.
• You can add unlimited different custom fields to each product.
• Custom fields like checkboxes allow users to select multiple options. You can also set minimum and maximum allowed selections. For example, if you run a pizza restaurant, you can limit the number of toppings a customer can choose.
• The data your customer selected is carried over to the cart and the checkout page. Store administrators can see these extra fields in the order admin screen.
• Color, text, and image swatches allow the user to preview and select from a variety of custom options. Even image zooming is supported, so you can really showcase the detail of your products!
• You can show or hide fields based on values from other fields. This is known as conditional logic.
• The calculation field (available with the extended license) allows you to display informal calculations (like square meters) and make adjustments to the price based on a calculation. For example, if you sell wallpaper charged by the square meter, you could allow the customer to input the size of the wall they want to decorate and estimate the cost of the amount of wallpaper they will need.
• APF comes with a variety of powerful add-ons, such as the ability to pre-fill fields through URL parameters, which is useful to speed up the customer journey and/or to prompt the shopper to purchase a recommended quantity of products.

Getting Started with Advanced Product Fields

In this tutorial, we’ll show you how you can add custom fields to your WooCommerce products using the Advanced Product Fields plugin. We will focus on form input fields. Users will be able to enter data, make selections, and personalize their product before adding it to cart.

Installing the plugin

Before you can get started, you need to download and install Advanced Product Fields for WooCommerce. Follow these easy steps:

1. Get the APF plugin from the Wombat Plugins store. You can choose between the Pro, Extended, or Bundle license to suit your needs.
2. After purchase, you’ll see your Wombat Plugins account where you can download the plugin. Head over to the Plugin Downloads section and click the download button on the right. This will automatically download the latest version.
   
3. To install the plugin, go to your WordPress admin dashboard → Plugins → Add new → Upload Plugin and select the plugin you just downloaded.
4. Navigate to WooCommerce → Settings → Product Fields, then input the license key that came with your purchase and activate the plugin.

Adding your first custom field to your WooCommerce product

From your WordPress dashboard, navigate to WooCommerce → Product Fields and click Add New.

On the next screen, choose a Title for the group of fields you’d like to make. This is for your reference only and is not customer-facing.

Once you’ve added a title, click the Add Your First Field button to create your first custom field:

You will see that a new field shows up that you can change to fit your needs. You have lots of options to customize it the way you want. Let’s go over a few essential settings to get you started!

• Type: The field type defines what type of input you want to include on your WooCommerce product page. You can choose from text boxes, select list, checkboxes, image swatches, file uploads, and more.
• Label: This is the customer-facing title (or field name), which will appear close to the field. It is the label that will also be used in the cart, checkout, and order pages, so make sure it is filled out and describes your field well. Here is an example of how the labels look on your WooCommerce product page:
  
• Instructions: Additional text that will appear below the field to give your users additional instructions if needed. In the example image above, the instructions would appear underneath the select list.
• Required: Is this field required? If it is, the customer must enter data/select an option before they can add the product to their cart. They will see a validation error if the option is required but not selected. The customer can not continue until they select an option or enter the required data.

Assign custom fields to specific products

In most cases, you want to show the custom input fields on specific products only, rather than all of the products in your store. To do this, you can set up conditional rules to display the fields only on one or more products.

If you want to implement this, find the Conditions section of your field group and click Add Your First Rule. If you don’t add rules, the fields will be shown on all products.

There are many options you can choose from to show the field groups only when specific conditions are met. Here is a list of options:

• Authentication: You can choose to show fields only to logged in users, to logged out users, or to both (everyone).
• User role: Display custom fields only to one or more WordPress user roles. This is very powerful if you are running a B2B store or a wholesale store.
• Products: You can choose to display custom fields only on certain products. You can select entire product categories, types, or tags. You can also select single variations, attributes, or products by name.

These rules can be a powerful way to conditionally show custom fields on different products.

Change custom fields display and layout settings

In the Layout section of your field group, you’ll find all settings related to how your custom fields are displayed on your WooCommerce product page:

• Label position: Choose where to display the label. By default, it displays above the input field, but it can also be displayed underneath the field.
• Instruction position: Decide where to display the extra instructions (if any) in relation to the custom input field.
• Mark required: You can choose to display a *-symbol next to the field label.
• Change product image: Turn this setting on if you want to change the main product image depending on selections made by your customer. For example, if you sell clothes and your customer selects a red shirt, you may want to display an image of a red shirt.

Changing the final product price

Advanced Product Fields is capable of increasing or decreasing the final product price. This allows you to create upsells, paid add-ons, or even discounts. Here are a few examples of what you can do:

• Add a checkbox for gift wrapping. When the customer chooses to have their product gift wrapped, you can charge an extra $2.
• If you are selling digital products, you can add a surcharge for support.
• Phone accessories: When customers purchase a new phone, you can offer them a case, screen protector, or other add-ons to protect their phone.
• If you are selling flowers, you can ask your customer to select a delivery date. Optionally, you can charge more for a rush delivery.
• There are lots of other possibilities too, such as asking for donations through your WooCommerce store.

To adjust the final product price, look for the Adjust Pricing setting in the field settings:

APF comes with plenty of options to change the final product price. You can even create complex calculators if you want to.

Wrapping up the tutorial

In this complete guide, we walked you through the process of adding your first WooCommerce custom field using APF. But if you want to gain a deeper understanding of how the plugin works and the important concepts that underpin it, we recommend that you take a closer look at the Getting Started tutorial.

Start unlocking the power of custom fields for your WooCommerce product pages today

In this article, we’ve explored the benefits of using custom fields to enhance the user experience on your WooCommerce product pages. We discussed how WooCommerce custom fields can help you to display additional product information and offer more selectable options to your customers.

Adding custom fields to WooCommerce has many advantages, such as improved on-page SEO, a better shopping experience, and more brand awareness, which all leads to an increased average order value.

We recommend using the Advanced Product Fields for WooCommerce plugin to add custom fields to your product pages. It offers 16 different field types, including text boxes, number fields, dropdown lists, checkboxes, various swatches, date fields, and file uploads.

We highly recommend downloading the Advanced Product Fields plugin, particularly the Extended version, which includes “image swatches with quantities” and the recently released “calculation” fields to power up your ecommerce store!

Get started with Advanced Product Fields for WooCommerce from just $59!