How to use Jet Smart Filters page as a result page

In this tutorial we will show you how to create any WordPress page as a search result page or a page that will automatically refresh its content according to the filtering we do. The default WordPress search and the default wordpress search result page won’t bother us in this tutorial.

It’s a continuation of the previous tutorial for those who do not have a search result page or do not know how to implement a result page with filtering plugins.

Visit the previous tutorial, WordPress search form with multiple custom fields here.

The Tools We Use

In this tutorial we are going to demonstrate you a way to implement a normal WordPress page and act as a result page for your current listing. We use specific tools but the logic is the same when it comes to filtering plugins and archives. We use the below tools:

  • Elementor Pro
  • Jet Engine
  • Jet Smart Filters

to create pages, custom fields, and filters.

Step 1

Navigate to your WordPress dashboard. Go to pages, add new. And make a result page. I will call mine aggelia and then edit it with elementor.

At the same time create a custom post type using Jet Engine. I will call this Aggelia. If you don’t know how to use Jet Engine and Jet Smart Filters here are some usefull links to get you started and finish this tutorial.

From the official Jet Engines Website,

Step 2

Add one or more custom taxonomies to the custom post type we just created and name some categories just like you would in the posts categories.(like featured, etc).

So i call my custom taxonomy geographical_position and I include some of the countries i know.

Step 3

Now navigate to Jet Smart Filters Plugin and make some filters based on custom taxonomies or custom fields you created. I make just one for the geographical_position taxonomy.

If you don’t know how to use jet smart filters here is the basic documentation from their official website:

Step 4

Now we are ready to develop our custom result page. Edit the page we created on step 1 with the help of elementor pro and customize as you like. You will need the listing widget of jet engine to list the post for the custom post type you created, in my case aggelia. You will also need a filtering widget, I will choose checkbox filter.

Note: I use checkbox filter because i chose to filter geographical_position with checkboxes on step 3.

Last but not Least

In your checkbox filter don’t forget to enable apply button so you can see how the url changes on your result page.

Url changes when ever you apply the changes on your checkbox filter like this.

My starting url: https://aggeliesellada.tk/aggelia/
My filtered url with one parameter: https://aggeliesellada.tk/aggelia/?jet-smart-filters=jet-engine/default&_tax_query_geographical_position%5B%5D=71
My filtered url with two parameters: https://aggeliesellada.tk/aggelia/?jet-smart-filters=jet-engine/default&_tax_query_geographical_position%5B%5D=71&_tax_query_geographical_position%5B%5D=73

Note 1: Jet Engine uses a prefix on the url, ?jet-smart-filters=jet-engine/default

Note 2: Jet Engine is using the term_id from our custom taxonomy that we created to filter the results and not the name. You can find the name and term_id in your wp database or just hover the taxonomy name in your WordPress dashboard.

Conclusion

So there you have it, a custom result page that you fully control. Now you can build your own custom search on home page or any other page of your WordPress site and filter the results on the page you just created. If you don’t know how check this tutorial.

Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on skype
Share on whatsapp

14 thoughts on “How to use Jet Smart Filters page as a result page”

  1. Hi, Interesting article. I am looking a way to create link showing different filters with jet smart filter and think that this could be the “trick”
    So i have my archive page called 123 and i like to show all articles blue from my archive page 123 is that possible ?

    mypage.com/article-page/123/?jet-smart-filters=jet-engine/default&_pa_123%5B%5D=188 where 123 is my archive page and 188 is postID of the color i want to show

  2. Hello Marcel,

    You have to set your filters on your archive page(123), enable apply button and see the results on your url.

    If you already did that, then your url should look like your example above.

    If 188 if the postID then it will show up one post with that specific id.
    If 188 is a categoryID then it will show all the articles from that specific category.

    Don’t forget that you need a listing widget from jet engine to make things work!

    Tell me if that works for you.

  3. Hi KONSTANTINOS,

    Thanks for the quick reply. When i activate the apply button it does not show results in the url. Any idea ?

    Cheers

    1. Hi, found it. As Ajax was enabled it did not show, page refresh worked fine and got the correct url. But if i use the url it show the “filter” info but the page is not filtered.

      https://prnt.sc/q9rgul

      Any idea how i get this working. I really like and need this option and asked already lot of people and nobody was able to give me a solution. (think is a absolute need to work with “links” specially in the menu where users click and go direct to the needed results. Filter option is very nice if you don´t know what you need but most users already know what they need)

      cheers

  4. Hello Marcel,

    As I see from the print screen, 148 is a categoryID .

    You can visit product categories, hover over the specific category and at the bottom left of your screen you can see the ID of that category. That also works for posts. You can also visit phpmyadmin and search for that ID in the database.

    I will give you an example.
    This is my test result page
    https://aggeliesellada.tk/aggelia/

    When I change the filters at the left, my url changes and the posts get updated.
    https://aggeliesellada.tk/aggelia/?jet-smart-filters=jet-engine/default&_tax_query_base_category%5B%5D=50

    If your website don’t behave like that , try using jet engines widget(listing grid) for the products listing.

    I hope this will help you.

    Cheers

  5. Hello Naderi,

    You can use ajax when you are done with the links.
    We use apply button so we can inspect the url change. After that we disable it.

    Cheers!

  6. Hi
    I am wanting to use select boxes to build up a filter and after clicking apply it navigates to another page i.e. the results page from the homepage. Is there a way to do this?

Leave a Comment

Your email address will not be published. Required fields are marked *