New! Create a WooCommerce Product Table with AJAX Filter Widgets
Our colleagues at WOOF have released a connector plugin that integrates their WooCommerce Products Filter plugin with our WooCommerce Product Table plugin. You can use this to create product table views with instant AJAX filter widgets.
This is a step-by-step guide on how to use the connector plugin and set it all up.
Do I need AJAX filter widgets?
There are lots of different ways for customers to search and filter the data in your WooCommerce product tables. The following options come built into the plugin. They are all optional and you can show or hide them as needed:
- Keyword search box.
- Sorting by any column.
- Filter dropdown lists above the table – these let you filter by product category, tag, custom taxonomies, attributes or variations. The filter dropdowns work instantly using AJAX.
- Filter widgets which replicate the ones that come with WooCommerce itself. These can be added to any widgetized area, such as a left or right sidebar. The page reloads when you perform a filter. You can filter by product attributes, rating, or price.
You can test the built-in filter options on our demo page.
How does the WOOF filter plugin build on this?
The WOOF WooCommerce Products Filter plugin adds extra options for filtering the product table. It uses AJAX, which filters the products instantly without a page reload. As well as being able to filter by product attribute, price and rating, you can create other types of filter. This includes filtering by category, custom product attributes, tags, and custom taxonomies.
Before you start, there are 2 main limitations to be aware of:
- You can only use WooCommerce product tables with the WOOF AJAX filter widgets on standard WordPress pages. The WOOF bridging plugin provides a simple shortcode which you can add to any page. This automatically adds a product table to the page, with the WOOF filter widgets in the sidebar. It’s not possible to add product tables with the AJAX filter widgets to your main WooCommerce shop page or product category pages. You can still add product tables to the shop and category templates with the built-in filters, but the WOOF filters can only be used with product tables on standard WordPress pages.
- Since the AJAX filters only work on a normal page with a product table, you can’t use the filters as a standalone element on a page. For example, it’s not possible to create a page with the WOOF filters and then load a product table after the customer has selected their filters. Instead, the customer must first load a page which already contains the product table. Once the table has loaded, they can refine the list of products using the AJAX filters. (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.)
- As you can see in the knowledge base, WooCommerce Product Table comes with dozens of options for configuring the product tables. 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 connector plugin, you have to configure the table options centrally on the settings page. This means that all your tables have to be identical, so there’s no point having more than one.
- The Ajax product filters work with the standard version of WooCommerce Product Table but not lazy load.
So, is it worth using?
Overall, I’d say that WOOF’s WooCommerce AJAX 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 WooCommerce AJAX filter widgets in the sidebar.
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 AJAX filter widgets.
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. 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 all the ones you want for your product tables.
That’s it for now, as you create a product table when you set up the WOOF connector plugin in a minute.
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).
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.
How to add the product table shortcode options
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 AJAX 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.
How to show products from a specific category
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 AJAX 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]
Now view your product table with WooCommerce AJAX 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 AJAX filter widgets and you will see the product table instantly update before your eyes!
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 AJAX 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 AJAX 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 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 plugin and connector (which WOOF can help you with).
I’d like to thank the team at WOOF for creating the connector plugin. Several of our customers have previously told us they would like to use the two plugins together, and we were pleased to discover this extension.
Are you using WooCommerce Product Tables with AJAX filter widgets? Did you find it easy to set up, and how could it be improved? We’d love to hear from you!