{"id":45054,"date":"2024-07-25T13:40:19","date_gmt":"2024-07-25T13:40:19","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=45054"},"modified":"2024-08-09T12:26:35","modified_gmt":"2024-08-09T12:26:35","slug":"displaying-terms-in-search-results-area","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/displaying-terms-in-search-results-area\/","title":{"rendered":"How to Display Terms in the Search Results Area"},"content":{"rendered":"\n

The Ajax Search<\/strong> widget\/block\/element is the JetSearch<\/em><\/a> <\/em>feature that allows fast search on WordPress websites.<\/p>\n\n\n\n

By default, Ajax Search <\/strong>displays posts in the results area. The Additional Results <\/strong>settings allow the search and display of the terms or\/and users along with posts.<\/p>\n\n\n\n

In this tutorial, we describe how to display terms in the search results area using the example of the WooCommerce<\/em> product categories on the bookstore e-commerce website<\/a>.<\/p>\n\n\n\n

Be aware that such a tutorial isn\u2019t case-sensitive, and you can display custom taxonomies<\/strong><\/a> along with posts of the Custom Post Type<\/strong><\/a>.<\/p>\n\n\n\n

How to Display Terms in the Search Results Area<\/h2>\n\n\n\n

As described in the How to Add an AJAX Search to a Website\u2019s Header<\/strong><\/a> tutorial, we place the Ajax Search <\/strong>widget to a header in the Elementor editor.<\/p>\n\n\n

<\/svg><\/div>
Things to know<\/div>

The provided functionality is accessible if you have the JetThemeCore<\/em><\/a> plugin installed and activated. However, it is not required in the described case; you can add Ajax Search<\/strong> to other pages\/templates built with Elementor, Gutenberg, or Bricks.<\/p><\/div><\/div>\n\n\n\n

Initially, you can open the Search Query <\/strong>tab and select the required post types as the Source<\/strong>. For example, we set the WooCommerce<\/em> \u201cProducts\u201d post type.<\/p>\n\n\n\n

\"woocommerce<\/a><\/div>\n\n\n\n

We unroll the Additional Results <\/strong>tab and enable the Terms Search Source<\/strong> toggle to adjust extra settings.<\/p>\n\n\n\n

\"additional<\/a><\/div>\n\n\n\n

First, we pick the needed Taxonomy<\/strong> in the namesake drop-down (\u201cProduct categories\u201d), and the term names appear in the search results area if they match the request.<\/p>\n\n\n\n

\"choose<\/a><\/div>\n\n\n\n

Then, we fill in the Title <\/strong>field (\u201cBook categories\u201d).<\/p>\n\n\n\n

\"terms<\/a><\/div>\n\n\n\n

Next, in the Icon <\/strong>section, we click the \u201cIcon Library\u201d option, pick the suited icon, and press the \u201cInsert<\/strong>\u201d button.<\/p>\n\n\n\n

\"additional<\/a><\/div>\n\n\n\n

The icon we set appears on the left of the term name in the search results area.<\/p>\n\n\n\n

\"icon<\/a><\/div>\n\n\n\n

We keep the Limit <\/strong>as it is set by default (\u201c5\u201d). It means the search results area will display a maximum of five terms results.<\/p>\n\n\n

<\/svg><\/div>
Things to know<\/div>

To style the terms additional search results, open the Style<\/strong> section of the Ajax Search<\/strong> widget and unroll the Additional Results<\/strong> tab.<\/p><\/div><\/div>\n\n\n\n

\"terms<\/a><\/div>\n\n\n\n

Using Listing Template for the Terms Search Results<\/h2>\n\n\n
<\/svg><\/div>
Things to know<\/div>

The Listing<\/strong> drop-down menu is available if you install and activate the JetEngine<\/em><\/a> plugin.<\/p><\/div><\/div>\n\n\n\n

With a listing template, you can customize the display of the terms as you wish. For example, you can display different icons for each term (with the Icon <\/strong>option in the Additional Results <\/strong>tab of the Ajax Search<\/strong> widget, you can set only one icon for all terms) and extra information for each term, such as a description.<\/p>\n\n\n\n

To create a Listing<\/strong><\/a> template for taxonomies, we go to the WordPress<\/em><\/strong> Dashboard > JetEngine > Listings\/Components<\/em><\/strong> tab and click the \u201cAdd New Listing Item<\/strong>\u201d button.<\/p>\n\n\n\n

In the Setup Listing Item <\/strong>pop-up, we pick the \u201cTerms\u201d option as the Listing source<\/strong>, set the required taxonomy in the From taxonomy <\/strong>field (\u201cProduct categories\u201d), enter the Listing item name <\/strong>(\u201cProduct Categories Listing\u201d), and choose the Listing view <\/strong>(for this case we choose \u201cElementor\u201d).<\/p>\n\n\n\n

Afterward, we click the \u201cCreate Listing Item<\/strong>\u201d button.<\/p>\n\n\n\n

\"creating<\/a><\/div>\n\n\n\n

You can customize the listing template using different elements, such as Dynamic Widgets<\/strong><\/a>.<\/p>\n\n\n\n

We place such widgets in the Elementor editor:<\/p>\n\n\n\n