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 more easily and is particularly well-suited for stores that have a lot of products with a number of attributes. Not only does the layered navigation use ajax calls to reload content on the page, but the extension also provides a number of additional user-interface elements for the layered navigation, such as color swatches, size selectors and checkboxes.
This extension has been developed to work with as many WooCommerce themes as possible with independent css that should not be reliant on certain elements that might vary from theme to theme.
Installation ↑ Back to Top
- Unzip and upload the plugin’s folder to your /wp-content/plugins/ directory or use the WordPress Plugin Installer from the WordPress Admin.
- Activate the extension through the ‘Plugins’ menu in WordPress
- Once installed, you will see a 2 new widgets called ‘WooCommerce Ajax Layered Nav’ and ‘WooCommerce Ajax Layered Nav Filters’ on the Widgets page.
- Settings for the extension are controlled on a per-instance basis at the widget level.
Usage ↑ Back to Top
To learn more about how to add Widgets please see our tutorial here: How to Add Widgets
After installing and activating the extension you will have 2 new widgets available in your WordPress Widgets Screen called “WooCommerce Ajax Layered Nav” and “WooCommerce Ajax Layered Nav Filters”. We’ll deal with the use of each separately.
WooCommerce Ajax Layered Nav Widget
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, with the main difference being that you can pick between the following display options:
Just like the Layered Navigation, the first thing that you need to do is pick the attribute you want to use for that widget instance. Then you can select the display type, which will now be covered.
Choosing Color Picker will list each attribute value and an input field with color picker. 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, prefrixed with the # sign. Otherwise, you can use the color picker to select the value and it will input the correct hex code for you.
Choosing List will just output the attributes as an unordered list on the front. This display is the same as the default WooCommerce Layered Nav, just 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. This display is particularly useful if the widget’s query is set to “OR”. Remember, if you set the query to “Or”, you can select multiple attributes, which in this scenario would mean being able to check multiple boxes.
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.
Size / Amount Selector front-end display
After you’ve selected the display type, the last option to set is the query type. The two options are “And” / “Or”. To learn more about the difference, check out the documentation for the WooCommerce Layered Nav found here: WooCommerce Layered Navigation. Basically, “And” lets you select ONE attribute, while “Or” lets you select MANY attributes for filtering on the frontend.
To learn more about how to setup product Attributes, please see the documentation here: Managing Product Attributes . For help trouble-shooting display, please see the “Troubleshooting” section below.
WooCommerce Ajax Layered Nav Filters Widget
One of the latest updates to the Ajax Layered Nav extension has been the inclusion of the “WooCommerce Ajax Layered Nav Filters Widget.” You may have already seen the same widget for the default WooCommerce Layered Navigation. Essentially, what this widget and the standard widget do, is let you display a list of the selected filters anywhere in your theme that supports widget areas.
There are no options to speak of for this widget, and just like the non-ajaxed widget of the same name that ships with WooCommerce core, by placing the widget in a widget area, you’ll generate a list of ALL filters that have been applied. Clicking an applied filter from within this widget on the frontend will remove the filter from the query. This is particularly useful if you want to provide the user with an area to see ALL of the filters they’ve selected and provide them with the ability to remove them from a centralized spot.
FAQ ↑ Back to Top
Can the Ajax Layered Nav be used with Categories?
Like the default WooCommerce Layered Nav, the Ajax Layered Nav only works with product attributes.
Where can I put the Ajax Layered Nav widget?
The Ajax Layered Nav widget works on any page that includes the shop loop. If you’re unsure if the ajax layered nav will work where you want it to and want to try check it before purchase, you can always use the default WooCommerce Layered Nav widget. If that widget appears and works in the area you want, then the Ajax Layered Nav will as well.
Trouble-shooting ↑ 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