Customize WooCommerce Product Search On Your WordPress Site

Do you want to customize the WooCommerce product search on your online store? WooCommerce provides a separate shop page for a listing of products. 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 the 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 showing the result in a format of a post listing page.

Let me explain it through the screenshots.

In my case, I am using the ‘twentyfifteen’ theme. I installed the WooCommerce plugin and few products are listed on my shop page.

Shop Page

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

Default Search

This is something we don’t want on a website. After all, it’s an online store so we prefer product search should be filtered out on the shop page like below.

WooCommerce Product Search

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 parameter post_type=product in the search URL.

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

YOUR_SITE_URL/?s=development

With

YOUR_SITE_URL/?s=development&post_type=product

For this, we need to create a searchform.php file into our active theme’s directory. This is the file from which WordPress displays a search form. If this file is not found in a theme folder then the search form is rendered from the core file of WordPress. 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">
</form>

Here, you should add some CSS to this form and 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

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

6 thoughts on “Customize WooCommerce Product Search On Your WordPress Site

Leave a Reply

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