How to Add Real-Time Ajax Search to Your Divi Website

Last Updated on March 23, 2023 by 3 Comments

How to Add Real-Time Ajax Search to Your Divi Website
Blog / Divi Resources / How to Add Real-Time Ajax Search to Your Divi Website
Play Button

Featured Plugin On Sale Now In The Divi Marketplace

Divi Ajax Search is available in the Divi Marketplace! That means it has passed our review and has been found to meet our quality standards. You can visit Divi Extended in the marketplace to see all of their available products. Products purchased from the Divi Marketplace come with unlimited website usage and a 30 day money back guarantee (just like Divi).

Purchase In The Divi Marketplace

Ajax is a great way to add live searching to Divi. With Ajax, the page doesn’t have to reload to show the users the search results. This lets your visitors see the results much faster, which helps keep them on your pages longer. The result is a website that looks cleaner and functions smoother.

Ajax searching isn’t built into Divi, but it can easily be added using a third-party plugin. In this tutorial, we’ll see how to add Ajax searching to Divi and see how to style the search to fit your website’s design.

On to the tutorial.

Sneak Peek

Before we get started, here’s a look at how our Ajax search will look when we’re finished. This is the Desktop view. I’ll add an Ajax search to a WooCommerce store. I’m using the show page from the Online Store layout pack. We’ll also style the search to match the layout. Of course, since this is a test site I’m cheating and using the WooCommerce test products. The results will work the same with any products.

Here’s how the same design looks on a phone.

How to Add Real-Time Ajax Search to Your Divi Website

Subscribe To Our Youtube Channel

1. Installing Divi Ajax Search

Installing Divi Ajax Search

First, purchase Divi Ajax Search from the Divi Marketplace. It’s normally $29 and includes unlimited usage and one year of support and updates. Divi Ajax Search lets you search pages, posts, projects, and WooCommerce products. It works the same with each of these post types. It can search the title, excerpt, and featured image and display them according to your settings.

Installing Divi Ajax Search

To install the plugin, go to Plugins > Add New and select Upload Plugin.

Installing Divi Ajax Search

Select Choose File and navigate to the file’s location on your computer and select it. Click Install Now.

Installing Divi Ajax Search

Once the plugin installs, select Activate Plugin.

2. Add Ajax Search to Your Divi Website

Add Ajax Search to Your Divi Website

Here’s a look at the original layout. it includes the header, categories that overlap the header image, and the WooCommerce module to display the products. I will add the Ajax search feature above the shop module. I’ll also style it to match the elements of the layout.

Add Divi Ajax Search to the Layout

Add Divi Ajax Search to the Layout

Click the icon under the shop module to open the module modal. Scroll to or search for Divi Ajax Search and add it to the layout. I’m showing the wireframe view, but any of the views work the same.

Add Divi Ajax Search to the Layout

Drag and drop the module above the shop module.

Configuring the Search Box

Configuring the Search Box

Click the gear to open the options. I’ve switched to the desktop view so I can see my changes live.

Configuring the Search Box

First, we’ll adjust the placeholder text. The default placeholder text uses the word Search. This is fine, but I’m changing it to Search our products so the user knows that they’re searching the store rather than blog posts or other content. I’ll leave the Order By, Order, and No Results Text at their defaults.

  • Placeholder text – Search our products
  • Search result – 10
  • Order by – date
  • Order – desc
  • No result text – No results found

Decide What to Display in the Search Results

Decide What to Display in the Search Results

Under the section called Search Area, select what you want to search in. I’m leaving it at the default settings, which includes Title, Content, and Excerpt.

Next, choose the post types. You can have it to search Posts, Pages, Projects, Products, or all of the above. I’m selecting Products.

Search In:

  • Title
  • Content
  • Excerpt

Post Types:

  • Products

Select What to Display

Select What to Display

Scroll down to the Display area to choose how the results will display. I’m keeping the default settings for the search icon, title, excerpt, and featured image. I’ve also enabled the product price, changed the number of columns to 4, and selected to use masonry. This will give me the layout I want.

Show Search Icon:

  • Yes

Display Fields:

  • Title
  • Excerpt
  • Featured Image
  • Product Price

Number of Columns:

  • 4

Use Masonry:

  • Yes

Show the Scrollbar

Show the Scrollbar

Go to the Scrollbar settings and decide to show or hide the scrollbar. I’m including the scrollbar so the user is better aware that they can scroll.

Scrollbar:

  • Show

Divi Ajax Search Result

Divi Ajax Search Result

Entering a search term shows the results under the search field. This looks great, but it doesn’t stand out from the content of the website. We’ll style it so that it fits the design of the site and doesn’t blend with the product images.

3. Style the Module to Fit Your Website

Style the Module to Fit Your Website

To style the search box, I’ll use design elements from the layout that I’m using. At the bottom of the Online Store layout’s shop page are a couple of design elements. One is an interesting email optin module. I’ll use this as my inspiration for the background and the field. I’ll also use the background color of the Shop Now CTA for the search results. I’m especially paying attention to three design elements:

  • Newsletter Background color – #757d79
  • Shop CTA Background color – #dcae83
  • Padding for both – 50px (top, bottom), 60px (right, left)

Styling the search field

Styling the search field

Open the Background settings in the content tab. This section has three different background areas. Go to the last one. It’s just called Background. Enter the color here.

  • Background color – #757d79

