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.
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.
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.
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
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.
<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.
- 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.