How to Customize WooCommerce Product Search

Do you want to customize WooCommerce product search and enhance it? When running a WooCommerce store, you need to ensure that the shop is very well optimized for sales and performance. Adding and customizing a product search can help you a lot with it. 

But before we go through the process, let’s have a look at why you may need to customize the product search on your WooCommerce store first. 

Why Customize Product Search in WooCommerce?

WooComemrce is an easy-to-use tool to create an online shop within minutes without writing a single line of code. It comes with every functionality a typical online store needs. But some features are limited.

For example, the default WooCommerce product search feature is minimal. If your store has more than 1000 products, customers will have difficulty finding the right product they need through the default product search. This can affect your business very badly. By providing accurate search results, you can reduce your store’s cart abandonment rate and bounce rate.

You can easily modify your desired things when using WordPress as the CMS. Similarly, in this case, you can give a seamless product search experience on the front end by customizing the WooCommerce product search feature as well. So, your shop visitors and customers can easily find the right product that they need

And thus, it will also increase your overall revenue. Alternativelty, it can also boost the user experience of your WooCommerce website.

How to Customize WooCommerce Product Search

To customize the WooCommerce product search, we have got 3 major methods.

  1. Default search widget
  2. Using a plugin
  3. Programmatically

We will show you all three methods below. So, you can pick your preferred one from there.

1. Add the Default Search Widget

It is well known that WordPress has a lot of default customizable options to offer for your website. Therefore, you can just use the default search widget to add it to your website.

If you need to add it to any of your available widget areas, you can just follow these steps. But there are further two different ways with which you can add and customize your product search widget in WooCommerce. 

1.1. Add Product Search from the Widget Menu

If you check Appearance > Widgets from your WordPress dashboard, you will see all the available widget areas.

customize woocommerce product search - wordpress widgets

The widget areas may be different depending on the WordPress theme you are using. Some WordPress themes come with many widget areas, while others have limited areas. However, to add a search widget, you must expand the widget area you need to use.

Here, we will be using the Right sidebar widget area. So, you need to click on the + button to add more widgets to that area.

customize woocommerce product search - add widget

Then, search for the Product Search widget on the widget area. Once you find it, click on it to add it to the designated area. 

customize woocommerce product search - product search widget

Now, all you have to do is Update the page once you have modified it. And if you check the website from the front end, you will see a product search widget on the right sidebar of your website.

product search widget customize woocommerce product search

1.2. Add product Search Widget from Customizer

You can also add the search widget through the WordPress Customizer. First, open the customizer from Appearance > Customize in your WordPress dashboard and select the Widgets option.

customize woocommerce product search - widgets

On the next screen, you will see all the available widget areas. Again, just like the previous approach, they all depend on the theme that you use for your website. Just select the widget area where you want to add the product search. 

widget areas all

Now, click on the + button and add the Product Search widget there.

customize woocommerce product search - product search widget

Inside the live preview tab, you will see how it looks. If you are okay with the customization, Publish the page.

update customizer customize woocommerce product search

That’s it! This is how you can add a default product search widget to your WooCommerce store using the widget option or the theme customizer. But as mentioned before, the default options have very limited customization options. So if you want to make more changes to it, you will either have to use a plugin or do so programmatically. 

2. Customize WooCommerce Product Search using a Plugin

The WordPress plugin repository also contains thousands of plugins that can help you customize your WooCommerce website as well. You can use some of them to customize your product search too. 

Out of them, Advanced Woo Search is a great plugin to add and modify your WooCommerce product search. You can easily allow your customers to search for the products according to their title, categories, SKU, ID, and so on. 

But to start using the plugin, you need to do install and activate the plugin first.

2.1. Install and Activate the Plugin

Open Plugins > Add New from your WordPress dashboard and search for the keywords of the plugin. After you find the plugin, click on Install Now to install it. As soon as the installation is complete, Activate the plugin. 

install advanced woo search plugin

2.2. Configure the Plugin Settings

Once you have activated the plugin, you will see its settings on the left-hand side of the WordPress dashboard under Adv. Woo Search > Settings.

advanced woo search customize woocommerce product search

From there, you can configure the general options along with settings for performance, search form, and search results of the plugin. 

You have multiple ways to embed the search option inside your WooCommerce installation. For example, the shortcode or widget if you are looking for a beginner-friendly method. On the other hand, if you need a more advanced technique, feel free to use the PHP snippet mentioned on the page.

search widget inserting

From the same page, you can customize your search icon and output. For example, when a customer enters a search keyword, you can specify the sources that are preferred to look in.

search source

Similarly, you can customize the search form and search results from the same page. Once you have done modifying the options, save the updates.

2.3. Add the Search Widget to your Store

After you have configured all the necessary settings, the very next you need to do is add the search widget to the site. As mentioned above, you can choose the shortcode, widget, or coding method to complete this task.