Styling the search field

In the Design tab, go to the Spacing settings and enter the padding. This will let us see the area around the field so we can see the results better as we go. This also gives the search box a lot of color around it, which will match the elements in the layout.

  • Padding 50px (top, bottom), 60px (right, left)

Styling the search field

In the Search Field settings, add the field background color and the field text color. I made the field match the background of the module and just selected white for the text.

  • Field Background Color – #757d79
  • Field Text Color – #ffffff

Styling the search field

In the same settings, scroll down to Field Border Color and choose white. We could also adjust the thickness and radius of the border. I’ll leave it square to match the text field of the optin module.

  • Field Border Color – #ffffff

Styling the search field

Open the settings for Search Icon and select white.

  • Search Icon Color – #ffffff

Styling the search field

Open the settings for the Loader and select white for the Loader Color. The loader will only be seen momentarily, but it will look better if it matches the rest of the elements.

  • Loader Color – #ffffff

Styling the results field

Styling the results field

Open the Background settings in the Content tab and add the color to the Search Result Box and Search Result Item backgrounds. This won’t be visible while we’re styling the module since it only shows when it displays search results.

  • Background color – #dcae83

Styling the results field

In the Design tab, open the settings for the Search Result Item Text. In the Title tab, select the all-caps font style and choose white for the text color. I’m leaving all of the other title settings at default.

  • Title Font Style – TT
  • Title Text Color – #ffffff

Styling the results field

Open the Excerpt tab and select white for the Excerpt Text Color.

  • Excerpt Text Color – #ffffff

Styling the results field

Open the Price tab. Select Semi Bold for the price weight and white for the text color.

  • Price Font Weight – Semi Bold
  • Excerpt Text Color – #ffffff

Results

Here’s how the Ajax Search looks on Desktop with my styling. The search results display almost immediately. It looks elegant and smooth.

Here’s how it looks on Phone. The results stack and adjust to fit the screen.

Ending Thoughts

Adding Ajax search to your Divi website is fast and easy with the Divi Ajax Search plugin. It’s easy to use, easy to style to match your website, and the results are fast and look fantastic. You have a lot of options for the post types it can search and for the types of content it will display in the results.

Now your Divi website can have a professionally designed Ajax search feature that your visitors will appreciate!

We want to hear from you. Have you added a real-time Ajax search to your Divi website? Let us know about your experience in the comments.

Featured Image via Kroster / shutterstock.com

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting

Divi Events Calendar

Easily display and style events from The Events Calendar with custom ...

View Product

8863 Sales

Divi Essential

All in one set of 64+ design modules with 600+ layouts and 3 ...

View Product

4106 Sales

Divi Supreme Pro

With 60+ Divi premium modules and extensions to choose from. Take ...

View Product

11759 Sales

Divi Contact Form Helper

Upgrade the default Divi Contact Form with tons of missing, premium, ...

View Product

4081 Sales

Table Maker

Table Maker brings beautiful responsive tables to the Divi-Builder. ...

View Product

7533 Sales

Divi Plus

A versatile multipurpose plugin with lots of modules to design & ...

View Product

8043 Sales

Divi Carousel Module 2.0

Robust and extremely customizable carousel module for divi.

View Product

8716 Sales

DiviMenus

A powerful menu builder that brings the coolest designs and popups ...

View Product

6218 Sales

Premade Layouts

Check Out These Related Posts

New Divi Starter Site for Non Profits (Quick Install)

New Divi Starter Site for Non Profits (Quick Install)

Posted on July 12, 2024 in Divi Resources

Divi empowers you to build the best websites possible, and now, Divi Quick Sites takes website creation to a whole new level! This revolutionary tool lets anyone, regardless of skill level, generate a complete website in under two minutes! Divi Quick Sites provides everything you need to launch...

View Full Post
How to Use Divi’s AI Website Builder (Guide)

How to Use Divi’s AI Website Builder (Guide)

Posted on July 11, 2024 in Divi Resources

Divi Quick Sites is one of the most exciting recent releases, helping you tremendously speed up your website creation process! This new feature provides you with two options: choose a Divi Starter Site to get your website up and running or use Divi’s AI Website Builder to generate an entire...

View Full Post
New Divi Starter Site for Real Estate (Quick Install)

New Divi Starter Site for Real Estate (Quick Install)

Posted on July 10, 2024 in Divi Resources

Divi empowers you to build the best websites possible, and now, Divi Quick Sites takes website creation to a whole new level! This revolutionary tool lets anyone, regardless of skill level, generate a complete website in under two minutes! Divi Quick Sites provides everything you need to launch...

View Full Post

3 Comments

  1. I am looking for a site template for heavy equipment, like a tractor or bulldozer site. It should be sales oriented, but not sell product online these products that are over $20,000 aren’t typically purchased online.

  2. The main reason I selected Divi (and ET) over all the many competitors out there was that ET offered a lifetime license, and they didn’t. Please convey to all your vendors in the Divi Marketplace that I and probably many others would be much more apt to purchase their product if they also offered a lifetime license (like Divi, and Divi Life).

    As it sits, there are probably a dozen products in the marketplace that I WOULD have bought if there were a lifetime license available, but I am not willing to subject myself to a lifetime of recurring charges.

  3. Wow , great, Learned a new thing today, I will try my woo commerce website

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today