Woocommerce AJAX Product Filter

Advanced Woocommerce product filtering by category, attribute, meta

Created: 12/04/2013
latest Update: 01/08/2013
By: Farhad Ahmadi
Email: ahm.farhad@gmail.com

WooCommerce AJAX Product Filter (or WooCommerce AJAX Layered Navigation) adds advanced product filtering to your WooCommerce shop. It provides rich Interface for users to filter products by custom attributes, hierarchical categories, WooCommerce product meta fields, WordPress custom post meta fields, custom taxonomies,... at realtime.

You can build your own store advanced filters with drag and drop in a minute. There is no limit on the number of filters you add to shop; so customers can filter products by nested categories, price, dimension, size, color, weight, rate, sales count,... unlimited more product attributes in three types of UI: Slider, Drop Down and checkbox list. Filters can even be applied on product search results. So you can search and apply filters on your products results.

Filter results are loaded via AJAX at realtime but don't worry about SEO Woo AJAX Product Filter uses HTML5 PushState and for old browsers HashTag fallback.

This plugin is best for stores with a lot of products and items or multiple product attributes.

Thank you for purchasing my plugin. If you have any questions that are beyond the scope of this help file, please feel free to contact. Thanks so much!

Features

Add Unlimited Filters: There is no limitation, let the customers filter all the way through their needs.
Three Types of UI: Slider, Drop Down & Checkbox (Toggle effect).
Reset All Filters: Users can reset all filters to default by a single click.
Merge Sidebars: Merge sidebars to save space of shop sidebar.
Filter by Color, Pattern and Image: Assign an image for each attribute so users can see image instead of text for products filtering.
Search Engine Optimized (SEO friendly): Filtered products are indexable and users can share links of filtered results.
HTML5 PushState & HTML4 HashTag Fallback: Best experience in modern browsers beside supporting old browsers.
Cross Browser Compatibility: AJAX loading, PushState,... has been test with all major browsers old versions to latest versions.
Unlimited Filter for Specific Attributes archive/Categories archive: If you sell different products with different attributes this feature is for you. By using this feature selected categories or selected attributes can have their own filters without affecting the rest of the shop.
Sidebar, Shortcode and PHP function generator
AJAX Loading Results: Users can see filtered results at real time.
Sort by AJAX: Sort and change order of products by 6 parameters and see results at real time.
Drag and Drop Filter Building: Shop admin can drag and drop unlimited widgets and build filters in a minute, each widget with its own different settings.
Auto Blends With Shop Theme: Automatically adapts with your shop theme styling so you need no styling.
Hierarchical Category Navigation: Users can navigate through hierarchical categories; eg: Clothing > Women > Outwear > Jacket.
Multiple Categories/Attributes Filtering: Users can filter product by selecting multiple categories and multiple attributes at the same time (Supports "AND", "OR" Parameters)
Built with WordPress Best Practices If a task has multiple approaches the best one is selected. E.g: Product Filtering functionality only activates at WooCommerce area not everywhere, this makes the plugin fast and small footprint.

Installation

Unzip the downloaded file from CodeCanyon, This file contains the actual plugin: woocommerce-product-filter-plugin.zip
Open wordpress administration area and choose from plugins menu "Add New"

In the Add New Plugin section click on upload

In the upload section browse for woocommerce-product-filter-plugin.zip and click on "Install Now" button:

Wait to complete plugin installation, then click Activate Plugin

Widgets

After installation, widgets are ready to use. "Woocommerce AJAX Product Filter" installs 9 widgets:

Product Filter by Attribute:

By using this widget you can filter products by attributes. Each shop has its own different attributes, WooCommerce products attributes are listed in:
WordPress admin > Products > Attributes
You can create unlimited attributes for products and use this plugin to filter by them.
Product Filter by Image Attribute:

By using this widget you can filter products by images instead of text. If you want to filter by color just create a small image filled with color and use this widget., WooCommerce products attributes are listed in:
WordPress admin > Products > Attributes
Product Filter by Custom Taxonomy:

By using this widget you can filter products by custom taxonomies. You need to know the taxonomy name which is created by you or a third party plugin.
Product Filter by Category:

By using this widget you can filter products by categories. Each shop has its own different categories and sub-categories, WooCommerce products categories are listed in:
WordPress admin > Products > Categories
You can create unlimited categories for products and use this plugin to filter by them.