In this case, we will add the search option using the widget. All you have to do is search for AWS Widget and add it to the widget area. 

aws widget

You can also configure the search label from the same screen.

aws label

After adding the widget, Update the page. Once you have done that, you need to check it from the front end. You will see the search form there.

aws search form customize woocommerce product search

If you want to try any other WooCommerce product search plugins, feel free to have a look at this article.

3. Edit Product Search in WooCommerce Programmatically

If you are okay with editing codes and modifying the core files, you can customize the WooCommerce product search with some snippets too. We’ll show you this approach step by step as well.

But before making changes to your live WooCommerce store, ensure you have created a complete site backup. This way, you can ensure nothing will go wrong in case of a plugin/ code conflict. Also, we will not be pasting the snippet directly to the parent theme’s functions.php file. Instead, you must create a child theme or use a site-specific plugin. Of course, you can always use a child theme plugin to make it.

For this tutorial, we will be using Code Snippets. Code Snippets is a free and easy-to-use WordPress site-specific plugin that will help users add custom codes and CSS to the WordPress installation. If you plan to use the same, install and activate Code Snippets on your installation.

Code snippets plugin

Once you have installed the plugin, you will see its configuration on the left-hand side. Just add a new snippet to your website.

add new snippet customize woocommerce product search

You can copy the following code.

/**
 * This code snippet will replace the default product search from in the search widget.
 */add_filter( 'get_product_search_form', 'quadlayers_custom_product_search_form' );function quadlayers_custom_product_search_form( $form ) {
    ob_start();
    ?>
    <style>
    /*Include your styles rules here*/
    </style>
    <form role="search" method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
        <div>
            <label class="screen-reader-text" for="s"><?php echo __( 'Search for:', 'woocommerce' ); ?></label>
            <input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" placeholder="<?php echo __( 'My Search form', 'woocommerce' ); ?>" />
            <input type="submit" id="searchsubmit" value="<?php echo esc_attr__( 'Search', 'woocommerce' ); ?>" />
            <input type="hidden" name="post_type" value="product" />
        </div>
    </form>
    <?php
    return ob_get_clean()
;}

And paste it inside the snippet.

woo search code customize woocommerce product search

Before saving it, let’s have a closer look at the code. Here, we are using quadlayers_custom_product_search_form as the function. So, if you are planning to add custom CSS right through the PHP code, use this field:

<style>
/*Include your styles rules here*/
</style>

After modifying the CSS section (if you need it) according to your preferences, save the snippet.

save snippet

That’s it.

This is how you can modify the WooCommerce product search programmatically.

Bonus: Add WooCommerec AJAX Product Filters

Adding AJAX to your WooCommerce installation is a great idea. It will help the store customers find the exact product they need without the hassle. This section will show you how to enable your online store’s AJAX product filtering system.

By default, WooCommerce’s default filtering system is minimal. You have to use a third-party WordPress plugin to unlock the full potential of the AJAX filtering system. And for this tutorial, we will be using Advanced AJAX Product Filters.

So, you need to install and activate the plugin on your WordPress installation.

install advanced ajax

After activating the plugin, you will see the BeRocket menu on your WordPress dashboard. From there, go to the Product Filters option.

product filters

These are the global configuration options, and you can modify them according to your preferences. When you are ready to move forward, click on the Filters option. From there, you can create custom product filters.

Finally, click the Add Filter button to add a new filtering option.

add filter

On the next page, you will see a dedicated page for customizing your filters.

filter

You can add as many filters as you want. After publishing filters, they all will be displayed under the plugin’s Filters menu from where they can be managed.

All product filters

If you want, you can also create a filter group from the groups’ section. You can access it from the Groups menu.

All group filters

Once you have modified the filters according to your requirements, you can add the AAPF filter widgets to your WooCommerce store. You can add it to a widget area through Appearance > Widgets from your WordPress dashboard. 

Add widgets to the sidebar

Once you update the widget, you can preview it on the website from the front end.

WooCommerce Shop Frontend

This is an easy way to add WooCommerce AJAX product filters to your inline store. But if you need more information on it, please check out this link.

Conclusion

So this is how you can customize WooCommerce product search results. The three methods we recommend are:

  • WooCommerce search widget
  • Plugin
  • Coding

If you need to add the search option to any available widget areas to make it more accessible, you can use the first method we mentioned above. On the other hand, if you need another easy-to-use solution that will enhance the search feature, you should consider using a plugin. Finally, if you need a more advanced method and can handle codes, you should choose the third option.

All these methods are beginner-friendly and will deliver the desired result.

We hope you have found this article helpful and enjoyed the read. Please consider sharing this post with your friends and fellow bloggers on social media if you did. Also, for more related articles, you need to check out our blog archive. However, here are some more of our articles that you might find interesting: