How to display custom fields on the WooCommerce product page

Discover the easy way to add custom fields to the WooCommerce product page. This is the ultimate tutorial on how to display extra product data, and also how to collect extra information from customers.

The WooCommerce product page is great, as it displays lots of product data such as product title, image gallery, short and long description, product category, product price, attributes and variations. However, there's no built-in way to add custom fields to custom product pages.

Today, I'll show you several ways to add custom field values on the single product page using the WooCommerce plugin. We'll look at two types of custom field that you might want to add to product pages. These are:

• Method 1 - Extra fields that the customer fills in such as text fields, checkboxes, and so on:
  
  
• Method 2 - Custom fields which are used to display static data on the product page, in addition to the default product fields:
  
  

Method 1: Add extra product fields for the customer to select and fill in

First, I'm going to show you how to add custom option fields to the product page. These can be displayed in various ways, such as text or paragraph input fields, checkboxes, radio buttons, and so on. Shoppers use the custom fields to select options and provide information which is sent to you when they place their order.

In the wrong place? If you just want to display custom field data on product pages - without any options for the customer to interact with - then skip to part 2 of this tutorial.

You can add any type of custom field you like - it's super-versatile. Here's one example of what a product with this sort of extra fields might look like:

As you can see, this product has a range of extra custom fields which appear on the product page, above the add to cart button.

Here's another example:

You can add all of these fields to product pages with the WooCommerce Product Options plugin.

Next, I'll show you how to set up the plugin to add custom fields to collect extra information and choices from customers.

How to add extra custom field options to WooCommerce products

For full setup instructions, watch this video or read the written tutorial below.

1. First, install the Product Options custom field plugin on your WooCommerce store.
2. Activate the plugin, and the setup wizard will open.
3. Once you finish the setup wizard, click on the link to 'Manage Product Options'. If you miss this then you can find the page you need at Products → Options in the WordPress admin.
4. Product custom fields are structured into groups so that you can show different fields on different product pages, categories, etc. Edit the default options group or create a new one, and start adding options (i.e. custom fields) to it. 
   
5. Scroll down to see the additional options for each custom field. For example, you can:
   • Use the price options to increase or decrease the product page based on the custom fields selected.
   • Make custom fields required, or set minimum or maximum quantities.
   • Enable conditional logic to make the custom fields dependent on one another, showing and hiding them depending on the customer's selections.

Once you've finished, view one of your product pages where you have enabled the custom field group. You'll see the custom fields displayed above the add to cart button.

Method 2: Add read-only custom fields to display extra static data on product pages

So far, we've learned how to add custom fields to the WooCommerce product page which the customer interacts with. This involves things like adding some text, selecting options, and so on.

But that's not really the technical meaning of the term 'custom field' in WordPress! A WooCommerce custom field actually refers to something different: a custom meta field which is attached to the 'products' post type.

In part 2 of this tutorial, we're going to focus on custom fields in the technical sense of the word. This is all about displaying extra data on your WooCommerce products, rather than providing editable fields for customers to interact with.

What are custom fields in WordPress and WooCommerce?

Custom fields are a fantastic way to store extra data about any type of post in WordPress. You can use them for normal blog posts, custom posts such as portfolios, events, or - you guessed it! - WooCommerce products.

See custom fields on our demo product detail page.

Choosing a WooCommerce products custom field plugin

There's a good choice of WordPress plugins to add custom fields to WooCommerce products. You can use any custom field plugin - it doesn't have to be specific to WooCommerce. When you create the custom field, you just need to tick the option to attach it to the 'Products' post type. This will add the custom field to the WooCommerce product pages in the back end of your WordPress site. That's all you need to add custom field values to products.

There are several high quality free plugins for creating WooCommerce custom fields. We recommend Easy Post Types and Fields because it's the easiest to use. It also works perfectly with the plugin for displaying custom fields on the product page which I'll tell you about in a minute.

If you prefer, then you can also use Advanced Custom Fields and Toolset. There's no need to use a purpose-built WooCommerce custom fields plugin - they tend to cost money and there's no real benefit.

How to display custom field data on WooCommerce product page

Custom field plugins don't come with a way to show custom field values on the front end of your website, such as the WooCommerce product page. If you're technically minded, then you can show WooCommerce custom fields by modifying the single product page template in your child theme - yourtheme/woocommerce/single-product.php. However, the easiest option is to use our Product Table plugin to display custom fields on the WooCommerce product page.

WooCommerce Product Table creates instant tables of data about your products. It fully supports custom fields, and can show custom field values anywhere on your site - including the WooCommerce single product detail page. The easiest option is to add it directly to each of the products for which you want to display custom fields. This means that you can add product tables with custom fields for some products and not others, so it's really flexible.

Setup tutorial

