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 achieve the sorting with it!

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 you can find out in the Types of Filters block here by proceed to the link.

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 next 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 filter widget

Now let’s keep up to the available settings.

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

If your content consists of the posts, then there will be a variety of the 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 products 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 exact 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 the key setting of this widget 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 in order 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 sorts the items based on the title in alphabetical order.
  • Name (post slug) works in 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 the 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 rating which is specified in the default WooCommerce settings.
  • Product reviews number arranges products by the amount 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 which will be sorted accordingly.

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

An important note!
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).

ASC and DESC order

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 Content tab, you can select the width of the filter to make it match with the width of the section where it contains.

style settings in the filter

Select tab allows adapting the style of the widget in general to your website terms.
Here you can adjust the typography and colors for the textual elements in the filter.
Then you are able to set the border, its width, color, radius and shadow if you need.

In the Label tab, style up the label if you have entered it in the Content > Content tab.
Here you can adjust the typography frames and color as well as the margin surroundings and alignment.

In case you have chosen the apply button in the Content > Content tab, you will have the chance to add some styles.
Among them, there are typography and color for the text; border adjusting and padding/ margin along with the alignment for the button space.

sorting filter widget

All in all, we have done it!

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