Stand with Ukraine. Fight for freedom and democracy

Back to contents

How to add an AJAX search to website’s header with JetSearch


When it comes to customizing your header, the great functionality is to embed AJAX search functionality to allow visitors always use the chance to find what they need.

The Ajax Search widget of the JetSearch plugin enables not only to perform search results from the search field but also to show the results in accordance with the categories you’ve set before.

The Ajax Search widget can be added to the header or the footer or it can be shown on a particular page on the site only. However, the most suitable placement on the site for this widget is definitely the header. This section is viewed on the entire site and it is emplaced on the top that guaranteeing that it’s viewed.

The Ajax Search widget can be added to any header if the last is created with Elementor, either the Elementor Pro version or Crocoblock addon.

In this tutorial, we will take the widget to pieces on the example of the Crocoblock addon.

Setting up in the WordPress Dashboard

Before compiling settings in the editor you should perform some preliminary actions.

Step 1 – First of all, you need to proceed to WordPress Dashboard. Here on the left panel you should look for Crocoblock > My library directory and click on it.

my library directory

Step 2 – Next, you have to select the Header template and click on the “Edit with Elementor” button.

Setting up in Elementor editor

Now we navigate to the interface of the Elementor editor to look through the settings here and make them responsive.

Step 1 – Search for the Ajax Search widget.

search form content settings for ajax search widget

Step 2 – Customize the widget on the strength of your own feeling. To perform the settings you should put up some general options, such as the size, color, etc. Don’t forget to use possibilities to the full extent so that it grabs the visitor’s attention and complies with the primary purpose of searching the desirable information.

What is more, you can add the customized header with the Ajax Search widget for the selected pages only. For instance, you can do it for the Travelling category where you have a wide range of posts. Such action makes your pages more responsive and useful for customers.

Now the visitors of your site have the opportunity to search for the needed information directly in the header.