Product Table filters & widgets

WooCommerce Product Table comes with two types of filters that make it easy for customers to find products:

Filter dropdowns which appear above the table.
Filter widgets which you add to your sidebar.

In addition, if you are using our WooCommerce Product Filters plugin, you can add a wider range of filters to your product tables, including image filters, swatches, review rating, stock status and lots more.

: Standard product table filters

: Using with the WooCommerce Product Filters plugin

You can see each type of filter in action on our demo:

Filtering before the table loads

This article describes the options for customers to filter the table to refine the list of products after the table loads. If you want to create tables listing specific products based on category, tag, customer field, search term, etc, when the table is first displayed, check out the following articles:

Load tables based on category, tag, attribute, custom field, date, or taxonomy
Load tables based on search term

Please note that WooCommerce has renamed the filter widgets since the above video was filmed. The correct terminology is listed below. Everything else in the video is still correct.

Filter dropdowns

The filters option displays dropdown lists above your product table which let you filter (i.e. search) the table by product category, tag, custom taxonomies, attributes or variations.

WooCommerce table plugin product filters

Filters based on table contents

To show filters based on the contents of the table, set the 'Product filters' option to 'Show based on columns in table' on the plugin settings page, or add filters="true" to the shortcode. Any filterable column in your table, and any variations displayed in the 'Buy' column (if variations are enabled) will be displayed as filters above your table.

For example, this table will show filters for categories, tags and the color attribute because these filterable columns are all present in the table:
[product_table columns="name,categories,tags,att:color,buy" filters="true"]

Choosing your own filters

To specify which filters appear above the table, regardless of the columns displayed, you can list the filters to be included.

The format is similar to the columns option, and should be a comma-separated list either in the Filters option on the plugin settings page, or by setting this option directly in the shortcode. You can choose any combination of the following:

categories - Display the product categories as a filter
tags - Display the product tags as a filter
attributes - Display all available product attributes as filters (one filter for each attribute)
Any taxonomy column - e.g. tax:product_region would display terms for the product_region taxonomy as a filter
Any attribute column - e.g. att:size would display the Size attribute as a filter

Setting global filters on the plugin settings page

To set specific filters globally on the plugin settings page, choose 'Custom' for the 'Product filters' option and list the filters in the 'Custom filters' box that appears below.

WooCommerce product table filter settings

Setting filters directly in the shortcode

For example, the following shortcode will show filters for categories, tags and the color attribute even though these columns are not present in the table:
[product_table columns="name,description,price,buy" filters="categories,tags,att:color"]

For product attributes, you need to use the attribute slug. You can find this in the Products > Attributes section in the WordPress admin. Similarly, if you're displaying a custom taxonomy as an attribute then you need to use the taxonomy slug. (See examples below.)

You can use the keyword attributes in the filters option, e.g. filters="attributes". This will display all available product attributes so you don’t have to list them individually.

These examples show you different ways of adding filters directly in the product table shortcode.

Filters based on table contents - [product_table columns="name,categories,tags,price" filters="true"]
Filters for color, size, and tags - [product_table columns="name,price,buy" filters="att:color,att:size,tags"]
Filters for categories and all attributes - [product_table columns="name,price,buy" filters="categories,attributes"]
Categories filter only - [product_table filters="categories"]
Tags filter only - [product_table filters="tags"]
Custom taxonomy filter, where the taxonomy slug is product_area - [product_table filters="tax:product_area"]
Attribute filter, where the attribute slug is color - [product_table filters="att:color"]

How to rename the filters

The name at the top of each filter dropdown (e.g. 'Brand') is set using the following logic:

If you have set custom filters then you can add a name for the filter by adding a : (colon) after the filter name. For example, if you set your custom filters as categories,tags,att:size then you can rename each one like this: categories:Product Categories,tags:Labels,att:size:Dimensions (the text in red is the custom filter names).
If you don't set a name for the filter then if the filter also appears as a column in the table, then renaming the column will also rename the filter.
If neither of the above apply, then the filter name will come from WooCommerce itself.

