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

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

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.

Subscribe To Our Youtube Channel

1. 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

[…]

 



This article was written by Randy A. Brown and originally published on Elegant Themes Blog.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Scroll to Top