In this post I want to look at a cool plugin for Elementor. It is part of the Crocoblock Suite. It’s the JetSearch plugin that gives you a nice Ajax search widget.
Default WordPress Search Option
I have here a test site that is using the Astra Pro theme. The home page was created with Elementor. In the site header there is the default search box. I see I have a John Grisham book, so I search for “grisham”.
The default WordPress search functionality is a bit anemic and could use some love. This is what the results look like:
As you can see, it is a bit difficult to get a sense about the posts from these excerpts. The title, author, date, featured images, and so on are missing. It is possible to style the search results page using Elementor Pro, but the Crocoblock suite gives us another option. Let’s take a look.
Walk-through of Options
I’ve got the Crocoblock JetSearch plugin installed. It comes as a stand-alone plugin that is not dependent on any of the others in the suite, though you do need to have Elementor installed. It just installs this one widget.
In the Elementor editor for the home page, I searched on “search” and dragged the “Ajax Search” widget into the area above the sidebar.
JetSearch has a very large number of customization options. You can style about every part of the search form. You can change up icons for wording, and vice-versa.
In this section, there is the option to include a filter for categories. I have both an Audience and a Genre category for books, so it picked those up from the Books custom post type.
This is pretty nice. It is only possible to select one category for the filter. If you needed more then you could use the Crocoblock JetSmartFilters plugin, which allows you to setup multiple filters. I’ll also switch on the Responsive Form on Mobile option.
In the Search Settings dialog, you can select which content you want to include in the search. In the video I set the number displayed to a large number and it scrolled down the page past the footer. Since JetSearch has pagination (!) on the Ajax results panel, displaying a larger number isn’t necessary.
In the settings panel for the results area, I selected to show “medium” sized thumbnails since we have all of the book cover images.
In the notices area you can tweak the messages, if desired.
The Style tab has panels that allows you to set the styles of all of the elements. I’m not going to go through each of the panels. I left them pretty much alone, just adjusting the colors to match the site.
Final Results
I saved and tried out the search functionality. Here are the results search for “grisham” again.
This is much more attractive than the default search results. Here I search for “age” to get a larger number of results.
Notice at the top the nav arrows. You can you page through the results, which is instant. This is very cool.
About the Suite
JetSearch is part of the Crocoblock suite of plugins. In addition to the Kava theme and the pre-designed content blocks, it includes all of these plugins. They add a large number of features.
You can purchase the plugins separately or all together. The plans include an annual option or a lifetime option with lifetime updates and support.
Conclusion
The JetSearch plugin adds an Ajax search widget that can be placed anywhere you can put an Elementor widget. It is easy to setup, works well, and is a nice way to upgrade your site. I was pleased with flexible and results.
