How to List Products in a Table with WooCommerce AJAX Filter Widgets
Our WooCommerce Product Table plugin lists products in an interactive table. It’s a fantastic way of listing large numbers of products with quick-find searching, sorting and filtering. Your customers can use these controls to quickly find the products they need. And as everyone knows, faster buying means higher conversion rates, and more sales for you.
This article will tell you about the search, sort and filters that come built into WooCommerce Product Table.
I’ll also provide full setup instructions on some third party WooCommerce AJAX filter plugins that will add instant filter widgets to your product lists.
What controls are built into WooCommerce Product Table?
WooCommerce Product Table comes with several built-in controls straight out of the box:
- Instant AJAX keyword search. Customers can use the search box above the product table to type a keyword and instantly view matching products in the table. The product table updates instantly via the AJAX search before the customer’s eyes, while they type.
- AJAX filter dropdowns. You can add as many filter dropdown lists above the table. Customers can use these to instantly filter by product category, tag, custom taxonomies, attributes or variations. These filters use AJAX and do not reload the page.
- Filter widgets. WooCommerce Product Table also comes with its own version of the basic filter widgets that are built into the WooCommerce core. You can add filters for product attributes, price or average rating.
- Column sorting. Finally, WooCommerce Product Table comes with sortable columns. Customers can click on a column heading to sort by that column. If you’re not using the lazy load option then all columns are sortable. If you’re using lazy load then only the product name and description columns are sortable.
Test the built-in filter options on the WooCommerce Product Table demo page.
Do I need a WooCommerce AJAX filter plugin?
As you can see, WooCommerce Product Table comes with a comprehensive set of controls for allowing customers to search, sort and filter your product catalog. You can build on these by using it with a third party WooCommerce AJAX filter widget plugin.
There are a few reasons to use product tables with a separate filter plugin:
Instant AJAX filters – fewer page reloads
The filter widgets that come with WooCommerce Product Table do not use AJAX. This is because they replicate the native filter widgets that come with WooCommerce itself, and these are not AJAX widgets. This means that the page reloads each time you select a filter.
That’s fine for many sites. However, it can cause problems because the page will reload every time the customer selects a filter. If they want to perform multiple filters – for example, to filter for a choice of 2 colours plus size and price – then that’s 4 page reloads!
You can avoid this by either using WooCommerce Product Table’s AJAX filter dropdowns instead of the widgets, or combine it with a third party AJAX filter plugin.
Filter by category, attribute, tags, or custom taxonomy
Like WooCommerce itself, WooCommerce Product Table comes with filter widgets for attribute, price, and average rating/review. If you want filter widgets for category, product tag or custom taxonomy terms then you’ll need to use the dropdowns above the table instead (which support all these things).
Alternatively, you can use WooCommerce Product Table with a third party filter plugin. As well as being able to filter by product attribute, price and rating, a specialist WooCommerce filter plugin lets you create other types of filter. This includes filtering by category, custom product attributes, tags, and custom taxonomies.
Keep reading to learn how to use WooCommerce Product Table with AJAX filter widgets for categories, tags, taxonomies and more…
Choosing a WooCommerce AJAX filter widget plugin
Our colleagues at BeRocket and WOOF have developed WooCommerce AJAX filter plugins that integrate with our WooCommerce Product Table plugin. By using WooCommerce Product Table with either of these filter plugins, you can add flexible AJAX filter widgets that work with your product tables.
The compatible AJAX filter plugins are:
- WooCommerce AJAX Products Filter by BeRocket (more info & setup guide)
- WooCommerce Products Filter by WOOF (more info & setup guide)
Note: We have tested WooCommerce Product Table with many third party filter plugins such as FacetWP and others. The plugins listed above are the only ones we’ve found that work with product tables. The free versions of BeRocket and WOOF’s filter plugins also do not work with product tables, as the integration only applies to the premium versions.
Which WooCommerce AJAX filter plugin to use?
Choose an AJAX filter plugin by reading about each one and looking at the features. The two plugins are similar but different, so choose the one that best fits your requirements.
If you like the look of both plugins, then there are 3 reasons to choose BeRocket’s WooCommerce AJAX Products Filter:
- It’s slightly better quality and easier to set up. This plugin works WooCommerce Product Table straight out of the box – just follow the setup instructions below. In contrast, WOOF’s filter plugin requires a separate connector plugin and the instructions are more fiddly.
- You can use BeRocket’s AJAX filter widgets with WooCommerce Product Table. WOOF’s plugin does have AJAX filters, but only the non-AJAX version of WOOF’s widgets work with the product table. This means that the page will reload when someone chooses a filter. To minimize page reloads when you have multiple filters, you can add a ‘Filter’ button under all your filters. (Tip: Set ‘Autosubmit’ to ‘No’ on the plugin settings page.) Users can choose as many filters as they like, then click ‘Filter’ to reload the page just once. That’s much more customer-friendly than multiple page reloads. However, it’s not AJAX – whereas BeRocket’s AJAX filters do work with product tables.
- WOOF’s filter plugin does not work with lazy load in WooCommerce Product Table. You’ll need lazy load if you have 100’s or 1,000’s of products, so this is a major limitation for some stores. BeRocket’s AJAX filter plugin fully supports lazy load.
If you’re happy with these limitations, then both plugins are good options for adding WooCommerce AJAX filter widgets to your product tables. Or if these are a problem for you, then you need to use the BeRocket plugin.
Next, I’ll tell you how to set up both filter plugins.
Compatible plugin 1: WooCommerce AJAX Products Filter by BeRocket
WooCommerce AJAX Products Filter by BeRocket is a fantastic filter plugin with many features. You can add a wide range of customizable AJAX filter widgets. Position them either above the product table or in the left or right sidebar.
Before we start, I should mention that there are some limitations to using BeRocket’s filters with product tables. Make sure you’re ok with these before you start following the setup instructions below.
- It’s not possible to use the filters as a standalone element on a page. For example, it’s not possible to create a page with AJAX filters and then load a product table after the customer has made their selections. Instead, the customer must first load all the products in a table, and then refine this list using the AJAX filter widgets. (Tip: You can create links that will take customers directly to a pre-filtered product list. To get the link, filter the table and copy the URL. For example, https://compatibility.barn2.co.uk/wooajaxfilter/?filters=product_cat|color will pre-filter the table for Blue products in the Clothing category.) (Note: The WOOF filter plugin has this limitation too.)
- The filters don’t work with the caching option in WooCommerce Product Table. You need to disable this, either on the product table plugin settings page or by adding
cache="false"to the shortcode data options when you set up the connector plugin (instructions below). (Note: The WOOF filter plugin has this limitation too.)
So, is it worth using?
Overall, I’d say that BeRocket’s WooCommerce AJAX Products Filter plugin is an excellent opportunity to add more advanced filters to your product tables.
Next, I’ll show you how to set up product tables with BeRocket’s AJAX filter widgets. I’m assuming that you already have a WordPress website with WooCommerce installed. Run the WooCommerce Setup Wizard and start adding products.
Step 1. Set up WooCommerce Product Table
- Get WooCommerce Product Table and install it using the instructions in your email confirmation. This includes activating your license key, which is needed for the plugin to work.
- Also on the plugin settings page, go through all the options and choose how you want your product tables to work. Don’t tick the caching option, as this doesn’t work with the AJAX filters.
- Now create a new page and make sure it has a left or right sidebar. Your theme probably has a template for this – if not, reach out to your theme company and ask. (If you want to add filters above the product table instead, I’ll tell you how in a minute.)
- Click the ‘Insert product table’ toolbar button:
- This will add a
[product_table]shortcode to the page. If you want to list specific products only, use these instructions to edit the shortcode.
- Repeat steps 3-5 to add as many pages as you like, each with a different product table.
Keep reading to discover how to use the BeRocket plugin to add AJAX filters to your product tables.
Step 2. Set up BeRocket WooCommerce AJAX Products Filter
- Get the BeRocket filter plugin and install it on your WordPress site.
- When you activate the plugin, you’ll be taken through a setup wizard. Ignore this and go back to the main WordPress Dashboard – I find it easier to access the plugin settings pages directly.
- Go to BeRocket > Product Filters. Choose your filter settings as needed. The ones to be aware of are on the SEO tab:
- You must enable the “SEO friendly URL’s” option.
- DO NOT enable the “Nice URL” option.
- Next, you need to create some AJAX filters and choose which pages they will appear on. Go to Products > Product Filter Groups and create a Group. A ‘Group’ is basically all the filters that you want to display together above or alongside the product table. Use the official documentation to add all the AJAX filters to the Group. In the ‘Conditions’ settings for the Group, select the page(s) where you added your product table(s) in the previous section. This tells the AJAX filter plugin to display the filters on the correct pages.
- Next, go to Appearance > Widgets and drag the ‘AAPH Filters Group’ widget to your sidebar. Select the Group from the widget settings and Save it.
Finally, view the page. You will see your product table, complete with WooCommerce AJAX filter widgets in the page sidebar.
How to add AJAX filter widgets above the product table
To add a single filter widget:
- Go to Products > Product Filters.
- This page lists all the available filters. You’ll see shortcode in the right hand column next to each filter (e.g.
[br_filter_single filter_id=239]). Copy this to your clipboard.
- Next, edit the page containing your product table. Paste the filter shortcode directly above the
To add a group of filter widgets:
- Go to Products > Product Filter Groups and create a Group.
- Click on the Group of filters that you want to show above the product table. Copy the shortcode in the right hand column (e.g.
[br_filters_group group_id=134]). (Tip: If you’re using a Group in this way, use the ‘Show inline’ option to make them sit next to each other instead of stacking vertically. This will take up less space.)
- Next, edit the page with your product table. Paste the filter group shortcode above the
Both methods will add AJAX filters directly above the product table.
Tip: Depending on your theme, you may need to do some CSS styling to position the filters exactly where you’d like them above the table. If you don’t know how to do this, then we recommend posting a job on Codeable. It’s a great way to find WordPress experts for small customizations like this.
Compatible plugin 2: WooCommerce Products Filter by WOOF
WooCommerce Products Filter by WOOF is a popular filter plugin with a wide range of options and features. WOOF have released a connector plugin that integrates their filter widgets with WooCommerce Product Table. You can use this to create product table views with instant filter widgets. The filters can appear above the product table or in the left or right hand column.
- You can only use product tables with WOOF filter widgets on standard WordPress pages. The WOOF bridging plugin provides a simple shortcode which you can add to any page. This adds a product table with the WOOF filter widgets above or in the sidebar. It’s not possible to add product tables with WOOF filters to your main WooCommerce shop page or product category pages. (Note: This is not a limitation with the BeRocket plugin.)
- You can only filter an existing product table, after all the products have already loaded. For example, customers can’t select filters on a standalone page and then load a product table afterwards. Instead, the customer must use the filters to refine a list of already-visible products. (Tip: You can create links that will take customers directly to a pre-filtered product table. To get the link, filter the table and copy the URL. For example, producttable.barn2.co.uk/woof-ajax-filter-widgets/?swoof=1&product_cat=clothing will pre-filter the table for the Clothing category.) (Note: The BeRocket AJAX filter plugin has this limitation too.)
- When you use WooCommerce Product Table on its own, you can configure each table directly in the shortcode. This means that you can add multiple tables to your website, each one different. In contrast – when you create product tables with the WOOF plugin, you have to configure the options centrally on the settings page. This means that all your tables have to be identical, so you can only have 1 product table on your site. (Note: BeRocket’s AJAX filter does NOT have this limitation.)
- The filters work with the standard version of WooCommerce Product Table but not lazy load. (Note: The BeRocket AJAX filter plugin does NOT have this limitation.)
- The filters don’t work with the caching option in WooCommerce Product Table either. (Note: The BeRocket AJAX filter plugin has this limitation too.)
So, is it worth using?
Overall, I’d say that WOOF’s WooCommerce product filter plugin is an excellent way to extend the filters available in WooCommerce Product Table.
Use it if you want to add a product table to a single page of your site, with user-friendly WooCommerce filter widgets in the sidebar or above the product table.
Don’t use it if you want to create more than one product table with different options; or add product tables to the WooCommerce shop page or category archive templates.
Next, I’ll show you how to use the two plugins together. First, you need to set up both plugins individually. You can then follow the instructions to install the connector plugin and create a WooCommerce product table with quick non-AJAX filter widgets.
Step 1. Set up WooCommerce Product Table
Next, you need to install WooCommerce Product Table and WooCommerce Products Filter. It doesn’t matter what order you install these plugins, but let’s assume you’re installing Product Table first:
- Get WooCommerce Product Table and install and activate the plugin using the instructions in your confirmation email.
- Also on the plugin settings page, go through all the options and choose all the ones you want for your product tables. Do not tick the lazy load or caching options, as these don’t work with the WOOF filters.
That’s it for now, as you’ll create a product table when you set up the WOOF connector plugin in a minute.
Step 2. Set up WOOF WooCommerce Products Filter
- Get the WooCommerce Products Filter plugin and install it using the instructions in the documentation. There are also videos on how to set up the various filters.
- Use the documentation to configure the plugin settings as needed.
- Go to Appearance > Widgets and add the ‘WOOF – WooCommerce Products Filter’ width to the top of your main sidebar area. By default, this will appear on your product table page when you use the connector plugin, and also on the main WooCommerce shop page and category pages (which will use the default layout instead of product tables).
Step 3. Set up the Product Table connector
Now, it’s time to set up the bridging plugin which integrates WooCommerce Product Table with WooCommerce Products Filter. WOOF have implemented this in a non-standard way, so you must follow these instructions exactly. (Also see the step-by-step screenshots below.)
- First, go to woocommerce-filter.com/extencion/woocommerce-product-table and click the orange Download button.
- Go to WooCommerce > Settings > Products Filter and go to the Advanced tab. Click the ‘Options’ tab within this, and scroll to the bottom until you find the ‘Custom extensions folder’ option. Add a folder name called something like woof_extensions and Save. This will create a folder for WOOF plugin to store the connector plugin.
- Still on WooCommerce > Settings > Products Filter, now go to the Extensions tab. Click the ‘Choose an extension zip’ button and select the extension that you downloaded in Step 1. This will upload the connector plugin to the folder you specified in step 2. You should see a ‘Success’ message, but on several of my tests, it displayed a loading screen forever and I had to refresh – so do this if needed.
- Return to the Extensions tab and you will now see ‘WooCommerce Product Table connector’ in the ‘Custom extensions installation’ section. Tick the box to activate this plugin, scroll down and Save.
- Go back to the Extensions tab and click ‘EXT-APPLICATIONS OPTIONS’. Now, you will see a ‘Shortcode Data’ box. This is where you need to configure your product table using the options from the WooCommerce Product Table knowledge base. You need to add the shortcode options only without the rest of the product table shortcode, as described below.
Step 4. Add the product table shortcode options with WOOF
If you’ve already selected all the options you need on the Product Table plugin settings page, then you can ignore this bit. Your product tables with WooCommerce filter widgets will automatically use the options you selected on the settings page.
Or if you have multiple product tables on your website, then you can also control the options directly in the connector plugin settings. If you need to do this, keep reading this section.
Let’s say you want to create a product table with columns for name, short description, price, and add to cart button. You want to sort the table by name. By following the instructions in the knowledge base, you would create this shortcode:
[product_table columns='name,short-description,price,add-to-cart' sort_by='name']
The WOOF connector plugin will add the first and last parts of the shortcode, so you just need to enter this into the Shortcode Data box:
- Now Save your changes. (Warning: The shortcode examples in the WooCommerce Product Table knowledge base use double quotation marks (e.g.
columns="name"). Due to a limitation in the WOOF connector plugin, you need to enter single quotation marks in the Shortcode Data box (e.g.
columns='name'), otherwise the settings will not save correctly. We have asked WOOF to fix this, but for now please use single quotation marks.)
- Now go to a normal page in WordPress (Pages > Add New) and add the following shortcode –
[woof_products is_ajax=0 tpl_index=tpl_woo_table]– then save and view the page.
Step 5. How to show products from a specific category with the WOOF plugin
The WOOF connector plugin has a strange quirk, where you have to follow an extra step to show products from a specific category only. These are the 2 steps that you must follow:
- When you enter the shortcode options on the connector plugin settings page (see Step 5 above), enter
category='clothing'. Replace clothing with the name or ID of the WooCommerce product category you wish to display.
- When you add the WOOF shortcode to the page where you want to show the WooCommerce table with product filters (see Step 7 above), enter the following:
taxonomies=product_cat:73. Replace ’73’ with the category ID. For example, your WOOF shortcode might be:
[woof_products taxonomies=product_cat:73 is_ajax=0 tpl_index=tpl_woo_table]
Step 6. Now view your product table with WooCommerce filter widgets!
Finally, view the page. You will see a product table with the options you entered in step 6, and the WOOF filter widgets in the sidebar.
Test the WooCommerce product filter widgets and you will see the product table instantly update before your eyes! (Or if you set ‘Autosubmit’ to ‘No’, the table will update when you click the ‘Filter’ button under the widgets.)
Feel free to make any improvements to your product table options, WOOF filter plugin settings, and directly in the filter widget. Keep tweaking and testing until you’re happy with everything.
Troubleshooting tip: If nothing shows in the product filter widget, make sure you have added the ‘WOOF – WooCommerce Products Filter’ widget to your sidebar, and set up the WOOF plugin correctly. The filter widget will appear blank until you add some filters in WooCommerce > Settings > Products Filter > Structure (see documentation).
How to add WOOF product filter widgets above the WooCommerce table
So far, I’ve shown you how to add the WOOF WooCommerce filter widgets in the left or right sidebar. If you prefer, you can add the filters directly above the table within the main page content area. This is useful if you have a full-width page for no sidebar.
To add the filters above the table, just add the shortcode
[woof] before the main WOOF shortcode. For example, adding the following to the page will create the filters and product table shown below:
[woof][woof_products is_ajax=0 tpl_index=tpl_woo_table]
Where can I get support with the plugins?
With connector plugins, it’s always tricky to know who to contact for support:
Support with BeRocket’s WooCommerce AJAX Products Filter plugin
Support with WOOF’s WooCommerce Products Filter and the WooCommerce Product Table Connector plugin
Support with WooCommerce Product Table plugin
Search the knowledge base first, and contact Barn2 Media for support with creating your product tables if needed.
Troubleshooting tip: If you spot any problems or bugs with the product table, add a product table shortcode (see knowledge base) directly to a normal page and see if the problem appears there too. That will help you decide whether it’s an issue with the Product Table plugin (in which case you should contact Barn2 Media for support), or the WOOF/BeRocket plugin (which the filter plugin company can help you with).
I’d like to thank the teams at BeRocket and WOOF for integrating their WooCommerce AJAX filter plugins with WooCommerce Product Table.
Are you using WooCommerce Product Tables with AJAX filter widgets? Which plugin did you choose? Did you find it easy to set up, and how could it be improved? We’d love to hear from you!