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 display custom fields on custom product pages.
Today, I'll show you several ways to add custom field values on the single product page using the WooCommerce plugin.
What are custom fields in WordPress and WooCommerce?
WooCommerce product page displaying 3 custom fields to show prices at 3 different shops
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.
I recently wrote about how to create WooCommerce custom fields and display them on any shop page on your website. Today's tutorial is specifically about how to add custom fields and display them on the WooCommerce single product page.
Choosing a WooCommerce products custom field plugin
There's a good choice of WordPress plugins to create custom fields for 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. I recommend Advanced Custom Fields and Toolset. There are also dedicated WooCommerce custom fields plugins, but they tend to cost money and there's no real benefit.
I’ll use the Advanced Custom Fields plugin for Method 1 of this tutorial, so you'll find it easiest to follow my instructions with this plugin. However, it really doesn't matter. The only potential pitfall from other plugins is that if your custom fields don’t show up on the WooCommerce custom product page, you may need to add some extra syntax to show the custom field. I can tell you that Advanced Custom Fields doesn't add any extra syntax and Toolset Types prefixes wpcf- to the custom field name. If you're using a different plugin, you might need to ask their plugin support about this. In addition to this, you won't have to mess around with HTML or CSS.
Method 1: How to create WooCommerce custom fields for the WooCommerce product page
Once you've installed your chosen custom fields plugin, it's easy to add the custom fields that you'll be showing on the WooCommerce product page. These instructions are for the Advanced Custom Fields plugin. If you're using a different one, just use their documentation. Then, you can skip to the section of this tutorial about showing custom fields in the front end.
- Click the ‘Custom Fields’ link on the left of the WordPress admin.
- Click the option to add a new Field Group. A Field Group is a collection of custom fields and helps to keep them organized in the back end. You need to create a Field Group even if you only need to add 1 custom field.
- This will take you to a screen called ‘Add New Field Group’:
- First, add a name for the Field Group. This is just to help you organize the WooCommerce custom fields.
- Location – Select Show this field group if Post Type is equal to Product. This will show the custom field for WooCommerce products instead of other post types.
- Press the blue ‘Add Field’ button. Next, you need to add the actual custom fields for your products.
- Add a Label for the custom field. This will just appear in the back end of your website.
- Type a lowercase Name for the custom field. You'll use this to show the custom field on WooCommerce product page.
- Choose a Field Type from the list.
- Select any other options and then click Publish.
- Repeat the 'Add Field' process to add any more product custom fields.
That's how to create one or more custom fields to be displayed on the WooCommerce product page. Next, you need to add custom field values to your products. We'll do this next.
Add a custom field value for each product
- Click the 'Products' link on the left of the WordPress admin.
- Next, click on the product for which you want to add a custom field value.
- Scroll down on the 'Edit Product' screen until you see the custom field.
- Enter a custom field value and Update the product.
- Repeat Steps 1-4 for all the products that need a custom field value.
Tip: You need to do this even if you've added a default value for the WooCommerce product custom field. (This was an option when you created the custom field in the previous section.) The default value is only stored when you save the custom product, so you need to click Update for each product in order for the default custom field value to show.
Ok, so now you know how to create custom fields for WooCommerce products, and how to add custom field values for each product. But all of this is still in the WordPress back end. The next step is to show these custom field values on the WooCommerce product page.
How to display custom field value on WooCommerce product page
Neither WooCommerce nor the custom field plugins come with a way to show custom field values on the front end of your website, or 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 i.e. yourtheme/woocommerce/single-product.php. If you're not a WordPress developer, then you can show custom fields on the WooCommerce product page using our popular Product Table plugin.
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.
How to do it
- Install the WooCommerce Product Table plugin. (There are instructions in the 'Getting Started' email that you receive after purchase.)
- Go to WooCommerce > Settings > Products > Product Tables and choose the settings for your product tables. These will be used in all your WooCommerce tables, but you can override them for each table as required.
- Open the 'Edit Product' screen for the product where you want to add a table of custom fields.
- 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" page_length="false" search_box="false" reset_button="false" totals="false"]
This is how it looks on the front end WooCommerce product page:
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.
Or if you don't want a table layout at all, then check out method 2.
Can I add custom field filters to the WooCommerce single product page?
Custom fields are designed for storing one-off product data, so they're not meant to be filterable. If you want to filter by custom field on the WooCommerce product page, then I recommend using custom taxonomies instead.
You can display taxonomies on the single product detail page in just the same way as I've described for custom fields, above. However, you can also add taxonomy filter dropdowns above the table.
If you want to do this, check out our tutorial on how to create and display WooCommerce custom taxonomies.
Method 2: Show custom fields 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 method 2 is for you.
Method 2 uses 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 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.