Remi's blog

Customize WooCommerce Products Search Form

—

by

Remi
in

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.

,

8 responses to “Customize WooCommerce Products Search Form”

  1. Blogging for Benjamin Update | Daniel Espinoza

    […] Rémi’s the king of useful tip blogposts!  He talks about how to “Customize WooCommerce Products Search Form.” […]

  2. jennybeaumont

    Hey Remi – any idea how to exclude a product category (or several) from the search?

    thnx!
    -jennyb

  3. eddieweber

    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

  4. Philipp_Schubert

    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

  5. vinayshah5

    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

  6. alexcappello

    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.

    1. alexcappello

      I resolved. I add a form for woocommerce product search in header.php

      <form role="search" method="get" id="headersearchform" action="” >

      <!—->

  7. samuel082017

    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.

Leave a Reply