Stand with Ukraine. Fight for freedom and democracy

Back to contents

JetSmartFilters: How to sort Posts and Products with Sorting filter widget


This tutorial uncovers the ropes on how to apply the Sorting Filter widget of the JetSmartFilters plugin to any kind of the content: either the posts or the products.

This widget doesn’t have any settings in the WordPress Dashboard. That’s why we bring it into play exactly from the Elementor editor.

Let’s have a closer look at how to show the items with the help of the JetSmartFilters plugin, sorted by author or by other features.

1 Step — Creating any other type of filter for the posts or the products

This stage involves adding the filter with the help of the JetSmartFilters plugin to the posts or the products.

The additional and more specific information about the Types of Filters you can find in our Filters Overview.

2 Step — Applying the Sorting Filter to the posts or the products

Let’s imagine that you have already set the desired type of filter (checkbox, select, range, visual, or any other one) for the posts or products.

The following vital action will be dropping the Sorting Filter to the page with the content to make it range the items the way you want and need. You will find the widget in the Elementor search panel.

sorting filer widget

Now let’s keep up with the available settings.

In the Content > Content tab, it’s essential to adjust the source the filter applies for.

If your content consists of the posts, then there will be a variety of available options.
For instance, for the posts created with Elementor Pro, you need to use one of these options:

  • Elementor Pro Portfolio;
  • Elementor Pro Posts;
  • Elementor Pro Archive.
this filter for option

In case the posts were created with the JetEngine power, then choose such option, as

  • JetEngine (for the usual listing) or
  • JetEngine Calendar (for the Calendar range of the events, as it implies).

For the product sorting, you have to choose one of the following options.
In case you have displayed the products with Elementor Pro, then you can choose one of these options:

  • Elementor Pro Archive Products;
  • Elementor Pro Products.

If you have installed the JetWooBuilder plugin, which is eagerly using, then select one of these options depending on the core widget:

  • JetWooBuilder Products Grid;
  • JetWooBuilder Products List.

For the WooCommerce plugin usage pick:

  • WooCommerce Archive;
  • WooCommerce Shortcode.

After the source has been selected, it’s time to proceed to the other settings for the Sorting Filter widget.

content tab

Then you need to apply the type of filtering – Ajax or Page reload. Here decide on how it would be assigned – on value change or after clicking on the apply button.

Next, set up the Label in the so-named field to make it noticeable.

Here you can also change the Placeholder from the default to the one you need.

The last but not the least option in the Content tab is defining the same widget to become filtered.

In the Query ID field, point out the widget’s ID in case you have several of them on the same page. It will help the Sorting Filter widget to focus on the specific content source and finally work well.

Let’s go to this widget’s key setting, which is located in the Content > Sorting List tab.

sorting list

Here you can set the title for the option in the filter. We recommend you to point out the criteria here to get it easy by the customers.

After that, you should specify the criteria to filter the items on. Let’s dive into each of them so that you could understand clearly which one suits a certain case.

  • No order (by ID) involves the option which disables any kind of sorting and can be applied if the customer needs to drop it at all.
  • Random kind will make it possible to arrange the items in a haphazard way.
  • Author option means ordering based on the author’s name.
  • Title criteria sort the items based on the title in alphabetical order.
  • Name (post slug) works almost the same way as the previous one but implies using the slug name instead of the displayed title.
  • Date pickup will sort the items based on the date of creation.
  • Last modified date, in comparison with the preceding one, will order the items in accordance with the latest (or oldest) modified ones.
  • Number of comments option will sort the items based on the number of comments (which is the default feature of WordPress).
  • Product price allows ranging the products on the price values set in the Product > General > Price field.
  • Products sales number will show the products on the order by the number of sales.
  • Product rating will display them in accordance with the number of ratings which is specified in the default WooCommerce settings.
  • Product reviews number arranges products by the number of reviews. This pickup works in the same way as the Number of comments does.
  • Meta key option with the following value (the meta field should be of the text type) will sort the text values alphabetically.
  • Meta key numeric option involves the text type of the meta field but with the numeric value, sorted accordingly.

Add to the Sorting List as many items as you need your customers to sort the posts or products.

knowledge base information icon
To filter the posts or products by the same criteria in both directions, you should create two items with the same option in the Order by field but with the reversed orders (ASC and DESC).

3 Step — Styling up the Sorting Filter widget

Kindly proceed to the Style tab, where you can find several tabs to make the filter look appealing.

In the end, the sorting filter will look like that:

sorting filter widget

If you still have some problems creating a Sorting Filter, please check out this video tutorial:

All in all, we have done it!

This widget has been added successfully to the content of the post and to the product one.