1. First, use a custom field plugin to add custom field to the 'Products' post type in WordPress.
2. Edit each product and add data to the custom fields as required.
3. Next, install the WooCommerce Product Table plugin. When you activate it, a setup wizard will open guiding you through the main settings for your custom tables. These will be used in all your WooCommerce tables, but you can override them for each table as required. (For example, when you choose your table columns then these will apply to all your tables. Don't worry if you want to show different custom fields on different products, as I'll show you how to do this in a minute.)
4. In the setup wizard, I recommend disabling elements such as the search box, product totals and reset button. That's because these are designed for listing large numbers of products in a table, and they're not relevant to displaying custom fields on the WooCommerce product page.
5. Open the 'Edit Product' screen for the product where you want to add a table of custom fields.
6. Add a product table shortcode to the Short Description field.

Here's an example product table shortcode to get you started. It will display a table containing 3 custom fields for a coffee product with ID 54121. The table has 3 columns - one for each custom field:

[product_table include="12345" columns="cf:strength,cf:region,cf:type"]

This is how it looks on the front end WooCommerce product page:

Customizing the shortcode

To create your own product table of WooCommerce custom fields, change the following sections of the shortcode:

• Replace '12345' with the ID of the product that you're displaying custom fields for. You can easily find this by looking at the URL of the 'Edit Product' page where you're adding the product table shortcode. For example, if your product has the URL [yoursite.com]/wp-admin/post.php?post=19&action=edit, then the ID is 19.
• 'Replace 'strength', 'region' and 'type' with the WooCommerce custom field names you created in the previous section. You can also add or remove custom fields as needed. Just make sure that they're comma separated without spaces, and you add cf: before each custom field name.
• You can also make any other changes to the product table, for example by adding or removing columns. See the full list of options in the knowledge base.

Now click 'Update' and view the WooCommerce product page for that product. You'll see a table containing the custom field values in the short description field. Perfect!

What if I don't want to show the custom fields for each product manually?

The instructions above tell you how to manually add a product table with custom fields for specific products. You can do this for as many products as you want to display custom fields.

If you want to show custom fields on all your WooCommerce product pages then you will need to do this globally by adding product tables to the single-product.php template. This is a bit technical and you can ask your developer to do this for you. If you don't have one then I recommend that you post a job on Codeable where one of their WordPress experts will send you a quote.

To get you started, we've provided an article with code snippets on how to automatically add product tables after the short description field on the single product page. The code snippet adds a table of the current product's variations, and you can change the [product_table] shortcode to add custom field columns, disable the variations option, and make any other changes you require.

Can I add custom fields to other sections of the WooCommerce product page?

In the previous section, I showed you how to add custom fields to a table in the short description on the WooCommerce product page. This is a good option because most themes show the short description near the top of the page, under the product name and price.

If you'd rather show custom fields elsewhere on the single product page, that's absolutely fine. Simply add the product table shortcode to wherever you'd like to display the custom field values. For example, you could add it to the long product description instead.

What other extra data can I show on the WooCommerce product page?

Custom fields and taxonomies are just the tip of the iceberg. You can use WooCommerce Product Tables to show any type of product data in a table. This can include:

• Product image, name, price
• Short or long description
• Categories and tags
• Attributes and variations
• Star rating from reviews
• Embedded audio and video

This is a much more flexible way to show WooCommerce extra product data in the short description field. Customers can see all the relevant data from the neat table layout, instead of having to scroll down to the long description tabs.

There's even a neat option to display each product variation on its own row in the table with its own product image. This lets customers select variations and add to cart directly from the table of WooCommerce variations.

Have a play with showing custom fields and other data on the WooCommerce product page. Think about what will best sell your products and maximize conversions. This is a great way to increase sales and make your e-commerce store an even bigger success.

Alternate method: Show a text custom field above the add to cart column

So far, you've learned how to add a table to the single product page, with each custom fields displayed in a column of the table. If that's not the layout you want, then I have an alternative suggestion for you.

We're going to use a plugin called WooCommerce Lead Time. While the plugin is designed to display waiting times, it works by creating a WooCommerce custom field and showing it on the single product page, immediately above the add to cart button. As a result, you can use it to show any type of text-based information and not just lead times.

To set it up, simply install the plugin and add the information that you want to display to the 'lead time' field. The text you have added to the 'lead time' custom field will appear above the add to cart button, under the short description.

The other benefit of using WooCommerce Lead Time for your custom field is that you can choose whether to add the information individually for specific products only; or globally so that it appears on all product pages.

What sort of custom field are you adding to the product page?

In this tutorial, we've covered two completely different methods for adding custom fields to the WooCommerce product page:

• Editable fields which the customer fills in before adding a products to the cart. Use the WooCommerce Product Options plugin for this.
• Static data custom fields which display extra information on the product page. Use the WooCommerce Product Table plugin to display this.

Both plugins are quick and easy to set up, as we saw in the instructions above. They each come with a full 30-day guarantee, so you can try them risk-free. That gives you the perfect opportunity to try them out and see how easy it is to display extra custom fields on the WooCommerce product page.