JetSmartFilters With Elementor Posts – Easy And Engaging

Introduction

In this tutorial I want to look at the JetSmartFilters Crocoblock plugin. JetSmartFilters is part of the Crocoblock suite and is included in every package except for the lowest end one. JetSmartFilters lets you add a filter to content listings created using Elementor Pro or Crocoblock widgets.

Video Version

What is a Filter?

When you use the Posts widget, for instance, in the “Query” section there is an area where you can include or exclude posts based on a category term. In the screenshot below, only articles that are in the “plugin” category will be included. This is called a “query filter” and what it is doing is filtering articles on the back end, before they are shown to the visitor.

JetSmartFilters has some back end query filter functions that you use when you define your filter, but it also has a strong front end feature. It provides you with filters on the page that the visitor can interact with to find the content they are looking for. These front end filters include the article matching the value you selected and hides all of the others.

JetSmartFilter is very full featured and supports many filter types. In the image below, you can see all of the filter types supported. Going down the top left side:

• Checkboxes Filters are ones based on built-in or custom taxonomies (categories or tags) and you can check more than one category.
• Radio Filter is like a checkbox filter, except that you can only choose one. This is like the radio buttons on your car radio. You can only select one channel at a time.
• Indexer Filters are ones that are based on running an index on a post type and storing the results in the database. Filtering is quick, but you have to rerun the index any time to add a category or content so that the database is updated. In addition to the filter on the left, on the top there is another “Indexer Filter” where it shows the “Kids’, Men’s, and Women’s” buttons.
• Check Range Filter is based on setting up a set of ranges (1-10, 11-20 …) tried to a field. In this case it is the product price. You check the ranges you want to filter for.
• Rating Filter is tried to the Rating widget and filters based on the number of stars.
• Range Filter is like the Check Range Filter except it has a slider you can use to make the selection.
• Select Filter is tied to a taxonomy and the choices are listed in a drop down.
• Date Range Filter is like the Check Range Filter. You need to define the date ranges when you setup the filter.
• Color Filter is also manually defined though you combine it with a taxonomy that lists colors.
• Image Filter lets you use images instead of names. It is also combined with a taxonomy.
• Search Filter lets the visitor enter the value the want and do a regular search.
• Checkboxes Filter is like the Radio Filter, but uses checkboxes instead of radio buttons.

My Use Case

On I report on Elementor related news. New plugins, updates, tutorials, and so on. I have a Custom Post Type called “News” and I add tags for each news item to keep them organized. Every few weeks I collect the news items into a newsletter (have you signed up yet?). Some Elementor Posts widgets have front end filters, but in my case I am using a “custom skin” to customize the news articles (see the tutorial on the Elementor Custom Skin plugin). The links go to the product website, not to the article on my site, as would normally be the case.

Here is a screenshot of a single news item:

And here is a screenshot of a list of news items in the WordPress admin. I outlined the column with the tags.

I’ve been showing these on the site under the “Latest New” menu item. Here is a screenshot:

There are a couple of problems with this news page. As you can see with the paging at the bottom, the number of news articles is growing. While someone can browse the news listing, that might not be very engaging. There are no images and after a while all of the articles just become a wall of text. Also, all of the articles have been tagged, but there is no way for a visitor to search. I’m using the JetSmartFilters plugin to solve these problems.

Creating the Filter

Background

JetSmartFilters can be used with Elementor Pro Post, Archive, and WooCommerce widgets and with the similar Crocoblock widgets. So you can use it in conjunction with the JetEngine plugin, which allows you to create Custom Post Types, custom fields, and listing loops. However, you can also use it stand-alone with Elementor Pro.

There are two parts to setting up a filter. On the admin side, you need to define the filter type and what taxonomies it is tied to or the customized search values you will use. Then in the Elementor editor, you use that filter and tie it to the Posts, Archive or WooCommerce listing. We’ll walk through that now.

Setting up the Filter in the WordPress Admin

When you install and activate JetSmartFilters, you get a new menu item in the WordPress admin.

When you click the “Add New” you get a page that looks like this:

You have to give it a name and that shows up in Elementor in a pick list of defined filters. The Filter Label and Active Filter Label don’t have to show in Elementor. Then there is a drop down for the filter type. These are the types that were mentioned earlier. Finally, there is an area for some “magic tags” or variables that Crocoblock has defined to tell JetSmartFilters what to use in the filter. These variables aren’t needed for taxonomies, which is what we are going to be using. One thing to note, more fields to fill out may appear depending on the filter type you select.

I’m going to use a List of Checkboxes Filter. I like the “buttons” look of the Indexer Filter, but remembering to rerun the index process each time new content is added isn’t worth it for me as I add news items regularly. I selected the Taxonomy “Products”. I’m not using JetEngine and the taxonomy doesn’t have a hierarchy of values. Here is a screenshot of the page filled out:

I save that and go and select the News Archive template that I previously created (output shown above).

Editing the News Archive in Elementor

Here is a screenshot of the News Archive in the Elementor editor. I’ve used the Posts widget for listing the News items.

I scroll down in the list of widgets until I find the JetSmartFilters widgets. There are 13 widgets included. As you can see, most of them relate to different types of filters, but there is one for an “Apply Button,” one for a “Remove Filters Button,” and one for Pagination.

It is important to match the widget you select with the filter type defined previously. I dragged over the Checkboxes widget.

In the widget settings area, the “Select widget” is a drop down where you can pick any filters that match the widget type. You have the option when a filter is selected to use an AJAX or manual refresh of the page. You also have the option to add an Apply button if you don’t want to have the page refresh automatically.

You have to tell Crocoblock which type of posts / archive widget you are using the filter with. It shows you a drop down. I picked Elementor Pro Posts.

Then it shows an instruction to add “jet-smart-filters” to the Query ID field of the Posts widget. We will do that in a moment, but first, go to the Style tab and select to show the checkboxes aligned horizontally instead of down the page.

That looks better:

Now I went back to the Style tab for the filter and put some space between the checkboxes and made other small tweaks.

When you are working with the filter settings, the list of posts might disappear. This is because we haven’t put in that query ID tag yet. So I added that in next. If you cannot find the Posts widget, use the Navigator to locate it.

There is one more thing we need to do. Originally, we used the pagination that comes with the Posts widget, but now that we are using the filter, we are going to need to use the Pagination widget that comes with JetSmartFilters.

Now I dragged in the JetSmartFilter pagination widget at the bottom of the Posts widget. I made selections in the Controls and Pagination options.

We already added the Query ID to the Posts settings. I went into the Style tab and made some selections. This is what it looks like:

I saved and went to look how it turned out.

Final Results

It turned out looking pretty nice. Here is the page before applying any filter:

And here is how it looks after being filtered by “Tutorial”. Note that the number of pages at the bottom reflects the filter.

Summary and Conclusions

Most of the time the front end filter options are tied to listing widgets. The JetSmartFilter widget is not bundled into a listing widget but is separate. For that reason, it can work both with the Crocoblock suite and with the list widgets that come with Elementor Pro.

There are a very large number of filters included. It seems like pretty much any type of filter you can think of. Many people will want to use the filters with WooCommerce, but in my case, I wanted to use it with my News archive.

I can see that needing to do two steps, one in the WordPress admin and another in the Elementor editor, might be a bit confusing for people, but once you understand how JetSmartFilters works, it makes sense. There is a lot of documentation on the Crocoblock website.

JetSmartFilters solved my problems. It was pretty easy to use and very flexible. It is another winner from the Crocoblock team.

Visit the Crocoblock Website