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. You can use the WooCommerce Product Table plugin to display attributes in an attractive, organized product table.

You can list attributes for information purposes, like this:

Or you can list attributes as variations, like this:

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!

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:

This product attributes plugin 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:

Check out the WooCommerce Product Table attributes demo!

WooCommerce Product Table offers a few different ways to display WooCommerce attributes on shop pages. You can use it as a standalone table, or as a replacement layout for the main WooCommerce shop page. Let’s take a look at how this works.

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 replacing the default WooCommerce shop page or as a new page.

Either way, before proceeding you’ll want to make sure the following initial steps are taken care of:

1. You’ll need a WordPress website, which is easily to install quickly.
2. You’ll want to install WooCommerce, and run through the simple setup wizard to get it configured.
3. Each product you’re planning to sell should be listed as a WooCommerce product.

Finally, you’ll need to purchase and install the WooCommerce Product Table plugin. With that, you’re ready to get to work!

1. Initial setup

Add 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.

Set up product variations (optional)

You can use product attributes for information purposes only. Alternatively, you can use them as variation attributes, so that people can actually buy combinations of each attribute (for example, by combining the size and color options for a T-shirt).

If you want to sell attributes as variations, then you'll also need to set up your products as variable products:

1. On the 'Edit Product' screen, tick the 'Use for variations' box for each attribute in the 'Attributes' tab.
2. Then, go to the 'Variations' tab and add all the variations.

That way, customers can buy every combination of the attributes.

Displaying product attributes as table columns

Once all your products have their attributes, your next stop should be Products → Product Tables → Add New.

The table builder will walk you through the process of creating a product table with attribute columns:

1. On the first page, choose whether you want to insert the product attributes table manually or enable the table view and attribute columns on your main shop pages.
   

   

2. The columns page lets you choose which product data to include in the table. You can add a separate column in your table for each product attribute, increasing their visibility. Your global product attributes will appear in the list of columns. Also add useful columns like the product name, price, and add to cart buttons.
   

   

3. Choose the other settings for your product table as needed.
4. Finally, if you chose to enable the table layout on your shop templates then you don't need to do anything further. Alternatively, insert the 'Product Table' block or copy the shortcode from the end of the table builder onto the page where you wish to display the table.

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.

Note: If you want to include different attribute columns in each table on your site, then you'll need to set the column options directly in the shortcode. You can do this by adding your product tables to individual pages.

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. There are 2 ways to add attribute filters:

1. Using the filter dropdowns and widgets that come with the WooCommerce Product Table plugin.
2. Using WooCommerce Product Table with the WooCommerce Product Filters plugin for more advanced filtering.

Option 1: Set up the built-in WooCommerce Product Table filters

WooCommerce Product Table comes with filter dropdowns which you can add above the product table. It also comes with filter widgets which are exactly like the default widgets that come with WooCommerce itself. You can add attribute filters as either dropdowns and widgets, or both.

To add attributes as dropdown menus above the table, edit your table at Products → Product Tables. On the 'Search & Sort' page, add filters for all the product attributes that you wish to display as dropdowns. Do this by selecting one or more attributes from the list of available filters.

To see it in action, add a shortcode and then check out the page on the front end of your site:

As you can see, in this example 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.

To add attribute filter widgets, go to Appearance → Widgets and add any of the WooCommerce filter widgets.

You can give the widget a title, choose which attribute it should display, and configure a few additional options.

Option 2: Use WooCommerce Product Table with the WooCommerce Product Filters plugin

To supercharge your product attribute filters, you can use WooCommerce Product Table with the Product Filters plugin. You can use it to add attribute filters at the top of the shop page, or to the shop page sidebar. It comes with a huge range of filters. For example, you can choose from the following styles for your attribute filters:

• Dropdown filters.
• Checkbox filters.
• Radio button filters.
• Color swatches (for a 'color' attribute).
• Clickable images.
• Clickable text labels (similar to a tag cloud).

To use these filters, install the WooCommerce Product Filters plugin and create filters in Products → Filters. To show a group of attribute filters at the top of the shop page, go to the settings tab and select the group. Alternatively (or in addition!), go to Attributes → Widgets and add the 'Product Filters' widget to the shop page sidebar.

Bonus - Show attributes on product page in WooCommerce

So far, we've looked at how to show product attributes on the shop page and category pages.

As an extra bonus feature, you can use the same technical to show attributes on the WooCommerce product page too. The trick is to insert a product table that only lists the attributes or variations for that particular product.

To do this, you need to use the second page of the table builder to select the specific product that you will be displaying the attributes for:

Again, the final page of the table builder will give you a shortcode for inserting the product attributes table. Use this to add it to the product page.

For example, in this screenshot we added the product table shortcode to the short description. Each field of the table is a different attribute.

And here's another example - this time with 2 attribute columns and a stock column:

Alternatively, if it's a variable product then it's a good idea to list each variation on its own row, each with its own attributes. You can do this by enabling the 'Separate' variations option in the 'Add to cart' section of the table builder:

This screenshot contains a table listing the attributes for 4 variations on the product page. Instead of adding attribute columns, the attributes are automatically displayed after the name of each variation:

As you can see, WooCommerce Product Table isn't just for listing attributes on the shop page. It's also a super-flexible way to show attributes on the product page in WooCommerce.

Where to get the plugin

WooCommerce Product Table makes it easy to list product attributes on your shop or category pages, or indeed anywhere in your store. You can list attributes as columns in the table, variation dropdowns, or as filters to help your customers to find products by attribute.

Above, we’ve introduced two simple methods to display WooCommerce attributes on shop pages:

1. Add product tables with attributes on the main shop and category pages.
2. As standalone product tables, added to any page using a shortcode.

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.