The Posts module of Uncode, among its many options, offers two types of filters that can also be activated in simultaneous: the Category Filtering and the Widgets Filtering. If you are using WooCommerce, and have selected Products as the post type, you also have another kind of filter called WooCommerce Sorting.

▶  

• Ajax Filters
• Category Filters
• Widgets Filters
• WooCommerce Sorting
• Architecture of the Filtering options

Ajax Filters

Although Ajax Filters are generally used for eCommerce websites these can also be used to create an advanced filtering system for a Blog or a Portfolio.

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.

• Ajax Filters (dedicated doc)

Category Filters

The Category Filtering is the most commonfilter. This filter allows you to filter the thumbnails through the categories attributed to the elements themselves. Using the Category Filtering is very simple, and you need to follow a few steps.

How to set up a Category Filtering with the Posts Module

• Apply categories to your blog posts, portfolio items, or products, using the native WordPress option. Make sure you have assigned at least one category to each post or page, screenshot .
• In the Posts module that generates your loop activate the Module → Filtering option, and optionally set the various design options according to your needs, screenshot .

How to set up a Category Filtering with the Media Gallery Module

• Apply categories using the Media Category option you have when you select a media, screenshot .
• In the Media Gallery module activate the Module → Filtering option, and optionally set the various design options according to your needs, screenshot .

Important note

Please make sure you have assigned at least one category to all the posts or pages that you query within the Posts module. The filter only shows the categories that are applied to the items present in the Posts module. In a nutshell, if you create, for example, three categories but don't attribute them to any item, they will not be outputted by the category filter. The category filter outputs the categories of the items present in the Posts module loop at that moment to avoid outputting a filter menu that doesn't show anything.

Hide Categories from the filter

As described, the menu filter shows all categories applied to items printed in that context by the Post module. If you want to hide some categories, you can use a code like this, wherein the example '50' and '51' are the IDs of the categories I want to remove from the filter menu, screenshot :

.grid-filters ul.menu-smart li.filter-cat-50,
.grid-filters ul.menu-smart li.filter-cat-51 {
    display: none !important;
}

Reorder filter menu items

If you need to reorder your filter menu items you just need to install and activate the free and convenient Category Order and Taxonomy Terms Order plugin. This plugin orders Categories and all custom taxonomies terms (hierarchically) using a Drag and Drop Sortable javascript capability. Read More...

Widgets Filters

From Uncode 2.3.0, when using the Posts module it's possible to activate the Widgets Filtering. The Widget Filtering is nothing more than a Content Block that is connected to the Posts module, here you can insert Widgets or simple contents.

Important note

Please note that although the Page Builder allows you to insert in the Content Block, that you will use as Widgets area, any type of module, the Widgets Content Block is designed to be used with simple Widgets . Our support is therefore offered for the use of simple Widgets. In fact, in the official demo, we never promote the use of other Page Builder elements. Support is not offered if you insert in the Content Block an additional Posts module, a Media Gallery module, modules that make massive use of JavaScript, or that require a nested Grid System structure.

How to set up a Widgets Content Block

• Create a new Content Block, insert a Row element, and insert the Widgets you need in the Columns. Note that you can use both the WordPress Widgets, both the WooCommerce Widgets, screenshot .
• Open the Posts module settings, navigate to the Module tab, and activate the options Filtering, Extra Filters, and Widgets Filtering. In the Widgets Content Block option select your newly created Content Block. Please note that each of these options is dependent on the previous one, so if you don't see them, it's because you have to activate them in this order, screenshot .

WooCommerce Sorting

From Uncode 2.3.0, when using the Posts module it's possible to activate the WooCommerce Sorting Filter. This practical filter allows to sort the current products selection according to some parameters: 'Sort by latest', 'Sort by popularity', 'Sort by average rating', 'Sort bt price: low to high', and 'Sort by price: high to low'.

How to set up a WooCommerce Sorting

• Open the Posts module settings, and in General → Build Query → Post Types set Product, screenshot .
• Navigate to the Module tab, and activate the options Filtering, Extra Filters, and Woo Sorting. Please note that each of these options is dependent on the previous one, so if you don't see them it's because you have to activate them in this order, screenshot .
• Optionally, it's possible to activate the Woo Sorting Count to show the WooCommerce result count text.

Note. Please note that the WooCommerce Sorting Filter don't work with possible custom order Posts module options. For example, this filter is not compatible with the Posts → Single → Custom Order option.

Architecture of the Filtering options

Within the Filtering option there are many options. these options are organized in a hierarchical way and allow you to manage many different variations. We try to clarify and explain how best to work with these options:

• Filtering: this option activates all the filtering options. When this option is deactivated no filter is presented, screenshot .
• Filter options: these are the general options that apply to each type of filter. These options start with the word 'Filter'. These options are shared by all three specific filters, and mostly refer to the filtering system container, screenshot .
• Mobile options: the mobile options are applied when you deactivate the 'Filter Mobile Hidden' option. The 'Filter Mobile Wrapper' option creates an additional dropdown layer on mobile to hide all filters within it, screenshot .
• Extra Filters options: this option contains the 'Widgets Filtering' and 'Woo Sorting filters', screenshot . Once activated each has it's own specific options, screenshot .