Product Table filters & widgets
As well as listing products in a user-friendly table layout, the WooCommerce Product Table plugin comes with 2 types of filter that make it easy for customers to find specific products:
- Filter dropdowns, which appear above the table.
- Filter widgets, which you can add to any widgetized sidebar.
- In addition, you can add a huge range of filters by using Product Table with the WooCommerce Product Filters plugin.
You can see each type of filter in action on our demo sites:
- Built-in WooCommerce Product Table filters
- Using WooCommerce Product Table with the Product Filters plugin
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 '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_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,buy" 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,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 -
- Tags filter only -
- Custom taxonomy filter, where the taxonomy slug is
- Attribute filter, where the attribute slug is
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:sizethen 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.
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 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 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.
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.
My attribute filters aren't working
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.
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.
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.
Using WooCommerce Product Table with the WooCommerce Product Filters plugin
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.