How to add filters with JetSmartFilters from Crocoblock - Elementor Pro
Вставка
- Опубліковано 9 лют 2025
- In this Elementor Pro video, we will use Jet Smart Filters from Crocoblock for the real estate website to display posts from a custom post type and filter them in a side panel on the left. And this all by not even using 1 line of code.
The Links page: livingwithpixe...
Get JetSmartFilters on Crocoblock's website: livingwithpixel...
Video Playlist for the Dynamic series: livingwithpixe...
Want to see the end result? Click here: realestate.livi...
Want to join the Facebook group: / 4217712578271096
→ Software I recommend
Hostinger for affordable webhosting: livingwithpixel...
Siteground for premium webhosting: livingwithpixel...
Elementor for no-code web-development: livingwithpixel...
Figma for Web Design: livingwithpixe...
All recommended software & discounts: livingwithpixe...
→ Full A-Z Courses
Elementor Pro Mastery Course: livingwithpixe...
Figma Design Mastery Course: livingwithpixe...
Business Course: livingwithpixe...
→ Starter Guides for Beginners
Elementor Starters Guide: livingwithpixe...
Figma Design Starters Guide: livingwithpixe...
→ My Social Media
Tiktok: / rinodeboer
Instagram: / rinodeboer
Twitter / X: / rinodeboer
Some of the links above are affiliate links, which means that I earn a commission when you make a purchase via my link. Thanks a lot if you decide to do that! I couldn't make all these videos without it.
Thank you soooo much for this amazing video! Love the way you explain, love the cleanness of the video, super easy to understand!!! THANK YOU!.
2:56 - Price Type Filter
4:27 - Price Filter
6:34 - Property Filter (checkboxes)
8:20 - Location Filter
9:18 - Creating the archive template
11:31 - Adding filters to the archive page.
14:44 - When publishing...
16:00 - posts max.
16:58 - Remove Filters / Active tags
18:27 Style it!
20:10 - Link to the main archive page
24:08 - update the "properties" page (specific page in the menu)
25:45 - Custome Filter Bar
30:21 - Blue background customized
30:38 Jet Tricks -Sticky filter section
Just wanted to thank you for this incredible video and step by step instructions on how to do many of the things that Crocoblock is capable of doing. Just terrific.
Thank you, Great Video as always. One thing Crocoblock need to improved is smartfilter speed, if for example you 2000+ lists, it's slow when you filtered also, they should add like a spinner when filtering.
I spend more than 4 hrs to understand with all ways from different sources include croco videos or from a ceo.. this is amazing simply explain ever. and I finish my project in 20minute.. thank you so much.
please help me
it's been a lot of time but i am not able to figure out
@@kamaralamkhan maybe everyone spend more time. Than after watch this at least :)
My favourite notifications!!! Dropping a like and comment to support you and saving the video to view later in the day.
Great video Rino. Thank You I learned a lot.
Let's create a frontend dashboard for people to put their properties and we as admin just approve them!
Waited 2 months for this video!
Please show the mobile version too.
Most of the traffic nowadays is from the mobile.
Thank you for your work!
haha. true
I want to know this aswell. I want to have a button on the mobile version of my site like 'apply/show filters'. After clicking the button a sideways filtermenu pops up! Does someone know to implement this with crocoblocks filters?
The tutorial was very good, it increased my knowledge in this work. I hope to see more videos from you on working with Jet Engine and Jet Plugins. Finally, thank you for sharing your knowledge with us.
I am from bangladesh.I think this is a masterpice viedo.Love you brother
You are the best Rino ;) Big up from Italy
Probeerde je naar de 100k te krijgen, helaas niet gelukt toen ik subscribe drukte :)
Succes Rino, je maakt fijna videos.
Als je er nog meer van crocoblock wilt maken, zou super zijn.
If it's a Living With Pixels Video, I like it even before watching, because i know its great content....
100k Subscribers this week..
I said it first
1⃣First of all, thank you for convincing me to use Crocoblock SmartFilters. It did just what the client asked for. 2⃣ Secondly, the default red hover colour on the button comes from your Elementor Global Style setting for Buttons (it inherits). 3⃣ Finally, we only wish that the checkboxes could accommodate AND/OR statements, as currently it only supports the OR statement. 🤷♂
Advance congratulations for 100k family.
Again you deliver - like always! 💪
This tutorial is purely gold. Thanks Rino.
Thank you Rino for this amazing tutorial.
Congratulations one more time! Excellent explanation and teaching. Hug here from Brazil!
You're the best! ❤
Thank you for share your knowledge and be so inspiring!
Nice video, but as others in comments why there isn't any mobile tutorial? These days people use more mobile devices then computers. I got stuck on mobile view and I'm thinking now how to get this done right way. Rino, you as a designer I'm pretty sure you have prepared mobile versions for your clients as well, hopefully you can show it sometime how you handle filters, product loop per page, different pagination on mobile devices and computers.
Very helpful, with this information in my work
Greetings from Indonesia
Cool stuff man, I came to learn about the filters and learned about jet tricks and jet tab!! Super cool content !!
I add jet smart filter to the category and it works fine. However when I insert it in the single post page it doesn't work. How to make search results return category when I insert jet smart filter in single post?
this video helped me so much to understand this issue, thanks Rino
Thanks so much for these videos! I love your tutorials, can't wait for the course!
Very good video,
Is there a way to load the filter in a PopUp and when selecting the filter it closes automatically and shows the results of the filter
Filters aren't filtering when I add them to archive page? Have tried both checkbox filters and select filters for a particular post type, and neither do anything. Any tips? Thank you! Great tutorials!
I really love your stuff and I learned a lot. But I think I have to rewatch this video to understand it completely. :) Everything with the Archive was a bit confusing for me, but you did a great job with your video as always Rino!
Make sure to watch the first videos in the playlist, because this is certainly not a video for beginners. I hope that will answer some of your questions!
@@rinodeboer I actually watched them all but maybe it is just too long ago. I certainly will watch them all again soon and give it a try in a Test Environment! ;)
Hi Rino,
It was a great video! I have been thinking about adding filters to my sister’s websites as well. I think filters add certain accessibility to the website and web page, and it is better for customers as well. Thanks a lot for sharing this tutorial, it was such a great watch. I will definitely be implementing your process and adding some filters to the website, and I really hope I can do a decent job with your help.
Hello! Is it possible to display the number of records next to the filters (e.g., checkboxes, etc.)?
just PERFECT!!! nice voice and super nice guy
is there a way of making this work with JetSearch so that the "show all results" goes to this page instead of the normal Wordpress search results page and the "properties" page instead with the filters on the left?
Thanks for the content! I have a question. I am making an Ecommerce and to show the list of products I am using the elementor "Posts" widget. The problem is that JetSmart filters don't work for me with this widget (I gave the same id to the widget and the filter). But if it works with widget products and archive products.. How could I fix it? I would really appreciate an answer!
You are the king men 👑
Hi there! really nice tutorial. I have a question. How do make that filter column responsive?
Thank you so much for this video I'm finding it very helpful. By any chance do you know if there's a way to mass import from a CSV or with Zapier? Thank you!
Looks cool and nice on desktop but how is on mobile?
I’d also like to know we can make it look good on mobile.
You can see the demo websites using jet filters on the crocoblock's official website
@@mohammadjunaid9436 yes there is no mobile view...
@@KOBE42__ just set it up for mobile first then set it up for desktop. Same as always
That was a very cool tutorial and it helped me alot, but my "select filter" widget is not displaying on the frontend, actually I have made an ACF and it is not fetching data from my ACF, can you please guide me how to resolve this issue ? TIA
I have issues with the checkin and checkout filters. First I want to have it with the search on my homepage so my visitors can type in either a name of a university or a city and it should redirect to the result page but when I did mine tried the check-in and check out it did redirect me but the unable dates ain't greyed out to mean unavailable so I tried it on the archive page it does not make any change the filter the available property from the listed properties. Have any idea why is so? I was having a thought of may be I should have 2 field that says Check in and check out but all the videos I have consumed from crocoblock channel didn't no such thing so am confused and mute on what could be done.
Is it possible to have dynamic filter values? So you can only select values that have content.
20:19 How to change/update Link of post, listing in Jet Engine. Thank you for sharing this tips
How do you change the background colour of the checkbox filters to blue, default is white, I cannot find an option to change this
Great video, any idea how speed up the AJAX filters? I have 240 listings and when I click multiple filters it takes over 10s to load or sometimes doesn't when you select like 6 filters at once. Cheers.
Thank you for this amazing video! Is it normal for jetsmartfilters to take more than 5 seconds to filter the results? I have an ecom website and trying to filter the colors of the products it takes so long. Is this happening to everyone?
Hi Rino,
Is there any way to have the search location filter to have autofill or suggestions?
Hi Rino,
Can you please solve the following problem?
I have three smart filter elements. One radio and two range sliders. If I select the first radio button the first range slider should appear, if I select the second one, the second range slider should appear and the first one should disappear. Is there any way to solve this with Jet smart filter and Dynamyc visibility plugins?
Hi @LivingWithPixels thanks for content. Anyway to 'scroll to top' after the ajax on JetSmartFilters?
Hey Bro ☺️,
Thanks for this great Tutorials. 😊.
I've a question.. if i want to that my member can add there listing in front-end website...also they get a profile when they signing or register in website and where they see their past listing, and additional information, How is it possible ??
Hello! First of all thanks for your great videos. I am studying on the jet smart filters series. I wonder if you ever tryed to create different filters for different categories of products, so that if I am in the categ 1 I see the filters for categ one, if I am in the categ 2 I anly see the filters for categ 2 and so on.
Thanks!
D
Hi, I would like to know how to set the "remove filter" button always display? Because it only shows after the value changes in filters~thank you!
Hi Rino!
Thank You I learned a lot from this video but i am stuck in one thing that how do i connect a form on request a visit button.
Does it work with different product grids or do we need to put it with crocoblock's product gallery? I do the same thing with you but it doesn't filter out. I don't know the reason. Some assistance would be amazing, everybody.
Hi. Thanks a lot for making those videos. I have a questions, what if you are making this site for a client and how can the cliente add a propriety usign an accont. for exemple, the client does not how to use wordpress... and can he add new propreties without log in in o to worpress?
thanks
Which ones are free out of the all you recommend
Thanks a lot for excellent video, for my case, as I would need the filter occur in “users” page instead of post like properties. Data source will be taxonomy. wondering if the settings are the same? May I know if also need create archive template for “users” as mine might not involve custom post type. Support you always🎉
hi but when i active load more or pagination smart filter or forexample selct filter not working why?
How do you format the price using commas to separate thousands?
could the same thing with the accordian be done with unfold or read
more?
Hello, I need help with something. I have checkbox values on the filtering page. I want some checkbox values to be preselected when the page opens. How can I do this from which setting?
Great videos!.......... Question..... With JetEngine post type + meta (number) --> I can not get a thousands separator to show? Please assist if you can...
Nice video, one question how do you make the filters mobile friendly?
Use a pop up
Great an useful video Rino. one question. Can I use the ACF fields i already create with jesmart? Thanks again!
I think you can pull any kind of custom field. Pretty sure about that you can combine them.
@@rinodeboer I already tried make it work with the loop grid widget. I think ACF fields tru jetmart just can be pulled with the posts and archives widgets at the time. What do you think?
I am always able to pull ACF and Jet fields from anywhere in Elementor.
Rino - is there any way to filter 'posts' that link to an external site?
How to add pagination in listing widgets and using smartfilter
Same question!
Hi! I'm trying to use the range filter to filter the capacity of the flow of some pumps, but I need the filter to consider all the values. For example, if the power flow goes to 1250, it must consider all the numbers starting from 0. I think it's like the square foot range filter that you use on the example page for the video. If you can help me with it, it could be awesome.
Are you able to bulk edit with csv metadata with these filters? I have a shop with 7000+ products and would need to be able to add data bulk into a spreadsheet, is this possible with the JetSmartFilters?
Can you show how to make custom field like u own?
Great content. Thank you Rino.
Hi, Rino! Any way to integrate MLS IDX integration with Crocoblock?
Gracias por todas las enseñanzas que nos brindas. Saludos!!!
can we use this for product filter?
How to use magnifier to zoom the images for the one we used from jetengine?
Can you do a video of litespeed cache best settings
Thank you ..can I use this plugin for the slider area?
hello Rino, can elementor builder make skeleton loading? How to?
How can we set an archive page as our home page?
Thanks for your great service to the complete world......
I have an very important question and humble request. Please can you help me as my XAMPP server is not working properly. Its MySql is not opening as it says unexpected shutdown error.
I think it happened with usual power cut as I am not having an UPS for my desktop. Please can you tell some solution for that.
How could I show/hidden an entire filter block based of the value of another filter?
For instance: I have a country filter containing "Netherlands" and "France"
Then IF netherlands is selected display a filter with the provinces of the netherlands, if france is selected show a filter.
Hey, love your tutorial! Why you haven't doing more Crocoblock tutorial?
I love your tutorial videos. I have a site where I've implemented JetSmart Filters to filter my elementor posts. However, there are some times where the selections have no results. Do you have a tutorial on how to add a no results section where no posts apply to the filters?
I have a website that sells puppies and I want to create a page that is specific to a single breed. I want to use the same Checkbox filter that I have but have one single breed autochecked upon page load. Anybody know how I can have a filter auto apply on a page load?
Thanks, very helpful !
Hi ! Are you still using Crocoblock at the moment ? I see that your last video is about 1 year old, is it still a good idea learning Crocoblock nowadays?
I still use it in almost every website that contains custom post types!
So the listing page same with archive page? What's the difference?
Hi and thanks for your tutorials, they are helping me a lot! However, I have a question: nobody on UA-cam talks about the mobile part! How to fix the UI and UX of filters on mobile?
did you figure out how to do it on mobile?
Thanks for the video Rino! Does Jet Smart Filters work with ACF fields or only with Jet Engine?
Hey, I do have the same question. Did you find an answer Henry?
Greetings :)
@@iwodexsa8362 not yet 😔
Great video. But how does everything work mobile? 1. Can i switch between Map View & Listing View? 2. And how look the filter in mobile Version (as a pop up, slide in)? In my opinion absolutely necessary for a great Listing/classified ads Page.. Greeting
how can this be configured on the mobile version?
How did you get the Property Category in your custom post type`?
Custom taxonomy through jetengine
X2 same question!
Hi Rino.
Thanks for the mega video.
I installed the filters in my website (shop), it looks great.
On the smartphone, however, I have to scroll until I get to the products.
Is there any other solution?
Example: Filters for sidebar & sidebar only for smartphone?
My solution was using Jetpopup and making the sidebar as a popup. Then assign the popup to an action button;)
Nice video again ! thx Rino !
Hello,
You are having amazing Tutorials, For jet Smart Filter I need help with creating search filter and select filter on same apply button , is this possible ?
Hey can you make a video on how to make dynamic location filters. e.g. you sumbit your postcode into the website when registering and then you see posts by those within a 10 mile radius of your postcode only and you can filter by e.g. choosing to show posts within 50 miles.
Hey, Working with SmartFilters I have run into a specific challenge that I hope someone can help me with.
I have implemented a filter on the website, exactly like you have shown, and there's a particular requirement from my client: they want to trigger one of the taxonomies directly from the navbar. However, when I create links to the categories, it alters the URL. Consequently, when users either clear the filter or choose a different category within it, the page doesn't display any results.
My goal is to allow users to trigger this taxonomy from the navbar without redirecting or altering the URL. Is there any method or workaround that would enable me to achieve this?
Also I want to be able to do the same thing with links inside the listing-element. This breadcrumb is created using a dynamic field which displays the categories of a taxonomy that I created (The same taxonomy to be triggered by the navbar).
Thank you in advance!
Thanks for this great tutorial ! I have a lot of different authors on my website providing content everyday and i want to be able to filter my posts by author, unfortunately i don't find any option allowing me to do so, do you have any clue on how to do it ?
Hello, Rino.
Thanks for the tutorial. It's helpful for me.
I just wanted to know if there is any option to change the filter to dynamic in crocoblock?
From your example, Suppose I applied the pricing filter from 250 to 50000, and if there are no Villas within this range, can Crocoblock update the Category filter and hide the Villa option from it?
Thank you in advance. Please give a reply.
I am not really sure what you mean, but each filter just applies it own data. So if there are posts that have a category (villa for example) and that villa is more expensive than 50k then it automatically doesn’t show because its more expensive. And if you also have checkboxes for categories than they work simultaneously. I hope this answers your question.
Is it possible to set this up using the native Posts rather than a Custom Post Type? If not, is there a way to transfer my existing Posts to a Custom Post Type? TIA
Yes, it is also possible to use the native posts, but if you want a blog then afterwards, you will need to create a CPT for your blog, which is a bit odd, but it is possible.
Yes, I used Elementor Pro along with its Loop Items feature in conjunction with JetSmartFilter. You would need to create a Loop Item Template for the Item Grid and make this Item Grid filterable for it to function properly. My Loop Items are posts, filterable by categories, date, topic, and so on. It works extremely well.
Hey does it work with ACF also?
Hi Rino, thanks for your great videoa, I;'ve found them so helpful. I am trying to create a listing website following your tutorials but I would like to monetise this. I would like users (members) to be able to add their own listings and charge them for this. How is this achieveable?
Hi, I copy all section from propertis (is a page, not theme model) and paste in Home page but the filter doesnt works, why?
I have the same issue. Did you solve this?