My filters are showing options that don't relate to the products in the table

If you are using lazy_load, then the filter dropdowns will show all possible options even if these don't relate to the products in the current table. For example, if you are listing products in a specific category only then the 'Categories' filter will list all the categories in your store. This is because when you are using lazy load, WooCommerce Product Table hasn't loaded the full content of the table and therefore doesn't know which filter options apply to the current products.

If this is a problem due to the way your store is structured, then here are our suggested workarounds:

Depending on the number of products in your store, you can disable the lazy_load option. If you are not using lazy load then the filter dropdowns will only show options relating to the products in the current table.
If you can't disable lazy load due to the number of products in the table, then you could create a custom taxonomy and use this as a filter instead. For example, if you are listing clothing products in a table and want to add a categories filter for the clothing categories only, then you could create a 'Clothing' taxonomy and add each sub-category that you need to be able to filter by. You can then add a filter dropdown for this taxonomy, instead of using the actual categories filter.

Most types of filter are ordered alphabetically and there are no options to change them. If you're using the filters to list something where alphabetical sorting isn't appropriate (e.g. dates), then you could add numbers before each item to control the order. For example, if you're using categories to filter by month, then you could name your categories '01 - January', '02 - February', and so on.

The only exception is attribute filters, which are sorted in a different way. Please see the separate instructions about ordering attribute filters in the product table.

Can I move the filters to below the table?

The filters are displayed above the table by default, but if you have positioned the search box below the table then the filters will appear below the table. You can also set them to display above and below the table.

WooCommerce Product Table lists all categories in a single list. The list is nested/hierarchical so that you can see which are the parent categories and which are child categories.

If you'd like to list each level of category as a separate filter, then you can do this by using WooCommerce Product Table with our other plugin - WooCommerce Product Filters. This lets you choose whether to display category filters as a single dropdown or multiple dropdowns.

Can I add custom field filters?

It's not possible to filter by custom field because this is not how custom fields are supposed to be used. We recommend that you store this extra data as custom taxonomies rather than custom fields, as these can be filtered.

Custom fields are designed to store unique data, and as such they're not supposed to be filterable. In contrast, custom taxonomies are like categories and are designed to group and sort products.

Learn how to create WooCommerce custom taxonomies.

Can I add checkbox filters above the table?

It's not possible to change the dropdown list filters above the table to check boxes. If you want to add check box filters then you can do this using the filter widgets that come with the plugin, or using one of the compatible third party filter plugins recommended in this article.

Can I add "Filter:" before the filter dropdowns?

Before WooCommerce Product Table version 2.7, the word Filter: appeared before the filter dropdowns. We removed this to create a cleaner look above the table.

Our developer documentation contains a filter which you can use to add a label in front of your filter dropdowns if required.

Setting filters to "true" or "Show based on columns in table" isn't working

If you add filters="true" to the shortcode or select "Show based on columns in table" on the plugin settings page, then filters will only appear above the table if your table contains any filterable columns, such as categories or tags.

If your table does not include any columns that can be filtered, then no filters will appear. Instead, please see the instructions above for choosing your own filters.

Attribute filters not working

If you're trying to list attributes in the filter dropdowns (e.g. [product_table filters="att:size"] to list an attribute called 'size'), make sure you have added your attributes globally Products → Attributes. If you create attributes individually for each product then they will act in a standalone way and can't be used to group products in the filter dropdowns.

Category filters not showing

If you're not using lazy load, then the category filters will only display when the categories have unique names. If you are using the same name for more than one category, then the only way to display them all in the filters is to enable the lazy load option.

WooCommerce filter widgets

WooCommerce Product Table comes with its own version of all the built-in filter widgets that come with WooCommerce. These are:

Product Table: Active Product Filters - Displays the active filters so customers can see which filters are already in place. Includes an option to revert the table to the original list of products.
Product Table: Filter Products by Attribute - Filter the products in the table by selecting one or more attributes.
Product Table: Filter Products by Price - Adds a price range slider. Customers can drag it to set a budget and view products within their price range.
Product Table: Filter Products by Rating - Refine the product table to show products based on star rating.

