Help Center
How to Display the Search Results Split by Listings' Categories

How to Display the Search Results Split by Listings' Categories

This tutorial explains how to showcase the search results page with listings of posts divided by their categories and hide/show categories with no results.

Before you start, check the tutorial requirements:

  • Elementor (Free version) or Block editor (Gutenberg)

  • JetEngine plugin installed and activated with Custom Post Type and Taxonomy created, and the Listing items for posts and terms built

  • JetSmartFilters plugin installed and activated

  • JetThemeCore plugin installed and activated with the created Archive template. If you have not done this yet, please follow this tutorial.

Adding a Listing Grid for Posts into a Listing Item for Categories

Open the created listing item for categories. Here should be the following set up. Use the Inner Section widget to divide the page into sections for better search results displaying.

Use the Dynamic Image widget to add the image of the categories to the page (if the CPTs for categories have this field). Specify the Icon option from the appropriate CPTs as a Source for the dynamic image from the drop-down menu.

dynamic image settings

Use the Dynamic Field widget to place the field with the categories.

dynamic field settings

Read the tutorial on How to Work with Dynamic Field Widget to apply the dynamic widgets of the JetEngine plugin.

In another section, add the Listing Grid widget and select the created Listing for the posts that are going to be filtered. Adjust the listing template; for example, specify the number of posts.

listing grid settings

More Listing Grid widget options and settings for the customization are in the following Listing Grid Widget Overview tutorial.

Using the JetSmartFilters Widgets for Displaying the Search Results

Create a Search filter from the JetSmartFilters plugin

Navigate to the SmartFilters > Smart Filters List on the WordPress dashboard and press the “Add new” button. Create a new Search filter. 

ajax search filter icon

This tutorial details the JetSmartFilters widgets usage and explains How to Use Search Filter.

Search settings

Open the page to place the Ajax Search Filter widget in the Elementor page builder and add this widget to the page.

ajax search widget icon

Specify the settings of the filter by selecting This filter for JetEngine.

ajax search widget settings

Add the Apply Button widget with the redirection to the archive page:

  • navigate to the This filter for drop-down menu and select the JetEngine option;
  • unroll the Apply type drop-down menu and select the AJAX option;
  • type (or paste) the archive page’s URL into the Redirect Path field.
apply button widget

Below, place the Listing Grid widget for displaying the listing template with the listing of categories.

Open the archive page for search results and add there the Ajax Search widget and listing.
This tutorial explains How to Create Archive Template for Displaying Search Results.

Creating a Custom Query for Displaying the Search Results

Since the Ajax Search Filter widget displays all posts without filtering and splitting for listings’ categories, the Query Builder was used.

search results page

Creating a query to display posts of the category matching the search criteria

Go to the WordPress Dashboard, navigate to the JetEngine > Query Builder and press the “Add new” button to create a query. Specify its Name (here, Display_posts) and choose the Posts Query option from the Query Type drop-down menu. 

Navigate to the Posts Query setting tab and specify the Posts Type (here, Properties CPTs) from the drop-down menu and Posts Status (Published).

query general settings

Using the Query Variable macros

Navigate to the Search Keyword drop-down menu of the General setting tab to set the search keyword. 

Press the “Dynamic Tag” icon to use the Query Variable macro.

Type the variable “s” (usually, this variable is used to transfer the keyword entered by a user into the query parameters) in the Variable Name field.

posts query settings

Press the “Apply” button to set the variable.

Customizing the tax query settings

Navigate to the Tax Query setting tab. Unroll the Taxonomy drop-down menu to select the taxonomy per post from the CPTs you need (here, the Property type CPT is set). 

Unroll the Field drop-down menu and select the Term ID option as a taxonomy term.

Click the Terms drop-down menu and select the Current ID option as the taxonomy term(s) to get posts.

tax query settings

Press the “Add Query” button to save changes.

Applying query to posts listings with categories items inside

Navigate to the JetEngine > Listings and open the listing with the categories items inside (here, Results_listing_item). Open the Custom Query tab and turn on the Use Custom Query toggle. Unroll the Custom Query drop-down menu and select the newly created custom query (Display_posts).

Warning

Also, mind that the following tabs (Posts Query, Terms Query, Users Query, Content Types Query) concerning query settings are legacy. We recommend using the Query Builder functionality and Custom Query tab, respectively.

listing grid with categories

Updating pages with applied listing

Update the search and results pages with the used listing template. The search will show categories and related posts.

search results with categories

Hiding the Categories with no Results

Hiding categories with no results

To hide the categories with no results once the search was performed, open the listing with the categories items inside (here, Results_listing_item). Navigate to the Advanced settings tab, unroll the Dynamic Visibility tab and switch the Enable toggle.

If enabled, this toggle turns on the Visibility condition type drop-down menu. Choose the Show element if condition met option. To specify the visibility condition, unroll the Conditions drop-down menu and choose the Query Has Items options.
Choose the create custom query (here, Display_posts) from the Query to check drop-down menu.

dynamic image visibility condition settings

Applying same visibility conditions to all sections of listing

Apply the same visibility conditions to all sections of the listing. 

Update the listing page and pages linked with this listing.

Refresh the search results.

search results page with hidden categories

Now you know how to display the search results split by listings’ categories.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.