WooCommerce Custom Fields: How to Create & Display
This is the complete guide on how to create WooCommerce custom fields and show extra product data on your website.
WooCommerce comes with lots of ways to store product data. There are all the standard product fields such as the name, price, categories, tags, and dimensions. There’s also the option to create product attributes. But what if you want to store extra product fields? Well, that’s where WooCommerce custom fields come in.
By adding custom fields to a WooCommerce product, you can add extra data and show it on your website. A lot of people do this programmatically, but this is a guide for non-developers. I’ll show you how to add custom fields to WooCommerce products – and show them in the front end of your website – without writing a single line of code. You’ll learn how to show extra product fields anywhere you like, including on the single product page, shop and category pages.
After creating our product custom fields, we’ll display them in the front end using the WooCommerce Product Table plugin. This simple but effective plugin lets you display custom fields created by any plugin in a table view. You can either list multiple products and their custom fields, list products with a specific custom field value only, or add a table of custom fields to the single product page.
First, I’ll share a real-life case study about a company which uses WooCommerce custom fields to provide extra information about their products. Afterwards, I’ll provide full instructions on how to create your own Woo custom fields and display them on your product listings.
Case study – How Wavelength Electronics use custom fields in their WooCommerce store
Wavelength Electronics sell technical products in the electronics industry. As with most technical products, customers need to check a lot of information before making their purchase. With all the extra product data to display, Wavelength Electronics used our WooCommerce Product Table to create WooCommerce custom fields to help their clients quickly find what they’re looking for.
The product table now displays a datasheet column with a PDF icon for each item, so customers can open up the datasheet straight from the product table. There’s also a column with ticks so show which models include a temperature controller.
Read on to find out how to add your own WooCommerce custom fields to your WooCommerce website.
In this article…
- How to create WooCommerce custom fields
- How to display WooCommerce custom fields on any page
- Show custom fields in the WooCommerce shop or product category pages
- How to add custom fields to WooCommerce product page
See WooCommerce custom fields in action on our custom fields demo page.
WooCommerce custom fields or taxonomies?
I’ll start by explaining the difference between 2 type of WooCommerce product extra fields: custom fields and taxonomies. Understanding this will help you decide which one to use.
What are WooCommerce custom fields?
Custom fields add extra fields to the Add/Edit Product screen in WooCommerce. They’re ideal for storing standalone data about products. Here are some examples of when you should use WooCommerce custom fields:
- To store a unique product barcode, inventory or reference number.
- For adding extra ways for people to interact with your products. This might be by adding extra buttons (e.g. ‘Enquire about this product), icons or social sharing links.
- To display multimedia content about the product, such as embedded video or audio tracks.
- For adding shortcodes provided by other plugins, such as a WooCommerce Add to Quote or Wishlist plugins.
- To store additional notes about the prices or alternate price options. For example, if you’re using a bulk discount WooCommerce plugin and want to list the quantity-based discounts, then you can add this information to a custom field.
The idea of a custom field is that it stores unique information. Since the data stored in the field is unique, you can display it in the WooCommerce front end – e.g. on the product detail page, shop or category pages. However, you wouldn’t expect to use this data to group or filter products. If you want to filter by that type of data, then you need a custom taxonomy instead.
You can create WooCommerce custom fields using any custom fields plugin. Once you’ve created the custom fields, it’s easy to show them on your website using the WooCommerce Product Table plugin. Keep reading for full step-by-step instructions on how to do all this. First, I’ll quickly tell you about WooCommerce custom taxonomies so that you can be sure you’re choosing the most appropriate field type for your data.
What are custom taxonomies in WooCommerce?
Like WooCommerce custom fields, taxonomies are a way to store and show extra product data. However, the difference is that they are designed to store re-usable information which can be used to group and filter products. For example, you can create a dedicated archive page listing all products that share a specific custom taxonomy term. You can also use taxonomies to filter products using the WooCommerce Product Table plugin.
Custom taxonomies are very similar to WooCommerce product categories. In fact, WooCommerce categories are actually set up as a taxonomy under the hood. When you create a custom taxonomy in WooCommerce, it adds tick boxes to the right hand side of the Add/Edit Product screen – just like categories.
Here are some examples of when you might use WooCommerce custom taxonomies:
- A WooCommerce bookstore needs to store extra product data such as year of publication, author, and publisher. Since more than one book has the same year, author or publisher, customers need to be able to sort and filter by this data. You can do this using WooCommerce custom taxonomies.
- If your products relate to a specific geographical area, then you can use custom taxonomies to group products by area. For example, you could create a custom taxonomy called ‘Area’ and add a separate taxonomy term for each state or county. Customers can then filter by area, or view lists of products from a specific area only.
- A WooCommerce clothes store can use custom taxonomies to store extra data such as brand name. Customers can then search and filter to find products with their favourite brands, as this field isn’t built into WooCommerce as standard.
In summary, use custom fields for unique one-off data, and taxonomies if you want to use the data for filtering or other types of grouping.
Read our tutorial about how to create WooCommerce custom taxonomies.
How to create WooCommerce custom fields in the back end
Ok, now you know when to use custom fields. Next, I’ll show you how to create extra WooCommerce product fields. It’s surprisingly easy!
First, here’s a video tutorial about how to create and display WooCommerce custom fields and taxonomies. Below, you’ll find full written instructions.
Which WooCommerce custom field plugin?
First, you’ll need a custom fields plugin. There are plenty of good free plugins for creating custom fields in WooCommerce, including Advanced Custom Fields and Toolset Types. You can also use a dedicated WooCommerce custom fields plugin if you prefer.
I’m going to use Advanced Custom Fields in this tutorial, as it’s the most popular. The instructions are the same for most custom field plugins. If the custom fields don’t show up on your site when you follow the later sections of this tutorial, make sure the plugin isn’t adding extra characters to the start of the custom field name. (You might need to contact their plugin support to ask about this) For example, Toolset Types automatically adds adds wpcf- to the start of the custom field name, so you need to know this.
How to create WooCommerce custom fields with the Advanced Custom Fields plugin
- Log into WordPress and find Plugins > Add New. Search for ‘Advanced Custom Fields’, then install and activate this free plugin.
- Click ‘Custom Fields’ on the left hand side of the WordPress dashboard.
- Click the ‘Add New’ link by the ‘Field Group’ at the top of the page.
- Next, you’ll see the ‘Add New Field Group’ page:
- First, add a name for the group of custom fields you’re creating. (No one else will see this.)
- Location – Choose Show this field group if Post Type is equal to Product. This tells Advanced Custom Fields to show the custom field on the Add/Edit WooCommerce product screen.
- Press the blue ‘Add Field’ button. Now it’s time to create the individual custom fields where you’ll store the extra product data.
- Add a Label for the custom field. This is how the custom field will be labelled on the Add/Edit Product screen.
- Choose a Name for the custom field (this should be 1 word in lowercase).You’ll need this to display the WooCommerce custom field on the front end of your website, later.
- Choose a Field Type from the available types of custom field.
- Complete any extra fields for the custom field such as adding a default value. Finally, click the blue ‘Publish’ button.
That’s how to create WooCommerce fields. The next step is to add data to the custom field for some or all of your products. To do this, go to the ‘Edit’ page for each product and you’ll see the extra WooCommerce custom field(s) lower down the page. They’ll be shown somewhere below the Product Data section. Enter values into the custom fields and save the product.
How to show WooCommerce custom fields on any page
So far, you’ve learned how to store WooCommerce product extra fields in the back end of your WordPress website. That’s fine if you’re just storing extra notes for internal purposes. But what if you want to show WooCommerce custom fields on the front end of your website? We’ll get to this now!
The easiest way to show your extra product data is to list products in a table on a normal WordPress page. Our WooCommerce table plugin can include as many columns of information about each product as you like. The great thing is that you can include WooCommerce custom fields in the table. This is more flexible than the default store layout, which just lists basic information such as the product name and price. It’s a really easy way to display the extra product data.
How to do it
- Get WooCommerce Product Table and install and activate the plugin.
- Add your license key on the plugin settings page: WooCommerce > Settings > Products > Product Table. You’ll also see various options for your product tables. Go through them and choose whichever options you like. You can set your columns here including the WooCommerce custom field columns. However, I’ll show you how to do it directly for each table in Step 4 as it’s more flexible.
- Now, go to Edit any page on your WordPress site. Use the
[product_table]shortcode to list all your products, either with the default columns or the columns you set on the settings page. Feel free to view the page and see what it looks like!
- Next, go back to the product table shortcode. It’s time to choose your columns and show the WooCommerce custom fields in the table. To do this, you need to add
columns=""to the shortcode (or you can choose columns globally on the plugin settings page). Between the quotation marks, you need to list the columns to include in the table. The knowledge base contains the full list of available columns. To add a custom field column, you need to add
cf:followed by the custom field name that you created earlier.
For example, the following shortcode will list all your products with columns for name, description, a custom field called ‘custom-field’, plus price and add to cart:
[product_table columns="image,name,cf:custom-field,reviews,price,add-to-cart" shortcodes="true"]
This is what is looks like in the back end:
And the front end:
Tip: You only need to add
shortcodes="true" to the above shortcodes if you have added HTML content or other shortcodes to your custom field. I did this because I had added a button and embedded audio player to my WooCommerce custom fields.
Make changes to how your custom fields are displayed
So far, I’ve shared a simple method to show WooCommerce custom fields in the front end of your website. Now, let’s get more advanced and configure how our custom fields are displayed.
WooCommerce Product Table is a very flexible plugin. Choosing your columns is just one of over 50 options! Look at them all and configure your table to show whatever product data you need.
For example, you can:
- Create product tables listing products from a specific category, tag or custom field only. (More on this below.)
- Add filter dropdown lists above the table, or filter widgets in the sidebar. (But remember, you can’t filter by custom field because custom fields aren’t designed for grouping products. You need to use categories, attributes, tags or custom taxonomies to store filterable data.)
- Use the lazy load option to speed up the table if you have too many products to load all at once.
- And much more…
Have a play, and get your product tables and WooCommerce custom fields showing exactly as you need them.
Show custom fields on the WooCommerce shop or product category pages
As you saw earlier, the easiest way to display WooCommerce custom fields is to add a product table to a standard WordPress page (or multiple pages). You can include these pages in your navigation menu, instead of using the built-in WooCommerce shop or category pages.
If you prefer, you can add product tables directly to the main WooCommerce shop page or category archives. This is a bit trickier, as you need to add the product table shortcode to the template file in your theme. The plugin knowledge base provides instructions on how to do this. Include custom field columns in your product tables, and these will appear in the product tables on the shop and category pages.
Display custom fields in a product quick view lightbox
Maybe you’d rather list products in the usual way, and show extra custom fields in a quick view lightbox window.
You can do this by installing the WooCommerce Quick View Pro plugin, which will add quick view buttons or links to your store. Use it with WooCommerce Product Table to add product tables with custom field columns to the product short description. The short description will appear in the quick view lightbox for each product, complete with your WooCommerce custom fields.
How to add custom fields to WooCommerce product page
So far, I’ve shown you several ways of displaying custom fields on WordPress pages, the shop or product category pages. It’s also possible to show WooCommerce custom fields on the single product page (also known as the product detail page).
Please see our separate tutorial about How to Display Custom Fields on the WooCommerce Product Page.
How to list WooCommerce products with a specific custom field value
Finally, I’ll show you one more option for showing WooCommerce custom fields in the Product Table plugin.
As well as displaying custom fields in the table layout, you can create tables containing products with a specific custom field value. For example, if you wanted to display products with a custom field value of ‘2018’ (saved in a custom field called ‘Year’) then you could do it with his shortcode:
For example, perhaps you have have a custom field called ‘condition’ and want to display products with a custom field value of ‘new’. You can do this using the following shortcode:
[product_table columns="name,cf:condition,price,add-to-cart" cf="condition:new"]
The easy way to show WooCommerce fields on your website
And that’s it! I’ve shown you how to add custom fields to WooCommerce products and store them in the WordPress back end. You’ve also learned how to show the WooCommerce custom fields in various locations on the the front end of your website – all using our bestselling WooCommerce Product Table plugin.
Follow the steps in this tutorial and put it into practice on your own website. It’s a fantastic non-technical way to store and display extra product data in WooCommerce.