WooCommerce table product filter widgets

Note: If you are using WooCommerce Product Table with our Wholesale Pro plugin and wish to add filter widgets to your Wholesale Store page, then you should use the widgets that come with WooCommerce Wholesale Pro instead.

How to use filter widgets on pages

You can add the Product Table filter widgets to any widgetized area on your website, such as a left or right sidebar. They will only work on normal pages or posts that contain product tables.

Add a product table to any page on your website. Make sure the page has a widgetized area such as a right or left sidebar. (Most WordPress themes come with a page layout that includes a sidebar. Ask your theme developer if you're not sure.)
Go to Appearance > Widgets.
On the list of available widgets on the left, look for the ones that start with 'Product Table'. Drag one or more widgets to your sidebar area on the right.
Choose the options to configure the product filter widget(s) as needed.
Click 'Save' for each widget.

How to use filter widgets on category archives

The Product Table filter widgets do not work with product tables that you are displaying on the main WooCommerce shop page or category pages. This is because they only work on normal pages, and not the pages which WooCommerce creates automatically.

Instead, you need to use the built-in WooCommerce filter widgets, which are designed to work on category archives.

You can find these in Appearance → Widgets. They start with 'Filter Product by' instead of 'Product Table' (see screenshot).

Can I link to a pre-filtered table, or perform a filter when the table first loads?

There are 2 ways to do this:

If you want to create a product table that contains products with a specific category/tag/attribute/custom field or taxonomy/etc. only, please see our article on choosing which products appear in the table.
You can also create product tables with a specific filter by including the filter value in the URL. For example, the URL https://producttable.barn2.com/product-table-filters/?filter_color=black contains parameters for the attribute 'black'. It will load a page of our demo site that is pre-filtered for products with the 'black' attribute. Similarly, https://producttable.barn2.com/product-table-filters/?min_price=100&max_price=200&filtering=1 will create a table that is already filtered for products between $100-$200. You can get the URL's by creating a product table with the filter widgets (instructions above), selecting the required filter, and copying the URL.

Please note that if you are using option 2, then you can only link to filter URL's for attribute, price or rating. If you want to link directly to a pre-filtered table using categories, tags or custom taxonomy terms, then you would need to use WooCommerce Product Table alongside the WooCommerce Product Filters plugin. This provides the additional filters you need, and has unique URL's for each filter option which you can link to.

Can I add category or tag filter widgets?

WooCommerce also comes with widgets for 'WooCommerce Product Categories' and 'WooCommerce Product Tags'. These aren't filters because instead of refining the existing list of products, clicking on them takes you to the relevant category or tag archive page.

If you're using WooCommerce Product Table on a standard WordPress page, then you can't use these widgets. If you've added product tables to your main shop page or archive template, then you can use these widgets. Clicking on a category or tag in the widget will take you to the relevant category or tag archive page, which will contain a product table.

The other option is to use the WooCommerce Product Filters plugin to add proper category or tag filters to your sidebar. This is much more flexible as you can display the category and tax filters in a wide range of styles including as radio buttons, checkboxes, dropdowns, clickable images, tag clouds, and so on.

If you can't select your attributes from the dropdown on the Layered Nav widget, then this is because you have added them to individual products instead of creating them as global attributes. You need to add them as global attributes via /Products/Attributes. If you create attributes directly on the single product page then they won't be available in the widget.

We have designed WooCommerce Product Table to work perfectly with our other plugin, WooCommerce Product Filters. Use both plugins together to add professional-grade AJAX-powered filters either above or alongside your product tables.

These instant filters are much more advanced than the ones that come with WooCommerce itself, and filter the products instantly without reloading the page.

You can display the filters above the product table, in a sidebar widget, or in a mobile-friendly slide-out panel like this:

Learn more about using WooCommerce Product Table with WooCommerce Product Filters.

Still need help?

If searching the knowledge base hasn't answered your question, please contact support.

Get Support

Knowledge Base

Product Table filters & widgets

Filtering before the table loads