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:

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:

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,summary,att:color,att:size,price,buy

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. 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, use the Filter dropdowns option 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).

To add attribute filter widgets, go to Appearance → Widgets and add any of the widgets that start with "Product Table - ".

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.

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

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.

One you have set up your filters, 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.

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 add the product ID to the shortcode, like this:

[product_table include="123"]

Replace "123" with the ID of the product that you want to show the attributes for. You can easily find this by hovering over a product in the main 'Products' list in the WordPress admin.

This will create a table with various columns, which you can edit as needed. For example, in this screenshot we added the product table shortcode to the short description. Each field of the table is a different attribute.

WooCommerce product page custom fields

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

WooCommerce custom fields taxonomies single product page

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:

[product_table include="123" variations="separate"]

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:

WooCommerce services with variation on each row separate

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.

4 Comments

  1. Hello,

    Is there any way to include the local attributes in the filters. At the moment, the filters that we use for local products do not show up with a woocommerce filters plugin, only global filters show up.
    Is there any way to include local filters or merge them with global filters?
    let me know,
    regards

    • Hi, Jack. Thanks for asking about a way to display/use local or product-specific attributes in WooCommerce product filters.

      I hope you'll understand that this isn't possible in WooCommerce itself, as product-specific attributes don't necessarily use the exact same attribute name or slug and terms across all products. E.g. A product could have a "size" attribute slug with terms like "red, blue," while another product could have a similar attribute but not the exact slug - "sizes" (with an S) with terms like "crimson, aqua". For product attribute filters to work, they need to specify the correct/exact slug and terms.

      For more details about this, and for advice about whether it's possible to merge product-specific attributes with global filters, I suggest you contact WooCommerce support or browse the official WooCommerce documentation.

      I hope this makes sense and helps point you in the right direction. Let me know if you have any other questions. You can also get in touch with us via our dedicated Support Center. Cheers!

  2. 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. Required fields are marked *