Do you want to customize the WooCommerce product search on your online store? WooCommerce provides a separate shop page for a product listing. By modifying product searches, your customer can filter their desired product on the shop page itself. In this article, we study how to customize a WooCommerce product search on the WordPress website.

WordPress comes with a built-in search form. When a user enters some keyword in a search field, they will redirect to the search page where content related to the keyword will display. In WordPress, the search page normally looks like a post listing page.

This search flow is ideal for CMS websites. But, when it comes to WooCommerce we need to modify this flow.

For WooCommerce, when a user searches for the product it should show the filtered result on the shop page. It doesn’t make any sense to show the result in a format of a post listing page.

Let me explain it through the screenshots. In my case, I am using the ‘twentytwentyone’ theme. I installed the WooCommerce plugin and a few products are listed on my shop page.

Now, when I enter the keyword say ‘t-shirt’ in the search field, it will redirect to a page where I see the product as shown in the screenshot below.

We don’t want this behavior in a WooCommerce store. Here we prefer product search should be filtered out on the shop page itself like below.

Having said that, let’s see how to customize product search in WooCommerce.

Customize Product Search of WooCommerce

WooCommerce stores all the products with the post_type ‘product’. To achieve our goal, we need to pass the parameter post_type=product in the search URL.

Basically, when we hit the search button we need to modify the URL

YOUR_SITE_URL/?s=t-shirt

With

YOUR_SITE_URL/?s=t-shirt&post_type=product

For this, we need to create a searchform.php file in our active theme’s directory. This is the file from which WordPress displays a search form after calling the get_search_form() method. The developer should create this file in the theme folder if it does not exist.

If you already have searchform.php into your theme, then you just need to add a hidden field to the form as shown in the below code.

searchform.php

<form method="get" action="<?php echo home_url('/'); ?>">
    <input type="text" name="s" placeholder="What you are looking for?" value="<?php the_search_query(); ?>">
    <input type="hidden" name="post_type" value="product">
    <input type="submit" class="search-submit" value="Search" />
</form>

Here, you should add some styling to this form to match it with your website design.

Notice we have passed a hidden field with the name ‘post_type’ and value as ‘product’. This is the actual logic for customizing the product search in WooCommerce.

Now, try to enter any product name in the search field, it will redirect you to the shop page. And on the shop page, you will see the filtered result related to the keyword.

I hope you understand how to customize the WooCommerce product search on your WordPress website. I would like to hear your thoughts and suggestions in the comment section below.

Related Articles

• A Quick Guide on WooCommerce REST API
• How to Add Custom Endpoints to WordPress API
• How to Display Related Products Using WooCommerce REST API

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.