How to Display Product Attributes on WooCommerce Shop Pages
The key to selling lots of products in your e-commerce store is giving potential customers all the information they need to make a decision. This means finding a clear way to display the vital attributes for each product.
While you can display attributes – such as colors or sizes – on each product page, WooCommerce doesn’t include a way to show those attributes on product listing pages (such as the Shop and Category pages). Fortunately, there’s a better approach. Using another plugin, you can create an attractive, organized product table that shows off everything you have to offer, along with all the available options:
In this guide, we’ll introduce the solution you’ll need – WooCommerce Product Table. Then, we’ll walk you two ways you can use this plugin to display WooCommerce attributes on shop pages. Let’s get started!
An introduction to product attributes and WooCommerce Product Table
Some online stores sell simple products that don’t require much in the way of detail or explanation. However, you’ll often want to include key product attributes as a part of each item’s description. ‘Attributes’ are extra information about the characteristics of a product. This might include the item’s size, its color, the material(s) it’s made out of, and so on.
WooCommerce – the most popular and powerful e-commerce plugin for WordPress users – lets you easily add attributes to each product. You can either use attributes as a way of providing extra data about each product. Or you can use them to create product variations, with each combination of attributes displayed as a variable option in a dropdown.
By default, attributes are displayed on the individual product pages:
This is fine, but it isn’t very prominent. You’ll want to make your attributes more much difficult for customers to miss, so they understand what each item is all about. Plus, you may want a way to show off each item’s primary characteristics in one place, so customers can easily search for all products with a specific color or material (for example).
If that sounds appealing, WooCommerce Product Table is the plugin you’ll need:
WooCommerce Product Table
An easy-to-use plugin for listing WooCommerce products in new and flexible ways.GET THE PLUGIN
This tool is designed specifically for use with WooCommerce. It lets you create an organized, customizable product table to display all of your store’s items. Customers can even filter by attribute to find products more quickly:
WooCommerce Product Table offers a few different ways to display WooCommerce attributes on shop pages, either within the table itself or as a replacement for the main WooCommerce page. Let’s take a look at how this works in practice.
Displaying WooCommerce product attributes: 2 case studies
Before you considering adding this type of product table to your own store, you might want to know what it looks like in action. Therefore, let’s showcase two websites that use this plugin to display WooCommerce attributes on shop pages.
First up, we have Barks & Squeaks:
This online shop provides a create-your-own-hamper service, where you can choose a basket and fill it with pet-related gifts and treats. Above the various product tables, you’ll find drop-down menus that let you sort by attributes (such as pet breed or who the gift is for):
Universal Fans takes a different approach:
This site’s product tables lay out the parts offered in the store, in a straightforward and organized manner. On each line, you’ll find all of that product’s relevant attributes, such as size, capacity, and wattage.
Replicating either (or both) of these features on your site is a breeze. In the next few sections, we’ll show you how!
How to display product attributes on WooCommerce shop pages (2 methods)
Below, we’re going to walk you through two ways you can use the WooCommerce Product Table plugin to display attributes on shop pages. These methods can be applied to both new and existing WooCommerce stores. You can set up a product table that lists out each product’s attributes, either as a new page or to replace the default WooCommerce shop page.
Either way, before proceeding you’ll want to make sure the following initial steps are taken care of:
- You’ll need a WordPress website, which is easily to install quickly.
- You’ll want to install WooCommerce, and run through the simple setup wizard to get it configured.
- Each product you’re planning to sell should be listed as a WooCommerce product.
Finally, you’ll need to purchase the WooCommerce Product Table plugin. Install it on your site, and don’t forget to activate your license key. With that, you’re ready to get to work!
1. Set up a standalone product table
The first way to display WooCommerce attributes on shop pages is the most straightforward. In this method, you’ll use WooCommerce Product Table to set up a new page, where all your products will be displayed. You can then use this page instead of the default WooCommerce shop page.
Adding product attributes to your WooCommerce products
Before you get started, you’ll need to make sure all relevant items have their product attributes listed in WooCommerce. To do this, open up the Products > Attributes section:
Here, you can simply fill in the information under Add new attribute. You can give it a name (such as “Color”), a lowercase slug (such as “color”), and then hit the Add attribute button. This will add it to your list of attributes on the right side of the page.
Underneath the new attribute’s title, click on Configure terms:
Here, you can add each option for that attribute, one by one. For instance, you could call the first term “Red”, the next one “Green”, and so on. Select Add new Color (or whatever you named your attribute) for each term, and include as many as you’d like.
Now, when you open up a new or existing product, you can scroll down to the Product data section, click on the Attributes tab, and select your new attribute from the drop-down list:
You can then add the item’s relevant characteristics, picking from the choices you just set up. You can include one or more options per attribute:
When you’re done, select Save attributes. You can then create additional attributes as needed for the same product, or go to your other products and repeat this process. Make sure to update each product you modify in this way.
Displaying product attributes as individual columns
Once all your variable products have their attributes listed out, your next stop should be the WooCommerce > Settings page. Select the Products tab, and then click on Product tables:
On this page, you’ll find a ton of options for customizing the way your product table looks and functions. You can read up on all the settings in the WooCommerce Product Table documentation.
Right now, let’s focus on attributes. There are several ways to display them in your product table, depending on your personal preference. The simplest technique is to add a separate column in your table for each product attribute, increasing their visibility.
To do this, check out the Columns field:
This is where you can list out all the columns you want included in your table. You’ll want to place them in the order you’d like them to appear, separated by commas.
To include an attribute, simply enter “att:slug”. You’ll need to replace “slug” with the name of the attribute, which can be found under WooCommerce > Attributes:
So if you wanted a column to display each item’s color options, for example, you could use “att:color”. You can include as many columns as you like, to account for each attribute. For example, you might enter this into the Columns field:
The final product list with attributes will look something like this:
Now, customers can easily see all their choices for each item you offer and attributes. This is a user-friendly way to display WooCommerce attributes on shop pages effectively.
If you’re using variable products and want to display variation dropdowns in the product list view, that’s fine too. Just choose one of the variation options on the Product Table plugin settings page.
Filtering by product attribute
If you want customers to be able to find products with specific attributes, then you can add dropdown menus above the table or filter widgets in the left or right sidebar.
Attribute dropdown filters above the product list
One option is to add attributes as dropdown menus above the table. You can do this using the Filter dropdowns field on the product table settings page:
Select Custom here. Then, in the Custom filters field, type in “attributes” if you want to include a filter for every attribute in your store. Alternately, you can include only specific attributes, by creating a list separated by commas. For each attribute, you’ll want to preface the unique slug with att: (for example,
After that, simply save your changes to the settings. Then, open up a new WordPress page. Add the following shortcode to the page:
This will place a shortcode on your page that automatically generates your product table, based on the settings you customized. To see it in action, check out the page on the front end of your site:
As you can see, there’s a dropdown filter menu above the table for each attribute. Customers can use these menus to filter the table, in order to find what they want quickly. What’s more, you can either use this technique on its own, or in combination with the previous method.
Attribute filter widgets
Finally, let’s look at one more option you have for displaying product attributes in your store. If you’d rather list your attributes as filter widgets in the left or right hand column of your product listing pages, that’s fine too. WooCommerce Product Table comes with attribute filter widgets, which you can display as checkboxes or dropdowns.
To create attribute filter widgets, simply go to Appearance > Widgets in your dashboard. Find the widget called Product Table: Filter by Attribute, and drag it into one of your site’s widget areas (such as a sidebar):
You can give the widget a title, choose which attribute it should display, and configure a few additional options. If you preview your site on the front end, you should now see a section that lets customers filter your products by that attribute:
This method is a great way to make shopping a little easier for your visitors, and can be used alongside any of the techniques we’ve discussed so far. Or if you want more fancy AJAX filters, then you can choose from two compatible filter widget plugins.
2. Replace the default WooCommerce shop page with a product table
The above method is the ideal way to display WooCommerce attributes on shop pages in most scenarios. You can create a new page for your product table, and use that instead of the standard WooCommerce setup.
However, what if you instead want to replace the default WooCommerce shop page with a product table? If you do this, your product table will show up on the main shop page, as well as on category pages and the like. It will include all of your customizations, so customers can see each product’s attributes listed out clearly.
You can do this by making a change to your active theme’s template. For more details, check out this documentation article. However, be warned that this is an option best suited to more technically-experienced users. In particular, you’ll want to be familiar with the process of logging directly into your site’s files using File Transfer Protocol (FTP).
WooCommerce is a solid foundation for building nearly any type of e-commerce store. However, sometimes you’ll need an additional tool to show off your products in the best possible light. Fortunately, WooCommerce Product Table makes that very simple.
Above, we’ve introduced two methods you can use to display WooCommerce attributes on shop pages using this plugin:
- Set up a standalone product table, and display attributes using drop-down filters or as columns within the table.
- Replace the default WooCommerce shop page with a product table, by overwriting your theme’s template file.
WooCommerce Product Table
An easy-to-use plugin for listing WooCommerce products in new and flexible ways.GET THE PLUGIN
Do you have any questions about how to display WooCommerce attributes on shop pages? Give up a heads-up in the comments section below!
Image credit: Pxhere.