How to Display Product Attributes on WooCommerce Shop Pages

Last Updated: March 17, 2020 2 comments

‘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:

A product table displaying attributes.

Or you can list attributes as variations, like this:

A WooCommerce product table with drop-down variations.

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:

A WooCommerce product page displaying attributes.

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.

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:

An example of a WooCommerce product table displaying attributes.

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:

A product table on the Barks & Squeaks website.
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:

A product table on the Universal Fans website.

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 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!

Get WooCommerce Product Table now!

1. First, set up the plugin

The first step is to set up WooCommerce Product Table and configure the global options. You also need to add attributes to your products so that you can display them in the table.

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:

The WooCommerce Product 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:

Adding a new attribute in WooCommerce.

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:

Choosing an attribute for a WooCommerce product.

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:

Choosing a color for a WooCommerce product.

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 the WooCommerce → Settings page. Select the Products tab, and then click on Product tables:

The WooCommerce Product Table settings.

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:

The WooCommerce Product Table columns option.

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:

The WooCommerce product attributes page.

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: image,name,short-description,att:color,att:size,price,add-to-cart

The final product list with attributes will look something like this:

An example of a WooCommerce product table displaying attributes as columns.

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 using the shortcode method.

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:

The WooCommerce Product Table filters option.

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, att:color,att:size).

After that, simply save your changes to the settings. Then, it’s time to create your product tables!

2. Create your product attribute tables

Method 1: Enable product tables on the WooCommerce shop page

The easiest option is to upgrade the default WooCommerce shop page to use the product table layout. If you do this, your product table will show up on the main shop page – plus on category pages and search results, if you choose. The tables will use the options you set on the plugin settings page, so customers can see each product’s attributes listed out clearly.

You can easily enable the product table layout on shop and/or category pages using the ‘Table display’ section of the plugin settings page:

WooCommerce add product table to shop and category pages

Method 2: Add product tables to any page

Alternatively, you can use a shortcode to insert product tables in any page on your site. You can then use this page instead of the default WooCommerce shop page.

This option is less automated because you have to add a shortcode for each table, but it is more flexible because you can make each table different – for example, to list different attribute columns in each table.

Add the following shortcode to a page:

[product_table]

Add as many shortcodes as you like, and configure them using any of the 50+ shortcode options.

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

An example of a WooCommerce product table displaying attributes as drop-down menus.

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.

Attribute filter widgets

Finally, let’s look at one more option for displaying product attributes in your store.

Above, we talked about how to list attributes as filter dropdowns above the product table. If you’d rather list 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):

The WooCommerce Product Table filters widget.

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:

A filters widget on a WooCommerce page.

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.

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.
WooCommerce Product Table
An easy-to-use plugin for listing WooCommerce attributes in new and flexible ways.

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.

Will Morris

Will Morris is a staff writer at WordCandy. When he's not writing about WordPress, he likes to gig his stand-up comedy routine on the local circuit.

2 Comments

  1. George
    July 27, 2018 Reply

    Wondering why WooCommerce didn't make that easier? A bit over the top that a plugin is necessary to show something that comes out of the box with WooCommerce, no?

Please share your thoughts...

Your email address will not be published.