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 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

Please note: The Ajax Layered Nav widget will only display on product archive pages, and only on pages that contain relevant products. The Ajax Layered Nav will not show up on a signle product page. e.g. If you add Ajax Layered Nav for colour and size, but you’re viewing a cateogory of products without colour or size attributes, then the widget will not be displayed.

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.

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.

Color Picker

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.

Widgets - Color‹ WordPress — WordPress

Color Picker  admin setup

Products - Color   WordPress

Color Picker  front-end display 

List

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.

Widgets ‹ WooCommerce — WordPress

List admin setup

Products - List - Color WordPress

List  front-end display 

Checkbox

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.

Widgets Checkbox ‹ WordPress — WordPress

Checkbox  admin setup

Products - Size Checkbox   WordPress

Checkbox  front-end display 

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.

Widgets - Size ‹ WordPress — WordPress

Size / Amount Selector  admin setup

Products   Size - tags WordPress

Size / Amount Selector  front-end display 

Query Type

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.

Widgets ‹ filters WordPress — WordPress

Products -active filters WordPress

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

Javascript Errors

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

To debug, you can use either Chrome’s console to view any javascript errors. If you’re unfamiliar with Google Chrome browser or don’t have it available, you can start by deactivating other plugins (other than woocommerce) until the ajax layered nav works. If you’ve determined that there aren’t any javascript errors interfering with the functionality of your site, then you probably need to make your theme compatible with the extension, which is covered in the next section.

Theme Compatibility

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