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.
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.
To show filters based on the contents of the table, add
filters="true" to the shortcode. This will show any filterable column or variations displayed (if variations=true) as filters above your table.
[product_table columns="name,categories,tags,att:color,price,add-to-cart" filters="true"] would show categories, tags and the “color” attribute as search filters.
To specify which filters appear (regardless of the columns displayed), you can list the filters to be included, e.g.
filters="att:color,att:size,categories". You need to use the attribute slug here – 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 usage examples below.)
You can also use the keyword
attributes in the filters option, e.g.
filters="tags,attributes". This will display all available product attributes so you don’t have to list them individually.
The filters are displayed above the table by default, but if you have positioned the search box below the table (
display_search_box="bottom") then the filters will appear below the table as well. You can also set them to display above and below the table using:
- All filters –
[product_table columns="name,categories,tags,price" filters="true"]
- Filters for ‘color’ attribute, ‘size’ attribute 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"]
- Tag filter only
[product_table columns="name,categories,tags,price" filters="tax:area"]
- Category filter only –
- Tag filter only –
- Custom taxonomy filter, where the taxonomy slug is ‘area’ –
- Attribute filter, where the attribute slug is ‘color’ –
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.
WooCommerce filter widgets
WooCommerce Product Table comes with its own version of all the built-in filter widgets that come with WooCommerce. These are:
- WooCommerce Average Rating Filter – Refine the product table to show products based on star rating.
- WooCommerce Layered Navigation Widget – Filter the products in the table by selecting one or more attributes.
- WooCommerce Layered Nav 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.
- WooCommerce Price Filter Widget – Adds a price range slider. Customers can drag it to set a budget and view products within their price range.
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 ‘WooCommerce’ 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.