When selling products online, it’s important to provide customers with full product details to help them make informed purchase decisions. WooCommerce product specifications are an excellent way to display details in an orderly manner. They give give shoppers all the product insights quickly and with less clutter.
By providing your customers with detailed product information, you increase their likelihood of purchasing. At the same time, customers are less likely to return the product because they know exactly what they're buying.
In this article, we’ll first learn why it's important to display product specification data. Then, I'll describe two easy ways to display product specifications in WooCommerce:
- Method 1 - Add a Specifications tab to the WooCommerce product page:
- 1a - Display the product specifications as normal text or a structured table.
- 1b - Display a table of downloadable product specification documents.
- Method 2 - Create a table listing multiple products with detailed specifications data on each one.
Look at the images and think about which is the best way to add specifications data for the type of products you sell. Whichever method you choose, you'll soon be able to add comprehensive product specifications data to WooCommerce.
But before I show you how to implement each method, let’s first understand the use of product specifications.
What is the purpose of WooCommerce product specifications?
Simply put, product specifications help display detailed and granular information about a product, such as features and characteristics, beyond what is provided in the basic product fields. The specifications are neatly organized on product pages to help customers quickly find the information they are looking for to make an informed product decision.
“What is the difference between product fields and product specifications?” is a common question when it comes to this topic. The simple answer is that there isn’t any fundamental difference between the two. They both help in displaying product information to customers; the difference lies in the level of detail they offer.
You can display broad information about the product, such as the price, category, or colors, using product fields or custom fields. But if you want to display granular information about the product, such as product dimensions, item weight, warranty, or the product manufacturer, using product specifications can be a great alternative. By adding even minor details, you can help your customers make a more informed purchase decision and reduce the likelihood of returns and increase customer satisfaction.
A good structured product specifications table can also help you with the search rankings of your product page by improving SEO and thus giving you a competitive edge over your competitors.
What types of products need detailed specifications?
Before we learn how to add WooCommerce product specifications to your website, let’s check some of the use cases where adding product specifications can be useful to the business.
Sometimes having good product images isn't nearly enough! Providing WooCommerce product specification data is helpful for any product where customers want to know detailed information before deciding whether to buy.
Here are some good use-case examples.
Every electronic product has multiple technical features that customers need to know before they can make a purchase decision. For example, if we consider a TV, it is important for customers to know its various aspects, such as the screen size, connectivity, resolution, apps, and whatnot. The same applies to any other electronics product, such as mobile phones.
Cramming all this data into a product description makes it difficult to read and clutters up the product page. Instead, you can display it in a more structured way in a dedicated specifications tab on the product page, or give the option for customers to download the specifications.
Usually, industrial products are quite technical and complex and require multiple reviews of the specifications of the products before one can place an order. For this use case, adding a downloadable specifications list can help the purchase process.
For larger industrial orders, new products are usually reviewed by multiple departments of the company before they actually place the order. Giving customers access to a downloadable specs sheet or a specifications document can speed up the purchase process.
🧱Construction and DIY products
When it comes to construction, almost every product has a few unique specifications that set it apart from other variations of the product, such as nails of different sizes and different paint bases or lumbar. Customers purchasing such products often need to know the specifications, such as the coverage area, durability, and warranty.
Providing a downloadable specifications document that contains this information can help customers understand if the product will meet their needs and if it is suitable for the project they're working on.
Most clothing products have some aspects that a user usually checks before placing an order. These aspects can be size, color, material, country of origin, design, or even occasion.
Adding these details on the products page can help your customers in placing the order and reduce product return/refund rates as the users can check these details before placing the order. Displaying these specifications in a table can be a great addition to your product page.
Digital products such as apps, extensions, add-ons or plugins often have multiple specifications attributed to them. Attributes such as total downloads/active installs, version number, last release date, and product feature sets are crucial in almost every digital product.
Most customers prefer checking these details before making a purchase decision, and simply displaying the specifications in a table can be a good addition to your product page. You can also add the details as a downloadable file if you think your customers will require a copy of the details of the products offline as well.
🔬Medical and laboratory products
Due to their nature, medical and lab products such as chemicals or equipment can carry multiple attributes with them that needs to be checked prior to ordering. Even a single order of a chemical needs reviewing of factors such as size, molecular weight, test results, source, manufacturer, or license grade requirements for ordering the products. For this, adding a downloadable specs doc on the product page can help the customers and their teams authorize the purchase orders.
Simply displaying product specifications in a table and adding them as a downloadable file are both good alternatives, depending on the nature of the products. In this tutorial, we’ll checkout both methods in detail. Let’s jump into it!
How do I add WooCommerce product specifications?
As we covered earlier, there are two easy ways to display product specification details to WooCommerce plugin customers:
- Method 1 involves adding a specifications tab to individual product pages.
- Method 2 involves listing multiple products in a structured table (e.g. on your main shop page) so that customers can view the specification data side-by-side and make comparisons.
Choose a method now, and then follow the step-by-step written instructions below to set it up on your WordPress site.
Method 1: Add a Specification tab to the product page
This is the most popular method for adding product specifications to WooCommerce. It involves adding a 'Specification' tab to individual product pages, and then adding the product data to it in one of these ways:
- As basic text or a structured HTML table.
- As a list of downloadable product specification documents.
We'll do it using the WooCommerce Product Tabs plugin, which makes it easy to add a specifications tab to the product page. The plugin is entirely codeless and you can start using it even if you don't know HTML, CSS, or PHP.
Step 1 - Create a specifications tab
- Install the WooCommerce Product Tabs plugin.
- Go to Products → Product Tabs in the WordPress admin.
- Click to add a new tab and call it "Specifications" or similar.
- Select the specific products that you want the specifications data to appear on.
- Repeat the process for all your products which require specification data.
Step 2 - Add data to the WooCommerce product specifications tab
This step differs depending on whether you want to add the product specification data directly to the page, or as downloadable documents. I'll tell you how to do both:
Option 1 - Add product data directly to the tab
This is the easiest option. Simply edit the tab that you created in Step 1 above, and add the specifications data to it. Either add it as normal text, or create a structured specifications table using a free HTML table generator. Once you've created the table in the tool, click the option to copy the code and paste it into the 'Text' view of the specifications tab.
Your WordPress theme will already contain styling for tables, so the table will be styled to match the rest of your site.
Option 2 - Add downloadable WooCommerce product specification documents
This is a great option if you want customers to be able to download specification documents instead of (or in addition to) viewing the data directly on the page. You'll need an additional plugin for this - Document Library Pro.
Document Library Pro lets you upload product specs docs to your WooCommerce store and then display the relevant documents in the specifications tab on product pages. That way, customers can download them or read a preview in their browser like this:
The Document Library Pro plugin is 100% flexible. For example, if a product has lots of specification documents then you can add filter dropdowns and a search box so that customers can find what they need in no time. Moreover, you can use it for products that have downloadable specification sheets including visual information such as diagrams and size charts.
- Get Document Library Pro and install it on your WordPress website. Use the plugin setup wizard to configure how you want the list of downloadable documents to look.
- Go to Documents → Add New and add the following information for each document:
- Enter the Document name as the title and a brief summary of the document as the description (if required). You can also add an image image if required, for example a thumbnail of the specification document.
- Add the product specification document by uploading it to the 'Document Link' section.
- Use the 'Document Tags' section to add a unique label, SKU or code to indicate which product the downloadable specification document relates to.
- Edit the specifications tab that you created in Step 1 above, and add the following shortcode:
[doc_library tag="product1"], replacing "product 1" with the actual tag that you used to identify which product to display the documents on.
This is what the downloadable WooCommerce product specifications documents will look like:
Keep adding documents for your various products. This is easy using to do using the dedicated 'Document' post type area on the left of the WordPress Dashboard.
Tips on perfecting the list of documents
By default, Document Library Pro comes with multiple features, such as sort, filter, search, reset, etc., that are displayed above and below the table. You may not need these if each product only has a few specification documents. That's fine - you can disable these from the plugin settings page or in the setup wizard. If you need help, you can refer to this article for the full list of settings.
If you want, you can change the titles of table columns and customize the colors and design. Do this on the Document Library settings page.
For example, let's say that you want to change the column names. Find the 'Columns' option on the plugin settings page at Documents → Settings → Document Tables. Next, enter a colon followed by the desired name for each column, e.g.
title:Document, excerpt:Details, link. The updated specifications table will be displayed like this:
The customers can now download and preview the product specification documents from the specs table.
Method 2: List multiple products in a table with specification data
If you only have a few pieces of extra product data to display, then you can display these on your main shop and product listing pages.
The best way to do this is to replace your current store layout with a structured product table view. You can include table columns for extra product data. This allows customers to view related products side-by-side and compare the product specifications.
For this method, we’ll use the WooCommerce Product Table plugin. The plugin is perfect for displaying your store products in rows and columns in a structured manner.
How do I use attributes in WooCommerce?
The best way to display product specifications is to add them as product attributes. We will display these attributes as columns in the product table.
That raises the question: How can I add a product specification to a product? To use attributes, you need to follow these steps:
- Go to your WordPress Admin Dashboard → Products → Attributes.
- Now add the attribute title and slug for the attribute you are adding.
- Click on the Add attribute button.
- Now go to your product page customization page and click attributes.
- Select an attribute you wish to display and select the value.
- You can also click on the checkbox to make the products visible on the products page.
- Once you have made the changes, click on the Save Changes button.
Tip: If you don't want to use attributes for the product specification data, then you can do everything in this tutorial using product taxonomies instead.
What is the best field type for specifications information?
Before adding attributes, you need to consider what information will be the right fit for displaying in the product table. Adding multiple irrelevant columns is not the right fit, as it can lead to information overload and eventually make potential customers abandon their purchase in confusion.
Think about the product specification data which is most important to customers. Display this as columns in the product table.
Case Study: Universal Fans
Here’s a good example from one of our customers, Universal Fans. They sell electrical fans requiring technical data to be displayed to customers.
Universal Fans displayed only vital information in the table, such as fan motor capacity, motor wattage, noise level, and IP rating. Customers can compare these attributes with other products as they are all displayed in a table.
If customers want to check further and look into other specifications, they can see the other details by viewing the desired products on a single product page. Customers can find other product-related specifications on the product page, such as duct size, ceiling hole size, material, manufacturer, etc.
Just like Universal Fans, you can also display vital product-related information and display it in the product table using WooCommerce Product Table.
Once you have added specifications data to your WooCommerce products as attributes, you can display the vital ones on the shop or categories page:
- Get WooCommerce Product Table and install it on your WordPress site.
- Use the plugin setup wizard to choose your table columns and other important settings. As part of this, you can enable the table layout on your shop and/or category pages, replacing the default store layout. To display your vital specifications in the product table, you can add the attributes in the table columns field. Include any attributes, adding att: before each one to tell the plugin that it's an attribute. For example, you might create columns for: name, att:color, att:size, att:brand, price, buy
- Next view your shop page, and you will see the new table layout complete with WooCommerce product specifications data.
This is what the final result will look like (depending on your WordPress theme):
How will you add WooCommerce product specifications to your store?
Adding product specification documents to your eCommerce products can greatly help your customers in making the right purchase decision. This can also help your store conversions as your customers will be able to make a more informed choice. In turn, this can lead to fewer refunds and returns.
In this article, we covered two different ways to add WooCommerce product specifications:
- Add a Specifications tab to the product page using the WooCommerce Product Tabs plugin.
- List multiple products in a structured table view with product specifications columns using the WooCommerce Product Table plugin.
Both methods serve different purposes depending on what product specification data you need to display. Either way, implement your chosen method and give your customers access to crucial product information in the most structured way possible. You can also use both methods together to add basic product specification data to shop pages, plus full downloadable documents on product pages.
Which method was the right fit for your store? Let me know in the comments section below.