Customize WooCommerce Products Search Form
Here is a quick method that will allow you to override the WooCommerce default products search form. Basically, to do this, you have two options. You can use the get_product_search_form filter. That’s the easiest solution, but you can also use a custom template that you have to name product-searchform.php. Please note that usually, when you work with WooCommerce custom templates you need to place them in a folder called “woocommerce” within your theme folder. Well, that’s not the case with template.
Using a Snippet
To override the default WooCommerce products search form (that is use in search widget), you can decide to simply add this snippet to the functions.php file within your theme folder:
You can then create your own custom search form, use any value for the placeholder, add CSS classes, or whatever.
Using a Custom Template File
The second method is to use a custom template file. As stated above, you don’t have to place the file in a woocommerce folder in your theme folder. So, create a new file in your theme folder, and name it product-searchform.php. And within that file, place the following code:
And boom, the magic appears! You can then customize your custom template as you wish.
Priority?
Please note that the template file method will have the priority over the filter method. In other words, if you use use a filter and if a file called product-searchform.php exists, then the filter will not be taken into account, and the search form will be populated from the template file. Finally, i’d like to mention that this method is pretty unique in WooCommerce, and all other custom templates must be placed within a woocommerce folder in your theme folder.
About the author
Related Posts
8 comments
Leave a Reply
You must be logged in to post a comment.
[…] Rémi’s the king of useful tip blogposts! He talks about how to “Customize WooCommerce Products Search Form.” […]
Hey Remi – any idea how to exclude a product category (or several) from the search?
thnx!
-jennyb
Hi Remi,
Any idea if the WooCommerce search results are aligned with the product suggestions by the InstantSearch+ extension:
http://wordpress.org/plugins/instantsearch-for-woocommerce/
Thanks!
Eddie
Hi Remi,
i have the Problem that the woocommerce search only searches for the title field of a woocommerce product.
I have severeal custom fields added, as you described in another post (here), which i need to be searched too.
Ideas or solutions in mind?
Greetings
Philipp
Can we search product through their attribute.
For example i have clothes ecommerce site,
Where i have text box for size, bust, color.
According to the matched value it should show particular product
Hi,
I would like add suffix on product search page url. For example:
normal url: mydomain.com/?s=termSearched&post_type=product
my custom url: mydomain.com/?s=termSearched&post_type=product&product_view=list
So my suffix is: &product_view=list
Can you help me? Thanks.
I resolved. I add a form for woocommerce product search in header.php
<form role="search" method="get" id="headersearchform" action="” >
<!—->
Hello remi.
Would like to ask how to change the search sql. I have already my sql query for autocomplete via AJAX.
Scenario : If the user enters the product title, it would be displayed via autocomplete. Now, if he presses enter and submit the search query, it returns no found.
It means that my sql query works on autocomplete but not on submit form. I just customized my sql.
What I want is to know how to hook my SQL into the function in order to be synchronize the default SQL and Autocomplete.
Thanks.