Product Table filters & widgets
WooCommerce Product Table comes with 2 types of filter:
- Filter dropdowns, which appear above the table.
- Filter widgets, which you can add to any widgetized sidebar.
You can see both types of filter in action on our Product Table Filters Demo.
Note: This page covers the options for letting customers filter the table to refine the list of products. If you want to create tables listing specific products based on category/tags/status etc. (i.e. perform a filter before the table first loads), check out this article.
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.
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.
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 ‘Add to Cart’ 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,add-to-cart" 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_regionwould display terms for the
product_regiontaxonomy as a filter
- Any attribute column – e.g.
att:sizewould 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.
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,add-to-cart" filters="categories,tags,att:color"]
Product attribute filters
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.
Filter dropdown examples
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,add-to-cart" filters="att:color,att:size,tags"]
- Filters for categories and all attributes –
[product_table columns="name,price,add-to-cart" filters="categories,attributes"]
- Categories filter only –
- Tags filter only –
- Custom taxonomy filter, where the taxonomy slug is
- Attribute filter, where the attribute slug is
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.
Can I list categories and sub-categories as separate filter dropdowns?
Currently, 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.
We are interested to know if you would be interested in a new feature to list the parent and child categories as separate dropdowns above the table. Please send us a feature request if this is of interest. If there is enough demand then we will add this in future.
Can I control the order of the items in the filter dropdown?
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 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.
Please see our tutorial on 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 the Woof filter plugin.
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.
My attribute filters aren’t 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.
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.
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
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 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 http://producttable.barn2.co.uk/product-table-filters/?filter_color=black will load a page of our demo site that is pre-filtered for products with the ‘black’ attribute. Similarly, http://producttable.barn2.co.uk/product-table-filters/?min_price=100&max_price=200&filtering=1 will filter 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.
Can I use any AJAX filter plugins?
The only third party AJAX filter plugin that we know can work with WooCommerce Product Table is WOOF’s WooCommerce Products Filter. WOOF have created a connector plugin that lets their filter widgets work with WooCommerce Product Table. You can read about this in our tutorial.
Troubleshooting tip – “My attributes aren’t showing in the filter widget”
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.
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 WOOF AJAX filter plugin to add category or tag filters to your sidebar.