We're pleased to announce that our bestselling Product Table Plugin now supports all the WooCommerce product filter widgets. Keep reading to learn all about them.
What are the new product filter widgets?
WooCommerce Product Table now works with the filter widgets that are included with WooCommerce. You can use them in addition to - or instead of - the product table dropdowns that were already available to filter by category, tag, custom taxonomies, attributes or variations.
Here's the official overview video from WooCommerce. (Just bear in mind that to use the widgets with product tables, you need to follow the instructions below and not the ones in the video! I've provided a dedicated vide on how to use the WoCommerce Product Table filter widgets below, so this is just a general overview.)
WooCommerce Filter by Rating
This filter widget displays a graphic of 5 stars, which customers can click to refine the product table to view products based on the star rating. They can select 1 or more stars to find products with the exact ratings they want.
WooCommerce Filter by Attribute
This filter lets customers refine the products shown in the table by selecting one or more attributes. It offers a quick way to narrow down the product table's contents to find products with a specific feature or combination of attributes.
WooCommerce Product Table fully supports product attributes, so this feature will be really useful to our customers. You could already display attributes as filter dropdowns above the product table, but the dropdowns did not interact with one another. The attributes filter adds more sophisticated ways to refine the table.
WooCommerce Active Filters
This WooCommerce active filters widget works with the other filters. It displays the active filters so customers can see which filters are already in place. It's a quick way to revert the table to the full list of products.
WooCommerce Price Filter Widget
The WooCommerce price filter widget adds a neat-looking price slider. Customers can drag it to set a budget and refine the product table to view products within their price range. You can set a lower price range, upper price range or both - all within a single price slider.
The price slider works nicely with the other features of WooCommerce Product Table. For example, if customers click on the 'Price' column header then they can sort by price in ascending or descending order. If they have an exact budget in mind then they can use the WooCommerce price widget instead.
Why have you added product filter widgets?
Adding support for the WooCommerce product filters is the most asked-for item on our feature request list. Dozens of you have asked for more flexible ways to filter the product table, in addition to the existing filter dropdowns above the table.
Where can I see the WooCommerce filter widgets in action?
We've added the WooCommerce product filter widgets to the sidebar on several of our demo pages. You can see various combinations at:
- Product Table Filters Demo
- WooCommerce Quick Order Form Demo
- WooCommerce Product Directory Demo
- Product Table with Attributes
How to use the WooCommerce product filter widgets
The process for using product tables with WooCommerce product filters is slightly different from how to add them to your main shop page and category pages. This is because the built-in WooCommerce widgets are only designed to work on the shop page and category archives. Product tables are normally added to standard pages (although you can add them to category archives if you prefer), so we've created a special WooCommerce Product Table version of each widget which works perfectly on pages:
- Get WooCommerce Product Table and use the documentation to create your first table. Add the table to any page on your WordPress 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 your product filter widget(s) as needed.
- Click 'Save' for each widget.
Now view the page with your product table. Test the WooCommerce filter widgets and watch the list of products in the table update with the filters you choose.
Bonus: Add even more advanced filters to your product tables
Update: Since adding the above filters to the WooCommerce Product Table plugin, we have released a brand new plugin - WooCommerce Product Filters. This builds on the filters in WooCommerce Product Table and lets you add even more impressive filters to your store. It either works with the default store layout, or - you guessed it - with the product table view.
By using the two plugins together, you can filter by absolutely any type of product data. The filters can appear either above or alongside the list of products. And even better, you can choose from a wide range of styles for them. This includes filter checkboxes, radio buttons, images, color swatches, and more.
Here's an example:
Where to get the filters
If you're already using WooCommerce Product Table, you can update to the latest version via Dashboard → Updates in the WordPress admin. The new version comes complete with the new WooCommerce product filter widgets. Add them by following the instructions above.
If you haven't got WooCommerce Product Table, buy the plugin today and start creating your product tables with filter widgets.
And if you like the plugin, sign up as an affiliate! We offer a generous 30% commission for reselling it, so it's a good chance to earn some extra pocket money.
I'd love to hear about how you use WooCommerce Product Table with the new filters. Please try it out and add your comments below, ideally with a link to your site!