This widget has a special feature: AJAX hierarchical category navigation which mean users can filter and navigate through hierarchical categories;
eg: Clothing > Women > Outwear > Jacket.

This plugin supports unlimited levels of nested categories and you can choose a custom category as parent.
Product Filter by Multiple Categories:

By using this widget you can filter products by multiple categories the same time (Non Hierarchical).
Multiple categories can be combined with AND and OR operators.

WooCommerce products categories are listed in:
WordPress admin > Products > Categories
Product Filter by Meta:

By using this widget you can filter products by WooCommerce custom meta fields. Currently supported self-explanatory metas are:
- Rate
- Price
- Weight
- Total Sales
- Length
- Width
- Height

Product Filter by Custom Meta:

By using this widget you can filter products by non-native WooCommerce products meta.

It supports range slider UI. You need to enter the custom meta name into widget options.

You can add/edit/delete custom fields from product edit page. Custom fields that are created by third party plugins are also supported.

Product Filter Reset Button:

As the name indicates, this widget enables users to reset all filters with a click.
Product Filter Order:

By using this widget you can change products order by multiple values (using AJAX).

Currently supported self-explanatory parameters are:
- Default sorting
- Sort by popularity
- Sort by average rating
- Sort by newness
- Sort by price: low to high
- Sort by price: high to low
This widget uses WooCommerce core sorting so if WooCommerce introduces a new way of sorting you will get it.

Widgets Options

Widgets have some common settings:

Display Type: Select the type of user interface for the filters. There are three types of UI available:
- Slider: Lets you narrow down the list of shown products by selecting minimum and maximum amount.
- List: Lets you select one or more item to narrow down the list of shown products.
- Dropdown: Lets you select one item from a list to narrow down the list of shown products.

Title: The main title for widget.

Sub Title: The title used for current filter.

Query Type: Defines how multiple selections are mixed.
- AND: If a user selects two or more attributes, only products with match both attributes will be returned.
- OR: If a user selects two or more attributes, products which match either attribute will be returned.

Range Template: In slider filter, this template is used to display minimum, maximum range of selected amounts
- %s means selected minimum value
- %e means selected maximum value

Step: In slider filter, determines the size or amount of each interval or step the slider takes between the min and max

Widget open/close: To save some space between filters you can control opening and closing wisely. You can group filters by printing first opener and printing last closer.
- Print Widget Opener: Check this item to pring HTML code of widget opening.
- Print Widget Closer: Check this item to pring HTML code of widget closing.

Minimum Value: The minimum value of the slider
Maximum Value: The maximum value of the slider

Upload Image

Product Filter by Image Attribute has a special uploader field. You can upload any image to filter products by color, pattern, icon,...

Width/Height

Enter custom sizes for images, pixel unit is used.

Use Theme Toggle Effect

By enabling this option your website theme styles is used for the widget, you can uncheck it and customize the appreance by using custom CSS.

Options

To access options and configurations open WordPress administration area and choose from Settings menu "Product Filter"

Loader Image: Customize loading GIF animation.

Display No Products Message:: Some WooCommerce themes don't provide "No Products" action, Enabling this option fixes most of them.

Sidebars: By using this option you can generate unlimited sidebars and shortcodes. It's very useful tool if you want to:
- Get shortcodes or PHP functions.
- Use filters out of sidebar.
- Sell different items, with different attributes.
- Display certain filters at custom places of your shop.

New Sidebar

All Shop Archive: Dispalys sidebar in main shop archive, Shop tags and shop categories.
Category: Dispalys sidebar only in shop categories, you can select multiple categories to dispaly in.
Attribute: Dispalys sidebar only in shop attributes, you can select multiple or specific attributes to dispaly in.

If you select no categories / no attributes sidebar is dispalyed in all categories / all attributes.

Shortcode and Function

Shortcode and PHP functions are generated by sidebar option

A shortcode is a WordPress-specific code that lets you do things with very little effort.
The usage is pretty simple; put shortcode inside a post, page or..., the selected filters appears to users.

Copy sidebar generated shortcodes and PHP functions and use it.

By installing this plugin you can use shortcode inside WordPress native "text widget".

To make shortcode and function work, you should go to WordPress admin > Appearance > Widgets page and add Filters to generated sidebars.

