divi ajax search in woocommerce

Mar 13, 2024 | Divi Resources

Integrate, Optimize, and Configure Ajax Search Using Divi WooCommerce Extended

When on a WooCommerce store, customers prefer to search for the product they want. In this case, an Ajax or live search tool for WooCommerce helps find and display products in real time. This saves time, and not only increases user experience but also lowers bounce rates and increases conversions to your store. If you are using the Divi theme and want to use this feature on your store, you should go through this post till the end.

Imagine a customer looking for some kind of hoodie in your online store. With Divi Ajax search, he will simply mention ‘hoodie’ in the search area. By doing this he will get a list of all the products related to the ‘hoodie’ term.

Divi Ajax search in WooCommerce

Isn’t this great? Now he can directly view and pick his favorite hoodie without loading the product pages repeatedly. The Ajax search for WooComerce helps customers find their product quickly without navigating through the shop pages.

If you want to add Divi Ajax search to your WooCommerce store, the Divi WooCommerce Extended plugin includes a dedicated live product search module along with other multiple inbuilt solutions like Mini Cart, Carousel, and Checkout Manager – all packed in one plugin for Divi.

In this article, we will demonstrate, how to integrate, configure and optimize the Ajax live search module on your WooCommerce store. We will also take a look at the best Ajax search optimization strategies that you could implement.

Let’s start.

Integrate Ajax Search for WooCommerce

First, you need to install the Divi WooCommerce Extended plugin that includes Ajax search functionality.

Divi Ajax search in WooCommerce module

You should use the Ajax Product Search module on the topmost section of the shop page or home page of your WooCommerce store.

Configure Ajax Product Search

Navigate to the Configuration section and mention the desired text in the Search Field Placeholder. This will be displayed before a customer starts typing in the Ajax search area.

You can also limit the number of search results. This is helpful when you don’t want to irritate the customer by displaying hundreds of search results for a product.

Configure Divi Ajax search in WooCommerce

We also thought about what would happen if any product is not available in the store and the customer is trying to find it. For that, you can define a custom No Result Text.

divi ajax search

See how this reflects on Ajax search in the front end.

Product not found in Divi Ajax search

Tune Divi Ajax Search Parameters

This is the backbone of the Ajax Search module which is responsible for all the backend search queries. You can tune it according to your needs. It searches products with their titles, descriptions, categories, tags, and other parameters. If you want a deep search you must select all the parameters. 

Divi Ajax search in WooCommerce search parameters

In order for the product titles, descriptions, and attributes to match search queries and show up in the search results, you also need to optimize them with relevant keywords.

Suppose there is a T-shirt from ABC brand. Now you should optimize its product title as ABC T-shirt. If it is blue, you can also mention it in the title as well as the description. This helps a user searching for a blue or ABC brand T-shirt in the store to find it in the search results.

Keyword optimization in Divi Ajax search in WooCommerce

There is also an additional option that you can use if you want to exclude some products from the search. It requires the product ID that you want to exclude.

Exclude product in Divi Ajax search in WooCommerce

You can check the product ID of a product by navigating to the WooCommerce >> All Products. Each product in the list has its unique product ID.

Product ID in Divi Ajax search in WooCommerce

Let’s observe what happens when we mention the product id in the Exclude Product IDs field.

Product ID in Divi Ajax search in WooCommerce

The product having 268 as its product ID is not visible in the search results. This will let you exclude products that you don’t want to display in search.

Configure the Ajax Search Display

This section of Ajax search configuration will manage the display of search results on the front end. You get the option to display or hide the search icon in the search bar.

What you want to display in the search results is the next step of your configuration. You can display the product title, product description along with featured image and its price in the search results.

Configure Divi Ajax search in WooCommerce

You can display the search results in up to 5 columns to show more products on a single view. Multiple columns avoids the need of unnecessary scrolling if the search result list is a little long. The search results should look clear and for that you can adjust the column spacing and can also use the masonry option as well.

Multiple columns Divi Ajax search in WooCommerce

If the list of search results is long, you can also deploy a Scrollbar. This helps the users to easily browse the entire search results with a scrollbar.

Multiple columns Divi Ajax search in WooCommerce

See how the scrollbar enhances the search experience of the users.

Scroll bar in Divi Ajax search in WooCommerce

Clicking on the Link setting allows you to quickly route users from the search results to the product pages. Now, it’s up to you where you want to show the products on the browser. Either you can choose a new tab or the same window of the browser.

Show products in new tab in Divi Ajax search in WooCommerce

In the new tab it would be displayed like this.

Display products in new tab in Divi Ajax search in WooCommerce

In both scenarios, the user’s search experience remains unaffected, and he can view the product by switching to a new tab or window.

Customize the Divi Ajax Search to Suit Your Needs

Last but not the least is styling. The Ajax search also provides you the option to customize its elements. Customize the search field background color, text color, field focus color and other style settings to make it appealing on the shop page.

Style Divi Ajax search in WooCommerce

Adjust the search icon’s size, choose a suitable color and maintain a medium size to draw the attention of customers to the search.  

Search icon in Divi Ajax search in WooCommerce

Similarly, you can adjust the size and color of the loader to make it visually appealing while consumers wait for the search results to appear.

Loader in Divi Ajax search in WooCommerce

See the effects after customization in the Loader size and color.

Display Loader in Divi Ajax search in WooCommerce

In the same way you style the Product Title, Excerpt, Price, and No Result section. This helps you to style the product search for a perfect appearance of store.

Search result item in Divi Ajax search in WooCommerce

The product image in the search results also need to appear perfect and you can adjust its width, height, border and rounded corners to instantly draw the attention of users.

Search result item styling in Divi Ajax search in WooCommerce

Moreover there are many other styling options available to customize the sizing, spacing, box shadow and animation of the search results section.

To sum up, Ajax search provides an innovative way to improve the user experience on WooCommerce stores. Its quick, responsive search results improve user satisfaction, simplify navigation, and ultimately boost the conversion rates. If you want to make your WooCommerce store to be more practical, you should deploy an Ajax search on the header of the website. Moreover, you can also consider Ajax Search plugin for your blog, news and other websites. That’s an individual plugin with advanced search features by Divi Extended.



Posted By:
Jagmohan
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.

0 Comments

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.

0 Comments

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