Cyber Monday Sale Ends in

0Days

0Hours

0Minutes

0Seconds

Buy Lifetime Membership
×
Divi Ajax Search module

Sep 24, 2020 | Divi Resources

Divi Ajax Search: For better & faster search results

The Divi Search module adds a search bar to the site that enables users to search posts and pages. Furthermore, with its design options, you can make it look appealing and decide what to display in the results. However, it doesn’t provide support for WooCommerce products. Plus, every time users search for something, they have to visit a separate page of search results. Therefore, to provide users better and faster search results right under the search bar with WooCommerce support, the Divi Ajax Search module comes in play.

Using this module, you can display attractive search results under the bar just like below illustration.

Divi Ajax search

And in this blog post, we’re going to see how we can use this module to make the most out of it. So, you can use this on your site for extra benefits. Therefore, without any further due, let’s get started!!!

Step 1: Install the plugin


The following steps can help you successfully install and activate the module to create an ajax search field for Divi.

A: Get Divi Plus from Elegant Themes

To power up your website with Divi ajax search, first, you need to get the Divi Plus plugin. It’s a multi-purpose plugin for Divi available at the Divi Marketplace. It comes with 34 Divi modules, including the Ajax Search module we require in this post.

B: Download & Install the plugin

After getting your copy of the plugin, you can download it right from the product page. Or, go to your Elegant Themes Account >> My Download, scroll a bit, and Download.

Download Divi Plus

Once downloaded the plugin, go to your WordPress Dashboard >> Plugins >> and click Add New.

WordPress add new plugin

Then inside the Add New plugin window, click Upload Plugin, and choose the file you’ve downloaded from the Elegant Themes or our store. Once successfully uploaded the file, click Install Now.

Upload Divi Plus plugin

As soon as the plugin gets installed, WordPress would ask you to activate the plugin. Simply click Activate Plugin that would appear on the next window after installation.

Activate Divi Plus plugin

That’s it; we’ve successfully installed our plugin. However, our job isn’t done yet. We have to make sure that the Ajax Search module is enabled, and to do that, follow the next step.

C: Activate the module

To check whether the Ajax Search module is enabled or not, go to your WordPress Dashboard >> then Settings >> and Divi Plus.

Divi Plus in settings menu WordPress dashboard

Here, you’d find all the modules available in the Divi Plus. Check whether Ajax Search is enabled or not. If not, then simply tick the checkbox next to it, and Save Changes.

Ajax search in the Divi Plus panel

That’s it, our module is activated and we’re ready to explore it further.

Step 2: Insert module


To begin adding a Divi ajax search on a webpage, simply create a page or edit an existing one. Then deploy the Divi Builder and choose to build on the Front End.

Divi Ajax Search build on the front end

In this way, we’d be able to see the changes we’ll make to the ajax search. Once the Front End builder gets loaded, insert a new row, and then DP Ajax Search module.

Insert Divi Ajax module

The module has been inserted, let’s configure it for good.

Step 3: Configure the Divi Ajax Search field


As soon as you insert the Divi Ajax Search module, it will open up the Content tab. And the first setting you get is the Configuration.

Divi Ajax Search content tab

Therefore, to make the most out of it, follow the below steps.

A: Search Field Placeholder & Numbers

The first field available in the Configuration settings allows you to input placeholder text. And the second one enables you to choose how many search results you want to display.

Divi Ajax Search placeholder text

By default it showcases 10 results under the search field, but you can make changes according to the requirements.

B: Configure Search Order 

Once you’ve set the placeholder text and search result number, the next options you get in the Configuration settings are the Order By and Order.

Order by and order option in the Ajax Search module

The Order By option provides you with option to display search results in 6 ways. Date, Modified Date, Title, Slug, ID, and Random.

Order by options in the Ajax Search module for Divi

And the Order option enables you to display Order By results in Ascending and Descending order.

Order option in the Ajax Search module

C: Set No Result Found Text

Finally, the last option Configuration settings provide is the ability to set a no result found text. You can input any custom text to represent the unavailability of a particular search query.

No result text option in the Ajax Search module

And when something will not found on a website, the Ajax Search field would return no result found text as the below screenshot.

No result found text example

Step 4: Configure Divi Ajax Search Area


After Configuration, the Search Area settings provide us with the option to select where we want to run a particular query and for what post types. For now, we can select Title, Content, and Excerpt as a location for a query to search in. To assign an ajax search field its search location, all you have to do is tick the checkboxes in the Search In next to the option of the search area settings.

Search area option of the Ajax Search module for Divi

Moreover, the post types available to run the search in query for are Posts, Pages, Projects, WooCommerce Products, Custom Post Types, and the option to include all of these.

Search in post type for the Ajax Search module

When you select one of these, the ajax search would look for results in the title, content, or excerpt of the selected post type. For example, you’ve selected Title as Search In, and Post as your post type. Now, when a user searches in the ajax search field, it would look for results in the title of the post.

Step 5: Configure, How to Display Search Results


