How to Add WooCommerce Advance Search

For any WooCommerce website there search option is very much important. Client are confused which search plugin to use or how to enable Ajax search for their online store.

There several search plugin are available in the market you can use for your store. I am here giving you a small list of best plugins you can consider using into your WooCommerce store and how you can implement that plugin with your website easily.

The list of plugin you can consider to make WooCommerce Advance Search at your website.

WooCommerce Mega Search

WooCommerce Mega Search plugin allows your customers to search WooCommerce products in anywhere you want.

Advanced Woo Search

Advanced Woo Search – powerful live search plugin for WooCommerce. Just start typing and you will immediately see the products that you search.

Ajax Search for WooCommerce

The plugin allows your customers to search products easily and quickly. It will display the results instantly while typing in an input box.
You can display the WooCommerce AJAX search form anywhere on the page.

Ajax Search Lite

Ajax Search Lite – is a live search plugin for WordPress. This responsive live search engine, which will boost your user experience by providing a user friendly Ajax powered search form – an Ajax live search. You can filter the results with the category and post type filter boxes as well. Google autocomplete and keyword suggestions also included.

Among this popular plugins I am writing details about how you can add WooCommerce advance search using WooCommerce Mega Search plugin. Lets see details about integrating the plugin into your website.

Installation :

Go to your WordPress dashboard then from left menu click on Plugins and Then click on Ad New Plugin

installation-of-woo-mega-search

Adding Plugin :

serach-and-active

Activating the plugin :

activation-of-woo-search

From the plugin list please click on activate the plugin to make it active and functional.

So after activating the plugin you need to go to WooCommerce > Settings from left sidebar of WordPress dashboard and there from top right corner you will get a tab name Mega Search. Just check inside settings.

woo-mega-search-settings

There you will get the following settings :

Search Form Shortcode which is the shortcode which you can use any of your post or page to show search form inside post or page content. But as usual people not showing search inside page or post content but the developer keep the option so that you can use it by all possible way.

[rox_woo_search]

Make sure this code is not to include inside php. If you want to show the search bar by hard coding at any of your theme location then you can get the full code at bellow short-code.

<?php echo do_shortcode('[rox_woo_search]'); ?>

Or

<?php echo RoxWCMS()->get_search_form(); ?>

This option actually for advance user. But if you think you don’t dig into code or don’t like to take such coding stretch or may be you can be afraid of coding then just check there is a button called Replace Theme Search Form that the most important part of the plugin which make you more interested to use the plugin on your site because the plugin developer think in different angle like he have thought about developer and non developer too.

So if you enable the button all search form which is using WordPress core search functionality will be transformed to WooCommerce Advance Search which actually Ajax enable instant search.

Replace Theme Search Form

So just enable the button and relax all search form replaced by WooCommerce advance search functionality.

 

Now another most important feature of the plugin is you can able to enable add to cart button on search result item. So user can add their desire search product on the basked from the result instantly.

show-add-to-cart-button

This above option will help you to add any product in your cart on your WordPress.

Befroe after

On the other hand, disabling this option “Show Add To Cart” , you will not find any cart option for adding any product.

Before after2

Now I am telling about ” Show Product Rating” option. If you enable this option, then you will learn the rate of a product.

Before after 3But if you disable this “Show Product Rating” option, then you will find a result. That means you will not find any image of the rating stars.

Before after 5

Customizing Icon Color:

You could customize your general setting as your own choice. For this, just click “Customized Icon Color” option.

 

Customized

 

Clicking this option you will find

 

Customized 1

Although you will find “Search Icon Color” which is sky blue by default. You could change this color.

Customized 4

“Recent Icon Color” should be customized.

Customized7

You could also customize “No Product Icon Color”.

Customized 8

To customize ” Loading Icon Color”, you need to click on this option’s rectangular.

customizes 12

Leave a Reply

Your email address will not be published. Required fields are marked *