How to Add Custom Product Search in WooCommerce

Enhancing user experiences in WooCommerce involves more than just fancy designs and flashy landing pages. It is about optimizing the search functionality to help users quickly find what they’re looking for, leading to successful sales.

WooCommerce provides an ideal platform for creating your own online store. However, to unlock its full potential, customizing the product search feature is crucial. This customization simplifies the search process for your target audience, increasing the likelihood of converting them into paying customers.

This article will explore the importance of WooCommerce product search and how it can benefit your online store. Let’s get started!

Why Customize WooCommerce Product Search?

By default, WooCommerce search bars take the products at face value. It only understands and indexes titles, content, and post snippets. This means that on its own, it doesn’t understand the product nuances.

For instance, a bag and a travel bag are different things for the default WordPress search, but as a store owner or a manager, you understand that these can mean the same thing. And you’d want your audience to get the right results even if they don’t search for the exact match. That’s where customizing your WooCommerce product search comes in handy.

Here’s why you should do it:

• It makes it easier for your visitors to find what they need.
• To give your users a better understanding of your products. You can add relevant tags and categories that you want indexed.
• You can better meet the target audience’s intent.
• You don’t want to lose customers just because they didn’t punch in the exact match keyword for a product you offer.

At the end of the day, it’s there to make your store more profitable. But sadly, most WooCommerce store owners don’t leverage this feature. As a result, their profits aren’t optimized, and they wish there’d be a way to solve this problem.

And definitely, there is. With WordPress and WooCommerce, there’s hardly ever a problem that doesn’t have a solution. Here I’ll cover the 2 ways to customize your WooCommerce products and grow your store.

How to Add Custom Product Search for WooCommerce

WooCommerce’s built-in product search method may be insufficient for effectively handling larger product catalogs. Fortunately, there are two ways to address this issue:

• Using code modifications
• Using a plugin

Let’s discuss them both in detail.

Add Custom Product Search for WooCommerce (Via Code)

Here’s a quick step-by-step method of overriding the default product search form via coding. I will use the get_product_search_form filter for this. You can use a custom template with the name product_search_form.php.

I will add a custom code snippet to the functions.php (located in the themes folder), which will replace the default product search form in the search widget.

add_filter( 'get_product_search_form' , 'woo_custom_product_searchform' );

function woo_custom_product_searchform( $form ) {

    $form = '<form role="search" method="get" id="searchform" action="' . esc_url( home_url( '/'  ) ) . '">
		<div>
			<label class="screen-reader-text" for="s">' . __( 'Search for:', 'woocommerce' ) . '</label>
			<input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="' . __( 'My Search form', 'woocommerce' ) . '" />
			<input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search', 'woocommerce' ) .'" />
			<input type="hidden" name="post_type" value="product" />
		</div>
	</form>';
    return $form;

}

• Navigate to the theme folder.
• Create a new file named “product_search_form.php”.
• Open the “product_search_form.php” file.
• Insert the following code into the file:

	$form = '<form role="search" method="get" id="searchform" action="' . esc_url( home_url( '/'  ) ) . '">
		<div>
			<label class="screen-reader-text" for="s">' . __( 'Search for:', 'woocommerce' ) . '</label>
			<input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="' . __( 'My Super Search form', 'woocommerce' ) . '" />
			<input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search', 'woocommerce' ) .'" />
			<input type="hidden" name="post_type" value="product" />
		</div>
	</form>';
	
	echo $form;

Note that the template file will take priority over any filter-based method(s). This means that even if you use a filter, the presence of the template file will ensure that the search form comes from the file rather than the template.

To implement an AJAX-based search, you could use another custom code snippet. This snippet allows you to modify the search parameters. In addition, you could also deactivate AJAX-based search by setting ajax_disable to TRUE.

global $avia_config; 

$search_params = apply_filters('avf_frontend_search_form_param', array(

    'placeholder'  	=> __('Search','avia_framework'),
    'search_id'	   	=> 's',
    'form_action'	=> home_url( '/' ),
    'ajax_disable'	=> false
));

$disable_ajax = $search_params['ajax_disable'] == false ? "" : "av_disable_ajax_search";

$icon  = av_icon_char('search');
$class = av_icon_class('search');
?>

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div>
        <label class="screen-reader-text" for="s">Search for:</label>
        <input type="text"  name="s" id="s" placeholder='<?php echo $search_params['placeholder']; ?>' />
        <input type="submit" id="searchsubmit" value="<?php echo $icon; ?>" class="button <?php echo $class; ?>" />
        <input type="hidden" name="post_type" value="product">
    </div>
</form>

If you prefer the coding route, the provided code is all you need for a custom WooCommerce product search. However, coding requires technical expertise. Alternatively, you can use a plugin for an easier setup.

Note that setting up a custom WooCommerce product search via a plugin is almost the same as setting it up via coding. But both have their own perks.

Using coding provides more customization options, enhancing visitors’ search experience. However, it may require technical assistance.

On the other hand, plugins allow you to create a way better custom product search without any hassle, although you may encounter some limitations. Now, let’s discuss the plugin method.

How to Add Custom Product Search for WooCommerce (Via Plugins)

Follow the steps below:

• Go to your WordPress dashboard and click on “Plugins” in the left-hand menu.
• Select “Add New” from the dropdown menu.
• In the search bar, type “Advanced Woo Search” and press Enter.
• Look for the “Advanced Woo Search” plugin and click on “Install Now” next to it.

• Once the installation is complete, a button will appear that says “Activate.” Click on it to activate the plugin.

• After activation, go to the back panel of your WordPress site.
• Look for the unlocked plugin called “Advanced Woo Search.”

• Click on the plugin to access its features and settings, which you can use to customize your WooCommerce product searches.
• Within the plugin, you will find various options that you can adjust to match the search queries of your target audience.
  
• The plugin also provides reports on customer behaviors related to their searches, helping you understand what they are looking for and enhance their search experience.

• To generate reports, navigate to “WooCommerce” in your WordPress dashboard.
• Select “Reports” from the menu.
• Adjust the settings within the Reports section according to your preferences and requirements.

5 Best WooCommerce Custom Product Search Plugins

There are several plugins that can help you add custom search for WooCommerce. I’ll discuss the 5 best ones here that can help you with setting up customized product searches for WooCommerce. Remember, with several plugins; you also get add-ons that help with more than just a custom search.

For example, some plugins can help you optimize your product descriptions and texts so that your product becomes better ranked on the SERPs. So, let’s explore the best plugins for custom search.

1. WooCommerce Product Filters

WooCommerce Product Filters is an excellent plugin for efficient custom product searches. This plugin offers numerous benefits to ensure your audience finds what they’re looking for. Here are some notable features that make it worth the investment:

• Several filtering options to sort out the products, such as categories, colors, tags, gender, etc.
• Option to choose AJAX filters or traditional filters.
• Several finger styles for better navigation of the store for customers.

Price: Starts at $79

2. WooCommerce Product Search

WooCommerce Product Search provides exceptional optimization for WooCommerce stores. Its wide range of flexible options allows for maximum customization of product titles, ensuring easy searchability for users.

The plugin has a super intuitive interface and anyone can easily learn to navigate it for their product searches.

Some of the key features include:

• Live search and live filtering which makes it easy for customers to see several relevant products at once.
• Very easy to use and configure.
• Offers statistics and business insights to help you run the store better.

Price: $4.09/month

3. YITH WooCommerce AJAX Search

YITH WooCommerce AJAX Search has many interesting features that you can use for customizing product searches for your WooCommerce stores. It provides various options to help your visitors have an improved navigation experience.

Moreover, the WooCommerce Product Search plugin offers additional features to enhance the user experience. It enables the display of product pictures in the search bar drop-downs, effectively captivating users and increasing click rates. Additionally, you can highlight discounts and deals, making them more prominent to visitors and further incentivizing their engagement.

Let’s see some note-worthy features of this product:

• Deliver a stellar searching experience to your visitors.
• Allow users to search for items based on SKUs
• Highlight exclusive products or sale options to increase conversions.

Price: Starts at $69.99/year

4. SearchWP

SearchWP is another option to consider for customizing your product searches for WooCommerce. It’s a paid plugin that helps you run your WooCommerce stores better. It has a user-friendly interface and almost no learning curve at all.

Here are a few reasons why you should consider this plugin for WooCommerce product search customization:

• Offers insights into customer behaviours.
• Automatically integrates with popular themes such as Divi, Astra, Avada, etc.
• Lets you set up filters so that your customers can find products based on intent and not exact keywords.

Price: Starts at $99/year.

5. Advanced Woo Search

Advanced Woo Search is another open-source plugin that you can use to customize your product search. One interesting feature that separates this plugin from others is that it offers to display pictures and prices in the search results.

Putting up interesting pictures to be displayed in the search bar can be a way to lure in potential customers and enhance your sales.

Some key features include:

• Lets you manage your product searches based on categories, tags, etc.
• Lets you segregate products based on various SKUs.
• Supports multiple variations of KW searches to enhance the search experiences of your users.

Price: Starts free; paid version starts at $69.

Conclusion

Customizing your product searches for your WooCommerce stores offers several significant benefits. Relying solely on the default search bar may result in lost customers and missed sales opportunities.

Optimizing your search mechanism makes it easy for customers to find the products they need, ultimately driving more sales. You can do so via the two methods we have shared above.

Owais Alam

is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at [email protected]

Get Connected on: Twitter Community Forum