WooCommerce AJAX Filters - advanced AJAX product filters plugin for WooCommerce. Add unlimited filters with one widget.
Features:
- AJAX Filters, Pagination and Sorting!
- Unlimited Filters
- Multiple User Interface Elements
- SEO Friendly Urls ( with HTML5 PushState )
- Filter Visibility By Product Category And Globals.
- Accessible through shortcode
- Filter box height limit with scroll themes
- Working great with custom widget area
- Drag and Drop Filter Building
- And More...
Demo
http://woocommerce-product-filter.berocket.com
How It Works:
Step 1:
- First you need to add attributes to the products ( WooCommerce plugin should be installed and activated already )
- Go to Admin area -> Products -> Attributes and add attributes your products will have, add them all
- Click attribute's name where type is select and add values to it. Predefine product options
- Go to your products and add attributes to each of them
Step 2:
- Install and activate plugin
- Go to Admin area -> Appearance -> Widgets
- In Available Widgets ( left side of the screen ) find AJAX Product Filters
- Drag it to Sidebar you choose for it
- Enter title, choose attribute that will be used for filtering products, choose filter type,
choose operator( whether product should have all selected values (AND) or one of them (OR) ),
- Click save and go to your shop to check how it work.
- That's it =)
Shortcode:
- In editor
[br_filters attribute=price type=slider title="Price Filter"]
- In PHP
do_shortcode('[br_filters attribute=price type=slider title="Price Filter"]');
Shortcode Options:
attribute
(required) - product attribute, eg price or length. Don't forget that woocommerce adding pa_ suffix for created attributes.
So if you create new attribute jump
its name is pa_jump
type
(required) - checkbox, radio, slider or select
operator
- OR or AND
title
- whatever you want to see as title. Can be empty
product_cat
- parent category id
cat_propagation
- should we propagate this filter to child categories? set 1 to turn this on
height
- max filter box height. When height is met scroll will be added
scroll_theme
- pretty clear name, scroll theme. Will be used if height is set and real height of box is more
Advanced Settings (Widget area):
- Product Category - if you want to pin your filter to category of the product this is good place to do it.
Eg. You selling Phones and Cases for them. If user choose Category "Phones" filter "Have Wi-Fi" will appear
but if user will choose "Cases" it will not be there as Admin set that "Have Wi-Fi" filter will be visible only on
"Phones" category.
- Filter Box Height - if your filter have too much options it is nice to limit height of the filter to not prolong
the page too much. Scroll will appear.
- Scroll theme - if "Filter Box Height" is set and box length is more than "Filter Box Height" scroll appear and
how it looks depends on the theme you choose.
Plugin Settings:
- Plugin settings can be found in admin area, WooCommerce -> Product Filters
- "No Products" message - Text that will be shown if no products found
- "No Products" class - Add class and use it to style "No Products" box
- Products selector - Selector for tag that is holding products
- Sorting control - Take control over WooCommerce's sorting selectbox
- SEO friendly urls - url will be changed when filter is selected/changed
- Turn all filters off - If you want to hide filters without losing current configuration just turn them off
- JavaScript callback functions: Before, On and After Update. Use it for better implementation into custom/specific theme