If you want to use shortcode at sidebar make sure that you put it at your theme sidebars not this plugin generated sidebars.

AJAX Callback

This section is for advanced users. If you don't know what is this section for or don't know what are you doing; Get help from a developer or freelancer or a friend.

Before AJAX request:

Define a JavaScript function and name it wcsl_before_ajax E.G:

	function wcsl_before_ajax(){
		alert("ajax request is starting");
	}

wcsl_before_ajax

AJAX request successfully completed:

Define a JavaScript function and name it wcsl_ajax_done E.G:

	function wcsl_ajax_done(){
		alert("successful request");
	}

wcsl_ajax_done

AJAX request failed: wcsl_ajax_fail

Define a JavaScript function and name it wcsl_ajax_fail E.G:

	function wcsl_ajax_fail(){
		alert("request failed.");
	}

wcsl_ajax_fail

An AJAX request fired(Always): wcsl_after_ajax

Define a JavaScript function and name it wcsl_after_ajax E.G:

	function wcsl_after_ajax(){
		alert("after ajax request.");
	}

wcsl_after_ajax

Update custom theme areas: wcsl_on_update

Define a JavaScript function and name it wcsl_on_update E.G:

	function wcsl_on_update(){
		var my_areas = new Array();
		my_areas[0] = "p.woocommerce-result-count";
		return my_areas;
	}

wcsl_on_update

	function wcsl_on_update(){
		var my_areas = new Array();
		my_areas[0] = "div.woo-pagination";
		return my_areas;
	}

You need to put your Javascript function somewhere inside your theme. It can be in any .js file that is included into WooCommerce area.

Scroll page to top after a successful AJAX request.
Shorten products descriptions after a successful AJAX request.
Pushing a track event to analytics website after an AJAX request.
Hiding products' images loading indicator after a successful AJAX request.
Stopping AJAX loading UI and displaying a message after a failed AJAX request.
Update custom dynamic widget on each AJAX request.
Update and fix missing parts of each refresh.
...

Troubleshooting

URL changes but products list are not refreshed/ All products are show, filters don't make a change:

It seems your shop theme is missing some standard WooCommerce actions and hooks so plugin can't recognize page contents to refresh.
This plugin uses "woocommerce_before_shop_loop" and "woocommerce_after_shop_loop" actions to wrap products.

It means that you should print products between these two actions.

By following WooCommerce templating rules, these two action should be located at:
woocommerce/archive-product.php

There is a fallback for non-standard themes:
Some themes are not build with best practices so we provided a fallback:
These themes print products in an unordered list like this:
```
<ul class="products">
	<li>Product 1</li>
	<li>Product 2</li>
	<li>Product 3</li>
</ul>
```
This is also a rule for WooCommerce templating. (having a ul with products class)
If you don't know how to fix your theme just send a message to your theme support team and they can do it in a few minutes.

This plugin supports another way to refresh products:
Wrap products in a span tag with codenegar-shop-loop-wrapper class like this:
```
<span class="codenegar-shop-loop-wrapper">
	Product 1
	Product 2
	Product 3
</span>
```

After loading filtered products number of products are not updated:

When you need to update a part of page by applying each filter user wcsl_on_update callback.
You can update nearly any part of page.

Products images are not loaded/ loading indicators of products images don't become hidden:

Your shop theme is not AJAX ready. At page load it start to load images, when loading is completed it hides the loading indicators.
You can use wcsl_ajax_done AJAX callback to hide loading indicators or load images. You may need to get help from theme support team.

Filters don't appear at website:

Filters only appear at products archives (like Recent Products, Products Tags, Products Categories, Products Search,...) It's for WordPress performance.

"No products found" message is not displayed / products loading doesn't end:

Open plugin options, there is an option for that message. Enable it.

notes

This plugin uses your WooCommerce installation templates to generate UI of filters, so filters are blended as a part of themes nicely.

DropDown and Checkbox list filters use "WooCommerce Layered Nav" templates.

Slider filters use "WooCommerce Price Filter" templates.

To blend all filters to theme, don't group sliders with DropDowns and checkbox lists.

I have tested this plugin with my archive available WooCommerce themes, but there may be cases which needs some additional styling. If you need help let me know.

You can change any string or text that used in this plugin. Check this tutorial for more information.