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 examples of both types of filter on our Product Table Filters Demo. We’ve also provided an overview and instructions in this video:
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 your 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 treats parent categories and sub-categories equally. If you add a ‘categories’ filter dropdown above the product table then all your categories will be listed together.
We are interested to know how much demand there would be for an option to display category filters in a hierarchical list, with categories and sub-categories grouped separately. Please let us know if you would be interested in this feature, and we will contact you if we add it in future.
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).
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.