Description

Woocommerce Ajax Layered Navigation

Product Description

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
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
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.
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:
Color Picker
List
Checkbox
Size / Amount Selector
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.

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.

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.

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.

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.