Since Uncode version 2.7.0, it is possible to implement Ajax Filters without using extra paid plugins with an advanced solution seamlessly integrated into the theme.

Filters are essential for any eCommerce website. Categories work fine when you have a few dozen products, but if your store has hundreds or thousands of products, customers will struggle to find what they're looking for. Furthermore, if people can't locate the things they want to buy quickly, they're more likely to leave your site and shop with one of your competitors. Filters give shoppers a way to rapidly uncover the products they want, and there's no better option for WooCommerce stores than Ajax Filters.

Using the Uncode native Ajax Filters, your customer can filter products by size, color, category, price, and more with Ajax-powered results. In addition, Ajax technology speeds up results viewing because it can filter posts without page reload. Uncode native Ajax Filters allow your users to filter products based on their needs (category, size, color, brand, price, and much more), and in a few seconds, they will find what they want to buy. A simple and powerful tool to address your customers toward their ideal product, speed up the purchase process, and improve the conversion rate of your online shop.

Please find here some examples:

• Ajax Filters Sidebar
• Ajax Filters Overlay
• Ajax Filters Horizontal

How it works

Working with configurable Ajax Filters requires that some components of Uncode are configured to work together 

1. A Posts module which will be the main element on which the filters will work;
2. That the Posts module is connected with a few Ajax Filters widgets (via Content Block for the advanced setup or via class for the simple setup);
3. Configuration of the Ajax Filters widgets as needed.

Posts with advanced Ajax Filters

As of Uncode version 2.7.0 within the Posts module, the new Filtering Ajax option is available when using the Grid and CSS Grid modes (recommended method);

To activate the new Ajax Filtering method, please open the Posts module Settings → Module tab → Filtering → Ajax, screenshot ;

Please also note that when activating Filters, of whatever kind these are, the related options have been moved to the new dedicated Filters tab for improved clarity and organization, screenshot ;

In the Filters tab, please find new settings that allow you to create different layouts ready to meet every need. Among essential options, please note:

• Ajax Filters: connect a Content Block that host the specific Ajax Filters modules;
• Layout Sidebar: use this option when filters are placed vertically in a sidebar that is sideways to the Posts module, screenshot ;
• Layout Overlay: Filters are placed vertically in a sidebar that overlays the Posts module, screenshot ;
• Layout Horizontal: Filters are placed horizontally above the Posts module, screenshot .
• Behavior: set if the sidebar is open on load, closed on load, or always opened.
• Sidebar: desktop and mobile position, gap, width;
• Menu: position above or inside the Posts loop, typography, uppercase;
• Toggle Filters: position and hide/show text;
• Active Filters and Clear All: visibility and position;
• WooCommerce Sorting: visibility and position, text and style;

Ajax Filter Content Block

As anticipated, filters are created via an external sidebar Content Block connected to the Posts module; this allows you to organize the necessary Ajax filters according to your functionality and design needs. In a nutshell, you can create your sidebar with filters as you see fit.

To create a new Ajax filter sidebar, please follow these simple steps:

1. Create a new Content Block and save it with a name of your liking, screenshot ;
2. Create a Row and insert a few Ajax Filter widgets inside it, screenshot ;
3. Configure the widgets options according to your needs (please refer more in the 'Ajax Filters module' chapter), screenshot ;
4. Connect the Posts module to the new Content Block containing the Ajax Filters, screenshot ;

Ajax Filter module

The Ajax Filter module is a new, highly configurable widget. With this module, it's possible to create advanced Ajax filters that you can use for your Shop, Blog, Pages, or Portfolio.

The options in the module help change the source, functionality, and design. Let's look below at the main options you can use to create your filters present in the General tab, screenshot :

• Title: display the widget title;
• Query: select the source. It can be a Taxonomy, Search, Date, Author, Price, Status, Ratings, or Sorting;
• Taxonomy: select from Post Categories, Post Tags, Product Categories, Product Tags, Portfolio Categories, and Page Categories;
• Attribute: select an attribute (from the one created);
• Type: set the primary look of the widgets; it can be Inherit, Text, Select, Checkbox, Label, and Logo (Image).
• Display: choose if display items in List, Inline, or Columns mode;
• Label: display the label;
• Count: display the number of items;
• Allow Multiple Selection: enable if the user can select multiple terms when filtering.

In the Style tab, please find options useful to define the visual aspect and behaviors, screenshot :

• Widget Style: required to enable advanced options;
• Desktop, Tablet, and Mobile Collapsed: activate to collapse or not the widgets on click or on load.
• Collapse Icon: choose from the chevron or plus sign;
• Remove Separator: remove the separator between the title and content;
• Title Typography: use the default or inherit from the Column typography:

Let's look at some use cases below:

• Ajax Filters Categories, screenshot ;
• Ajax Filter Colors (custom attribute), screenshot ;
• Ajax Price Filter, screenshot ;
• Ajax Filter Materials (custom attribute), screenshot ;
• Ajax Filter Brands (custom attribute Image), screenshot ;

Posts with simple Ajax Filters

Please note that it's also possible to create a simple Posts module that uses Ajax filters without using the unique Ajax Filtering method described above. You can, in fact, place some Ajax Filters next to the Posts module on the page thanks to the Page Builder; the only caution you must have is to indicate a particular class to the Row container, screenshot :

1. Insert a Posts module;
2. Insert the necessary Ajax Filters modules;
3. Apply the class "ajax-filters" to the container Row, screenshot .

Notes

• Suppose we have Ajax filters on a category (or taxonomy) page. In this case, all terms will be displayed, and the Ajax functionality will be disabled to allow browsing the archives of other terms. Ajax functionality is enabled on the main store page but not in subcategories to allow browsing in different adjacent categories.
• Please note that the Ajax Filter module shows all filter values when working with the Frontend Editor. In a nutshell, the module is used as a placeholder and will work correctly once rendered from the final page.
• Please note that if I insert the Ajax filters directly into a plain empty page (which is not a Content Block), we will not see anything since the filters need a source of type Posts to be matched to reference a content to be filtered.
• Please note that only one Posts Ajax Filters configuration can be used per page, and cannot be combined with the "Offset" setting.
• Please note that Ajax Filters will not work if we use the WordPress Permalink settings you have set "Plain".