Divi Ajax Search

Mar 25, 2024 | Divi Resources

Why Use Ajax Search Plugin on Your Divi Website

Ajax search is a popular way to find things on a blog, website, or WooCommerce store. It gives users the ease to browse the entire website or store from a single page without any reloads. He only needs to enter a specific term and all the posts, pages, or products relevant to that specific term are displayed in the Ajax search results. This saves the time of the users and takes the user experience one step ahead.

Ajax Search Plugin by Divi Extended is the ideal solution for that and you can use it on your Divi website to load it with Ajax search functionality. Recently, it received a major update with some advanced features including

  • Two new layouts.
  • Link to search result page to show all results.
  • Control to limit the excerpt length.
  • Close icon in the search field.
  • Control for padding, border, and background color for search result items.

Let’s explore what Ajax search functionalities it offers and understand all its features with the help of some use cases.

To experience all these use cases, you need to download the Ajax Search plugin.

What Can We Do Using Divi Ajax Search

Divi Ajax Search plugin is capable of performing several types of search-related tasks. We will demonstrate its features with the help of some use cases.

Imagine a user looking for a post on a blog website loaded with tons of content and posts. It would be exhaustive for him to manually search for a specific post or any post covering a specific topic.

Let’s take an example where the user wants to see the blog posts covering the term ‘Technology’. He will just mention technology in the search field and all the relevant posts related to the term would appear in the live search results.

Divi ajax search plugin

Want to know how the Divi Ajax Search plugin is configured to do it on your website?

From the  Search Area section, you only need to select the Title, Content, and Excerpt.

Divi ajax search plugin configure search area

After this, you need to select Posts from the Posts Type drop-down.

Divi ajax search plugin configure

These settings will direct the Divi Ajax Search plugin to find the relevant posts whose title, content, and excerpt contain that relevant term.

The recent update of Divi Ajax Search also offers Pagination to navigate through all the search results easily.

Find posts using Divi ajax search plugin

The two new layouts packed in the new update let you display live search results in a unique style. You can select the desired one from the Display section.

Divi ajax search plugin layouts

Layout 2

Divi ajax search plugin layout one

Layout 3

Divi ajax search plugin layout two

You can show or hide the Search Icon but it is better to show it in the search field to notify users about the search. If you don’t want to display the excerpt or featured image you have the option to deselect them in the Display Fields but for a better live search presentation, we recommend keeping them checked.

Divi ajax search plugin display fields

Moreover, with the new update of this plugin, you can also modify the Excerpt Length to fit your needs.

Divi ajax search plugin excerpt length

The recent update of the Divi Ajax Search plugin powered it with a Clear Icon to reset the search. Now you don’t need to press the backspace key repeatedly and the search field can be cleared with a single click.

Divi ajax search plugin clear search option

The update also gives the convenience of navigating the users to the search page with all the search results using a link.

Divi ajax search plugin enable search results link

Let’s quickly look how to configure these settings on the Ajax Search plugin.

Want to show search results in a masonry layout, that’s possible with this search plugin. You can also set the Number Of Columns and adjust the Column Spacing for a decent look of live search.

Divi ajax search plugin masonry layout

Moreover, the options to set the Placeholder, number of search results, custom No Results Text, and exclude posts using Post IDs were already there to tune up the Ajax search according to your needs.

2. Search Products on a WooCommerce Store

When we talk about Ajax search on a WooCommerce store, it is a must required component. The majority of the customers are looking for some kind of specific product and that’s why they love to use Ajax search instead of navigating through the product category or shop pages.

Here we will see how you can deploy or configure the Ajax search and how the new updates of this plugin work to enhance the product search experience on your WooCommerce store.

Let’s understand this with an example.

The customer wants to search for a product having pockets. Divi Ajax Search plugin simply finds all those products having ‘pockets’ mentioned in their Product Title, Product Description, and Product Short Description.

Find products on Woo store using Ajax search

To achieve this you need to select the Post Type as Products. The other important settings that widen search functionality in your store is to select the search parameters in the Search Area.

Configure search type using Ajax search

We already used the Title, Content, and Excerpt for the Blog post websites. Although these also work for the WooCommerce products too, but we need to widen our search area by choosing the Taxonomies, Product Attributes, and Product SKU to find the products.

Let’s understand the working of these parameters with an example.

Suppose a customer is looking for a product of ‘lemon’ color. Ajax search will simply find the products having Lemon color in the attributes.

Find products on Woo store using Ajax search color attribute

Similarly, if a customer wants to search for products of a specific size, he can enter the size, and the products available in that size would be displayed in the search results.

Find products on Woo store using Ajax search size attribute

Enable See All Results link redirects customers to the search page with a link. Now customers can view all the search results in detail on the search page.

See all products of Ajax search

One other useful feature is the scroll bar that helps customers easily browse the search results.

Scrollbar in Ajax search

You can easily enable the Scrollbar in the search settings of the plugin.

Scrollbar settings in Ajax search

If customers want to start a new search they can reset the Ajax search field using the clear icon.

Reset Ajax search with clear icon

Pagination also works great to navigate customers through the search results without reloading the page.

Display pagination in Ajax search

After exploring all the features of this plugin let’s take a view at the styling options. You can easily style the Search Field text color, background color, padding, and other design elements. 

The new update also received styling options to adjust the background color, padding, and border for the Search Result Item. Similar styling options are also available for the Clear Icon, Search Icon, Loader, Featured Image, and Pagination.

Ajax search styling option

You can go through our other post, if you want to learn more about the use of Ajax search in WooCommerce stores along with other features for your store.

After getting a live demonstration of the capabilities of the Divi Extended Ajax Search plugin in this post, you’ve got a clear idea of how to use it on your Divi website and how it works to make the customer experience on your website seamless. We cannot overlook this because it is essential in today’s web design industry to increase sales and build business.

Posted By:
A curious learner who is ready to break down and simplify things to make them easily understandable to the end user. His main motive is to deliver easy-to-grab solutions in a user-friendly manner.


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.


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.

How to Generate Page Layouts with Divi AI

How to Generate Page Layouts with Divi AI

Welcome to the future of web design, where you don’t need to hire a Web Designer, Developer, or Copywriter. Elegant Theme has introduced the world with Divi AI. That's an AI-powered web designing tool ready to bring innovation to Divi websites. According to a recent...

Divi Hosting Company Child Theme to Present Hosting Services

Divi Hosting Company Child Theme to Present Hosting Services

Hosting companies require a practical Divi hosting child theme for their WordPress website to introduce their business to the customers. This free Divi Hosting child theme perfectly displays all the services, solutions, latest updates, and faqs on your Divi website....

How to Create a Divi Custom Post Type Slider

How to Create a Divi Custom Post Type Slider

Custom post type is an innovative approach in WordPress and Divi also supports custom post types to provide smart solutions to its users. If you are using the Divi theme, you can unlock the full potential of custom post types. Divi custom posts give complete freedom...

Divi WooCommerce Extended

Popular on Divi Extended

Divi Plus WooCommerce Extended Divi Layouts Extended Divi Header Layouts