WooCommerce Docs

Documentation, Reference Materials, and Tutorials for your WooCommerce products

Search

Ajax-Enabled, Enhanced Layered Navigation

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.

Note: The Ajax Layered Nav widget only displays on product archive pages, and only on pages that contain relevant product listings. It will not appear on single product pages, as there is no content to filter.

Installation ↑ Back to Top

To install this extension, you can follow Installing and Activating, or use below steps to do a manual installation.

  1. Download the extension from WooCommerce.com Downloads.
  2. Upload the plugin folder to your /wp-content/plugins/ directory.
  3. Activate ‘WooCommerce Advanced Ajax Layered Navigation’ from the Plugins menu within WordPress
For support and one-click updates, you’ll also need to install our WooCommerce Helper plugin.

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.

Color Picker

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.

[caption id="attachment_151108" align="alignnone" width="267"]Widgets - Color‹ WordPress — WordPress Color Picker Display in Widget Administration Area[/caption]

[caption id="attachment_151105" align="alignnone" width="281"]Ajax Color Selector - Frontend Color Picker Display in Front End (Customer View)[/caption]


[divider_flat]

List

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.

[caption id="attachment_151110" align="alignnone" width="312"]Widgets ‹ WooCommerce — WordPress List Display in Widget Administration Area[/caption]

[caption id="attachment_151106" align="alignnone" width="296"]Products - List - Color WordPress List Display in Front End (Customer View)[/caption]


[divider_flat]

Checkbox

Selecting Checkbox will present the attributes as an unordered list of checkboxes.

[caption id="attachment_151111" align="alignnone" width="271"]Widgets Checkbox ‹ WordPress — WordPress Checkbox Display in Widget Administration Area[/caption]

[caption id="" align="alignnone" width="282"]Products - Size Checkbox WordPress List Display in Front End (Customer View)[/caption]


[divider_flat]

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.

[caption id="attachment_151109" align="alignnone" width="264"]Widgets - Size ‹ WordPress — WordPress Size/Amount Selector Display in Widget Administration Area[/caption]

[caption id="attachment_151104" align="alignnone" width="308"]Products Size - tags WordPress Size/Amount Selector Display in Front End (Customer View)[/caption]

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.

Widgets ‹ filters WordPress — WordPress

Products -active filters WordPress

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 AND or OR.

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

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

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?

One of the most common reasons the extension won’t work as expected is because sites have a Javascript error that’s being introduced by the theme and/or another plugin. Unfortunately, if the errors higher up than the Ajax Layered Navigation extension, it can prevent the Javascript for the extension from loading.

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?

Ajax Layered Navigation is powered by jQuery, an extremely popular Javascript library. It has been reported by multiple users that they’ve experienced slowdowns in Internet Explorer (versions 9, 10, and 11) as well as 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:

add_filter('sod_ajax_layered_nav_containers', 'aln_add_custom_container');
function aln_add_custom_container($containers){
$containers[] = '#your-id';
$containers[] = '.your-class';
return $containers;
}

Product Container

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.

add_filter('sod_ajax_layered_nav_product_container', 'aln_product_container');
function aln_product_container($product_container){
//Enter either the class or id of the container that holds your products
return '.your-class';
}

Back to the top