How To Add WooCommerce Live Search To Divi Menus
In this tutorial you will learn how to add WooCommerce live search to Divi menus. To implement that we’ll use the free version of the FiboSearch plugin, you can download it from wordpress.org here.
This plugin helps show search result suggestions in real-time while user is typing the search query in the search bar.
You’ll learn how to set up and customize the live search for Divi theme menus (all header styles) and the menus created using Divi Menu and Fullwidth Menu modules.
Additionaly, you will learn how to enable the live search for the Divi MadMenu menus too.
Contents
Demo
Here is the Divi theme Default header style live search preview (works similarly with other header styles too):
And this is the demo of Divi MadMenu FiboSearch integration:
Advantages of using live search
Incorporating live search functionality into your WooCommerce online store can be a valuable investment in improving the user experience, increasing conversions, and staying competitive in the e-commerce landscape. Here are some reasons why using live search can be advantageous:
- Users get instant results
Live search provides instant results as users type, allowing them to see relevant products without having to hit the “Search” button. This saves time and provides a more seamless browsing experience. - Enhanced user experience
Live search offers a more interactive and engaging experience for users. It helps them find products more quickly and reduces the frustration of having to navigate through multiple pages of search results. - Improved discoverability
As users see search results appearing in real-time, they might discover products they weren’t originally looking for. This can lead to increased exploration of your product catalog and potentially higher sales. - Typos and misspellings
Live search can help users find products even if they make typos or misspellings in their search queries. The real-time suggestions can guide them to the correct products, reducing the likelihood of search errors. - Mobile-friendly
Live search is particularly beneficial for mobile users who might have limited screen space. It eliminates the need for scrolling through long lists of search results, making it more convenient to find products on smaller screens. - Increased conversions
By providing users with immediate and relevant search results, you can potentially increase the likelihood of users finding products they want and making a purchase. - Reduced bounce rate.
When users find what they’re looking for quickly, they are less likely to leave your site without making a purchase. This can help lower your store’s bounce rate. - Competitive advantage
Offering a live search feature can set your WooCommerce store apart from competitors who might not have implemented this functionality yet.
One of the methods to add WooCommerce live search to Divi menus using the FiboSearch plugin is to add it’s search bar to WP menus inline as a menu item in Appearance -> Menus.
This method applies to all Divi theme header styles as well as the menus created using Divi Menu and Fullwidth Menu modules since all of them use WordPress menus created in Appearance -> Menus.
To add FiboSearch search bar as a menu item go to Appearance -> Menus and select the menu you want to add it to. Then in the left column locate the FiboSearch bar item and add it to the menu as shown below:
The Divi theme Default header style menu will look something like this with the FiboSearch search bar added to it as a menu item:
And the live suggestions will show up like on the screenshot in the demo section above.
Adding FiboSearch search bar to Divi MadMenu menus as a menu item is done the same way as described above. And that’s because Divi MadMenu also uses the menus created in Appearance -> Menus.
Here is a header design similar to the Default header style mentioned above but created using Divi MadMenu:
Replace Divi menu search bars with FiboSearch plugin search bar
The other method to add FiboSearch plugin search bar to Divi menus is by enabling the built-in integration with Divi in the FiboSearch plugin settings.
To enable the integration all you need to do is to check the Replace them checkbox in WooCommerce -> FiboSearch -> Starting -> Search bars:
This will replace the search bars of all Divi header styles (Default, Centered, Centered Inline Logo, Slide-In and Fullscreen) as well as the search bars of the menus created using Divi Menu and Fullwidth Menu modules throughout your website.
That’s a really great feature allowing you to enable WooCommerce live search everywhere on your Divi website with just a single click.
However, what if you don’t need the live search in some parts of your website?
This is where Divi MadMenu comes in handly as it allows to enable FiboSearch for each MadMenu module Search element individually.
Add WooCommerce live search to Divi menus using Divi MadMenu
Enabling FiboSearch for Divi MadMenu Search element is done with one click in the Search element settings.
After you’ve enabled the integration with Divi in the FiboSearch plugin settings as shown above just go to MadMenu Settings -> Content -> Search and enable the Use FiboSearch Search Form setting:
Now, when users start typing the search query in the search bar of the Divi MadMenu Search element it will start showing live suggestions:
FiboSearch integration is disabled by default for the MadMenu module Search element so that you can enable it only for the MadMenu modules you need. This feature is available in Divi MadMenu since v1.9.7.
Next, you can customize the search bar and the live suggestions.
Customize FiboSearch search bar and the live search suggestions
You can customize FiboSearch search bar and the live suggestions using FiboSearch plugin’s built in design settings. But you may need to use custom CSS for more in-depth design customizations.
Divi MadMenu provides additional Custom CSS fields for customizing the FiboSearch search bar as well.
FiboSearch design settings
FiboSearch design settings allow you to apply some basic design tweaks to the search bar and the live suggestions panel.
You can find them in WooCommerce -> FiboSearch -> Search bar and Autocomplete sections.
There are live previews of the search bar and autocomplete (live suggestions) on the right side of the settings panel. This allows you to view the changes as you tweak the settings.
Customize FiboSearch search using custom CSS
If you need more in-depth customizations you will need to use custom CSS for that since the built-in design settings of FiboSearch plugin may not be sufficient for that.
So, here is the custom CSS that I’ve used for the demo above to make it look prettier:
/**
* Customize FiboSearch plugin search bar
* and live suggestions.
*
* @author Ivan Chiurcci
* @source https://divicio.us
*/
/* focused search input field */
.dgwt-wcas-style-pirx.dgwt-wcas-search-focused .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
border-color: #0758e6;
}
/* search bar icons */
.dgwt-wcas-open-pirx.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar button.dgwt-wcas-om-return path,
.dgwt-wcas-style-pirx .dgwt-wcas-close:not(.dgwt-wcas-inner-preloader) path,
.dgwt-wcas-style-pirx .dgwt-wcas-voice-search svg path,
.dgwt-wcas-style-pirx.dgwt-wcas-has-submit .dgwt-wcas-search-submit svg path {
fill: #0758e6;
}
/* suggested results: hovered and selected items */
.dgwt-wcas-has-headings .dgwt-wcas-suggestion.dgwt-wcas-suggestion-tax.dgwt-wcas-suggestion-selected,
.dgwt-wcas-has-headings .dgwt-wcas-suggestion.dgwt-wcas-suggestion-tax:hover {
background-color: #eee;
text-decoration: none;
}
/* suggested results: product image */
.dgwt-wcas-is-details .dgwt-wcas-si {
width: 70px;
}
.dgwt-wcas-si img {
border: none;
border-radius: 5px;
padding: 0px;
}
/* suggested results: product price */
.dgwt-wcas-sp {
display: flex;
}
.dgwt-wcas-is-details .dgwt-wcas-sp {
flex-direction: row;
}
.dgwt-wcas-sp {
font-size: 14px;
font-weight: 600;
}
/* suggested results: product title */
.dgwt-wcas-st>span {
line-height: 1.5;
}
/* product details: image */
.dgwt-wcas-details-main-image img {
border-radius: 5px;
margin: 5px auto 15px;
}
/* product details: title */
a.dgwt-wcas-details-product-title {
margin-bottom: 6px;
}
/* product details: sku */
.dgwt-wcas-details-product-sku {
margin-bottom: 6px;
}
/* product details: rating */
.woocommerce .star-rating span:before {
color: #0758e6;
}
.woocommerce .dgwt-wcas-pd-rating .star-rating {
font-size: 19px;
}
/* product details: review count */
.dgwt-wcas-pd-review {
font-size: 15px;
line-height: 20px;
}
/* product details: button */
.dgwt-wcas-pd-addtc-form .woocommerce a.button {
color: #0758e6;
}
/* suggested groups: product image */
.dgwt-wcas-tpd-image {
padding: 0px;
overflow: hidden;
border: none;
border-radius: 5px;
}This CSS may still be insufficient for your needs but it’s certainly a good starting point.
Customize FiboSearch search bar using Divi MadMenu Search element settings
Divi MadMenu provides custom CSS fields for applying CSS to the FiboSearch search bar as well.
The custom CSS fields become available in MadMenu Settings -> Advanced -> Custom CSS section when the Use FiboSearch Search Form setting is enabled in MadMenu Settings -> Content -> Search section.
The existing layout and design settings of the Search element in MadMenu Settings -> Design tab still apply to the search button as well as the Search element main container.
Final Thoughts
In this tutorial I’ve shown you how to add WooCommerce live search to Divi menus using the FiboSearch plugin. We’ve used two different methods: adding the search bar as a menu item and enabling the built-in Divi integration.
But FiboSearch plugin allows to add it’s search bar using some other alternative way as well. You can find the full list in WooCommerce -> FiboSearch -> Starting -> Alternative ways to embed a search bar section.
However, in this tutorial I wanted to highlight only the integration methods that are specific to menus.
Have you ever tried to add WooCommerce live search to Divi menus? Try to implement that with the FiboSearch plugin using the integration method(s) discussed in this tutorial, as well as the other available alternative integration methods, and feel free to share your experience in the comments section below.