The Display settings in the Content tab of the Ajax Search module, enables you to customize the search field and its results. Under this particular setting, you get the option to hide/show the search icon. Decide what to display in the search results from the Display Fields options that are Title, Excerpt, Featured Image, and Product Price. You can also try any combination of these available options like Title with Excerpt, or Title with Featured Image, and so on.

Ajax Search module display area

Moreover, this same setting allows you to display search results in columns. And when you choose to display search results in columns, it also enables you to apply the masonry effect. To display search results in masonry format, all you have to do is increase the Number Of Columns from one and check Use Masonry as YES.

Search results in masonry layout

The below illustration, nicely represents the masonry search results of the Divi ajax search module.

Masonry search results of Divi Ajax Search module

Step 6: Add a Scroll bar


Yes, you can add a Scroll bar to the ajax search field results. To achieve this styling option, go to the Scrollbar settings of the Content tab. And simply select the Show option from the dropdown menu. To hide the scrollbar, simply choose Hide from the menu.

Ajax search results scrollbar

And when someone searches something on the Ajax search field, the scroll bar would appear in the search results same as the below screenshot

Divi ajax search results with scroll bar

Step 7: Configure Search Results Linking


The Link settings available in the Content tab, provides you with the option to either open search results In The Same Window or In The New Tab.

Divi ajax search result settings

Step 8: Style Search Results Item & Box Background


And finally in the Background settings, you get the option to change the background of the Search Result Box and Item with Color, Gradient and Image.

Background settings of search result box

That’s it, we have explored all the Content settings and added required elements of the Divi Ajax Search module. Now it’s time to apply some style on them in the Design tab.

Step 9: Style Divi Ajax Search


There are multiple settings available in the Design tab of the module, so we’ll explore them one by one to help you understand those easily.

Divi Ajax Search module and its design tab

A: Style Search Field

If you want to apply background color to the search field, then go to the Search Field settings.

Search field background color option

Here, you can apply a background color to the search field when it’s still and focus background color when users type a query. Moreover, it also provides the option to apply still color to the text as well as focus color too. Apart from color styling, you can also bring changes to the padding of the search field and apply text customization such as Font Style, Size, etc.

Padding of Divi search field

B: Style Search Icon

To give Ajax Search field icon a different color other than the default, go to the Search Icon settings.

Divi Ajax Search icon styling

Here, you can apply custom color to the search icon. Plus, it would also provides you with the option to make changes in the icon size.

C: Style Search Loader

To give Ajax Search field Loader a different color other than the default, go to the Loader settings.

Ajax search field loader options

Apart from color styling, here, you can also make changes to the loader size.

D: Style Search Result Item Text

The Search Result Item Text settings will be required when you want to make text styling for the Title, Excerpt, and Price of the search results.

Search result item text settings

It includes all the text customization options that are required to bring some style in a text. You can change Font Style, Font Weight, Text Color, and everything Divi allows for text styling.

Step 10: Other Design Options (Shadow, Border & Spacing)


The Box Shadow settings available in the Design tab provides the option to apply Box Shadow on the Result Box.

Search result box shadow settings

The Border settings allows you to apply Rounded Corners and Border Styles to the result box.

Search result box rounded corners option

And the Spacing settings of the Design tab, provides you with the option to add padding in the Search Result Box.

Search result box padding option

That’s it, we have, explored all the Design options of the Divi Ajax Search module. Now, let’s see some examples of it.

Examples of Divi Ajax Search


Divi Ajax Search results with title excerpt and featured image
WooCommerce product search in ajax
Divi live search

Conclusion


After going through all the options of the Divi Ajax Search module, what I find is that it’s a powerful performance addon to the Divi theme. Where users with the native search module are not able to display their WooCommerce products, this module solves the problem. And not only products, but you get pretty much options to make a search field functional at all the areas. Moreover, apart from the performance aspect, you can also style this module to suit your website’s surroundings. So, in my option, it’s by far the useful module you can get to add a search bar.

Get the Divi Ajax Search module today, and let me know what was your experience using it. If you’ve already used this module, and you’ve got any query or suggestion, then I’m waiting in the comments. Let’s share more with the Divi community together!

Divi Extended Cyber Monday Sale
Posted By:
Vishvendra
Vishvendra believes in the keep learning process and applying those learnings into work. Other than technical writing, he likes to write fiction, non-fiction, songs, and comic ideas. He loves what he writes and writes what he loves. Search his name with "Nathawat," and you'll easily find him over the internet.

1 Comment

  1. dusan sevic

    why is this tool just working on firefox and not in other browsers ?

    Reply

Trackbacks/Pingbacks

  1. Module Demo - Pressific - […] To experience and make your own ajax search module to be an appealing and an eye catching module, feel…

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

1 Comment

  1. dusan sevic

    why is this tool just working on firefox and not in other browsers ?

    Reply

Trackbacks/Pingbacks

  1. Module Demo - Pressific - […] To experience and make your own ajax search module to be an appealing and an eye catching module, feel…

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Divi Extended Cyber Monday Sale
Cyber Monday Popup