The ajax-enabled, layered navigation extension for WooCommerce provides a richer user-experience beyond the standard WooCommerce Layered Navigation. It is a drop-in replacement that will help your customers find the products they’re looking for faster and is well-suited for stores with a large number of products using the same attributes, such as size, color, etc. In addition to using Ajax calls to reload the content on the page, the extension adds a number of user interface elements and options like color swatches, selectors, and checkboxes.
Installation ↑ Back to Top
To install this extension, you can follow Installing and Activating, or use below steps to do a manual installation.
- Download the extension from WooCommerce.com Downloads.
- Upload the plugin folder to your
- Activate ‘WooCommerce Advanced Ajax Layered Navigation’ from the Plugins menu within WordPress
After installing and activating the extension you will have 2 new widgets available in your WordPress Widgets Screen – “WooCommerce Ajax Layered Nav” and “WooCommerce Ajax Layered Nav Filters”.
To learn more about how to add Widgets please see our tutorial here: How to Add Widgets.
WooCommerce Ajax Layered Nav Widget ↑ Back to Top
When you drop a new instance of the WooCommerce Ajax Layered Nav in a widget area, you’ll be presented with what looks like the standard WooCommerce Layered Navigation widget. You’ll first select the global attribute you want to use for that instance, and then choose from the display options below.
The Color Picker display will show each attribute in color swatches. If you know the hex color code that you’d like to use for each attribute value, you can manually enter it in the input field, prefixed with
#. Otherwise, you can use the color picker to select the value and it will input the correct hex code for you.
In the example below, we have a Global Attribute called
color, with three options: blue, red, and yellow.
The List display will output the options as an unordered list on the front end customer display. This display is the same as the default WooCommerce Layered Nav, but with ajax callbacks. The styling for the list will use the same styling as the standard WooCommerce Layered Nav.
Selecting Checkbox will present the attributes as an unordered list of checkboxes.
Size / Amount Selector
The Size / Amount Selector will list the attributes along with an input field where you can enter a short label for use on the frontend. These labels are then presented as a series of inline tags from left to right on the frontend. You’ll see this on a lot of clothing sites where you can filter by shorthand for different sizes such as S, M, L, XL etc.
WooCommerce Ajax Layered Nav Filters Widget ↑ Back to Top
In addition to the Ajax Layered Navigation Widget, you will also see the WooCommerce Ajax Layered Nav Filters Widget. This widget displays options for all of your categories, listing all attributes that apply – your user would then select the attributes they want to filter by. This would dynamically change the content so only products that fit within the user’s search criteria are shown.
Query Type ↑ Back to Top
After you’ve selected the display type, you need to select the query type. The Query Type determines how the widget is used, and can be set to
To demonstrate the difference, let’s assume that we’re selling t-shirt designs in the following colors: red, orange, yellow, green, blue, indigo, and violet. We also sell each t-shirt in the following sizes: extra small, small, medium, large, extra large.
AND allows for a single attribute selection. If both color and size used “AND”, a customer could select ‘small’ and ‘orange’ – only shirts with size small in orange would appear. If the customer then selected ‘red’, the display would change to shirts with ‘small’ and ‘red’ in stock – orange would be temporarily discarded.
OR allows for a multiple attribute selection. If the customer selected ‘small’ and ‘orange’, again we would see the same orange shirts with small available. However, when a customer then selected ‘red’ in addition to orange, both colors would display.
To learn more about how to setup product Attributes, please see the documentation here: Managing Product Attributes.
FAQ ↑ Back to Top
Why aren’t the dynamic filters in the widget update the products?
Issues like this may be caused by either a conflict with your theme or with another plugin. The best way to test is for you to temporarily switch back to the WordPress Twenty Sixteen Theme and disable all plugins except for WooCommerce and the Ajax Layered Navigation extension. If that resolves the issue, then slowly re-enable features until you find the one that’s causing the conflict.
Why is the filter is exceptionally slow on Internet Explorer and Microsoft Edge?
Unfortunately, this is an issue that is well documented, but there isn’t a fix at this time. Although Ajax Layered Navigation and jQuery are both optimized for all browsers, Microsoft browsers do not handle it as expected, resulting in speed issues. Until Microsoft fixes the issue in their browsers, there is nothing that we can do to fix any issues regarding filter speed.
Theme Compatibility ↑ Back to Top
We’ve taken care to make sure the Ajax Layered Nav extension adheres to WooCommerce core functionality and doesn’t override anything. The extension utilizes the default css ids / classes used by the default WooCommerce template files. If your theme overrides these templates and doesn’t maintain the same ids or classes, the extension may not work. To ensure compatibility, we’ve built in a series of filters so that pretty much any theme can be made compatible with this extension WITHOUT altering the theme OR WooCommerce. To add your theme’s ids and/or classes to the extension, here’s a list of the filters you’ll need to use:
Each of the filters that we will walk you through below needs to be placed in your theme’s functions.php file. Every theme should have a functions.php file.
Containers to Update
By default, the extension will update certain containers on the page after the ajax refresh. To add non-standard containers to the array that gets updated, you can use the following filter from within your theme’s functions.php:
$containers = '#your-id';
$containers = '.your-class';
In addition to the containers that get updated, the extension needs to know which container on the page holds the products. Generally products on the shop page are in a section with id “products”. If this isn’t the case with your theme, then you’ll need to use the following filter to return either the id OR class for the Product Container in your theme.
//Enter either the class or id of the container that holds your products