Customize WooCommerce Product Search Field

The WooCommerce Product Search field can be added via a widget and also via a template tag…

get_product_search_form()

Another option is a filter get_product_search_form() by which you can create your own custom search field including using an icon.

The Original Markup

<?php
add_filter( 'get_product_search_form' , 'me_custom_product_searchform' );
/**
* Filter WooCommerce Search Field
*
*/
function me_custom_product_searchform( $form ) {
$form = '<form role="search" method="get" id="searchform" action="' . esc_url( home_url( '/' ) ) . '">
<div>
<label class="screen-reader-text" for="s">' . __( 'Search for:', 'woocommerce' ) . '</label>
<button type="submit" id="searchsubmit" />
<span class="icon"><i class="fa fa-search"></i></span>
</button>
<input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="' . __( 'Search products...', 'woocommerce' ) . '" />
<input type="hidden" name="post_type" value="product" />
</div>
</form>';
return $form;
}
view raw search-new.php hosted with ❤ by GitHub
<?php
add_filter( 'get_product_search_form' , 'me_custom_product_searchform' );
/**
* Filter WooCommerce Search Field
*
*/
function me_custom_product_searchform( $form ) {
$form = '<form role="search" method="get" id="searchform" action="' . esc_url( home_url( '/' ) ) . '">
<div>
<label class="screen-reader-text" for="s">' . __( 'Search for:', 'woocommerce' ) . '</label>
<input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="' . __( 'My Search form', 'woocommerce' ) . '" />
<input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search', 'woocommerce' ) .'" />
<input type="hidden" name="post_type" value="product" />
</div>
</form>';
return $form;
}
view raw search-original.php hosted with ❤ by GitHub
/* Woo Search */
.widget_product_search {
overflow: auto;
}
.widget_product_search input[type="search"],
.widget_product_search input[type="submit"] {
border-radius: 0;
padding: 6px;
}
.widget_product_search input[type="search"] {
width: 200px;
float: left;
padding: 5px;
}
.widget_product_search form[role="search"] {
float: left;
}
.widget_product_search input[type="submit"] {
float: left;
font-size: 1em;
}
.widget_product_search input[type="submit"]:hover,
.widget_product_search input[type="submit"]:focus {
background: #57ad68;
border: #fff 1px solid;
color: #000;
}
view raw search-widget.css hosted with ❤ by GitHub
/* Woo Search */
.widget_product_search {
overflow: auto;
}
.widget_product_search #searchform {
float: left;
}
.widget_product_search input[type="text"],
.widget_product_search button[type="submit"] {
border-radius: 0;
padding: 6px;
}
.widget_product_search input[type="text"] {
width: 200px;
float: right;
padding: 6px;
}
.widget_product_search button[type="submit"] {
float: right;
}
.widget_product_search button[type="submit"]:hover,
.widget_product_search button[type="submit"]:focus {
background: #f9ba00;
border: #fff 1px solid;
color: #000;
}
view raw search.css hosted with ❤ by GitHub

This will just reproduce the form in it’s original format.

The New Markup

<?php
add_filter( 'get_product_search_form' , 'me_custom_product_searchform' );
/**
* Filter WooCommerce Search Field
*
*/
function me_custom_product_searchform( $form ) {
$form = '<form role="search" method="get" id="searchform" action="' . esc_url( home_url( '/' ) ) . '">
<div>
<label class="screen-reader-text" for="s">' . __( 'Search for:', 'woocommerce' ) . '</label>
<button type="submit" id="searchsubmit" />
<span class="icon"><i class="fa fa-search"></i></span>
</button>
<input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="' . __( 'Search products...', 'woocommerce' ) . '" />
<input type="hidden" name="post_type" value="product" />
</div>
</form>';
return $form;
}
view raw search-new.php hosted with ❤ by GitHub
<?php
add_filter( 'get_product_search_form' , 'me_custom_product_searchform' );
/**
* Filter WooCommerce Search Field
*
*/
function me_custom_product_searchform( $form ) {
$form = '<form role="search" method="get" id="searchform" action="' . esc_url( home_url( '/' ) ) . '">
<div>
<label class="screen-reader-text" for="s">' . __( 'Search for:', 'woocommerce' ) . '</label>
<input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="' . __( 'My Search form', 'woocommerce' ) . '" />
<input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search', 'woocommerce' ) .'" />
<input type="hidden" name="post_type" value="product" />
</div>
</form>';
return $form;
}
view raw search-original.php hosted with ❤ by GitHub
/* Woo Search */
.widget_product_search {
overflow: auto;
}
.widget_product_search input[type="search"],
.widget_product_search input[type="submit"] {
border-radius: 0;
padding: 6px;
}
.widget_product_search input[type="search"] {
width: 200px;
float: left;
padding: 5px;
}
.widget_product_search form[role="search"] {
float: left;
}
.widget_product_search input[type="submit"] {
float: left;
font-size: 1em;
}
.widget_product_search input[type="submit"]:hover,
.widget_product_search input[type="submit"]:focus {
background: #57ad68;
border: #fff 1px solid;
color: #000;
}
view raw search-widget.css hosted with ❤ by GitHub
/* Woo Search */
.widget_product_search {
overflow: auto;
}
.widget_product_search #searchform {
float: left;
}
.widget_product_search input[type="text"],
.widget_product_search button[type="submit"] {
border-radius: 0;
padding: 6px;
}
.widget_product_search input[type="text"] {
width: 200px;
float: right;
padding: 6px;
}
.widget_product_search button[type="submit"] {
float: right;
}
.widget_product_search button[type="submit"]:hover,
.widget_product_search button[type="submit"]:focus {
background: #f9ba00;
border: #fff 1px solid;
color: #000;
}
view raw search.css hosted with ❤ by GitHub

Here a fontawesome magnifying glass is added with the original submit removed

Add some CSS

<?php
add_filter( 'get_product_search_form' , 'me_custom_product_searchform' );
/**
* Filter WooCommerce Search Field
*
*/
function me_custom_product_searchform( $form ) {
$form = '<form role="search" method="get" id="searchform" action="' . esc_url( home_url( '/' ) ) . '">
<div>
<label class="screen-reader-text" for="s">' . __( 'Search for:', 'woocommerce' ) . '</label>
<button type="submit" id="searchsubmit" />
<span class="icon"><i class="fa fa-search"></i></span>
</button>
<input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="' . __( 'Search products...', 'woocommerce' ) . '" />
<input type="hidden" name="post_type" value="product" />
</div>
</form>';
return $form;
}
view raw search-new.php hosted with ❤ by GitHub
<?php
add_filter( 'get_product_search_form' , 'me_custom_product_searchform' );
/**
* Filter WooCommerce Search Field
*
*/
function me_custom_product_searchform( $form ) {
$form = '<form role="search" method="get" id="searchform" action="' . esc_url( home_url( '/' ) ) . '">
<div>
<label class="screen-reader-text" for="s">' . __( 'Search for:', 'woocommerce' ) . '</label>
<input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="' . __( 'My Search form', 'woocommerce' ) . '" />
<input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search', 'woocommerce' ) .'" />
<input type="hidden" name="post_type" value="product" />
</div>
</form>';
return $form;
}
view raw search-original.php hosted with ❤ by GitHub
/* Woo Search */
.widget_product_search {
overflow: auto;
}
.widget_product_search input[type="search"],
.widget_product_search input[type="submit"] {
border-radius: 0;
padding: 6px;
}
.widget_product_search input[type="search"] {
width: 200px;
float: left;
padding: 5px;
}
.widget_product_search form[role="search"] {
float: left;
}
.widget_product_search input[type="submit"] {
float: left;
font-size: 1em;
}
.widget_product_search input[type="submit"]:hover,
.widget_product_search input[type="submit"]:focus {
background: #57ad68;
border: #fff 1px solid;
color: #000;
}
view raw search-widget.css hosted with ❤ by GitHub
/* Woo Search */
.widget_product_search {
overflow: auto;
}
.widget_product_search #searchform {
float: left;
}
.widget_product_search input[type="text"],
.widget_product_search button[type="submit"] {
border-radius: 0;
padding: 6px;
}
.widget_product_search input[type="text"] {
width: 200px;
float: right;
padding: 6px;
}
.widget_product_search button[type="submit"] {
float: right;
}
.widget_product_search button[type="submit"]:hover,
.widget_product_search button[type="submit"]:focus {
background: #f9ba00;
border: #fff 1px solid;
color: #000;
}
view raw search.css hosted with ❤ by GitHub

Floating the icon to the right and a splash of color.

woocommerce-filter-search-icon

If you are just using the WooCommerce Search Widget – the CSS below will get you started.

<?php
add_filter( 'get_product_search_form' , 'me_custom_product_searchform' );
/**
* Filter WooCommerce Search Field
*
*/
function me_custom_product_searchform( $form ) {
$form = '<form role="search" method="get" id="searchform" action="' . esc_url( home_url( '/' ) ) . '">
<div>
<label class="screen-reader-text" for="s">' . __( 'Search for:', 'woocommerce' ) . '</label>
<button type="submit" id="searchsubmit" />
<span class="icon"><i class="fa fa-search"></i></span>
</button>
<input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="' . __( 'Search products...', 'woocommerce' ) . '" />
<input type="hidden" name="post_type" value="product" />
</div>
</form>';
return $form;
}
view raw search-new.php hosted with ❤ by GitHub
<?php
add_filter( 'get_product_search_form' , 'me_custom_product_searchform' );
/**
* Filter WooCommerce Search Field
*
*/
function me_custom_product_searchform( $form ) {
$form = '<form role="search" method="get" id="searchform" action="' . esc_url( home_url( '/' ) ) . '">
<div>
<label class="screen-reader-text" for="s">' . __( 'Search for:', 'woocommerce' ) . '</label>
<input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="' . __( 'My Search form', 'woocommerce' ) . '" />
<input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search', 'woocommerce' ) .'" />
<input type="hidden" name="post_type" value="product" />
</div>
</form>';
return $form;
}
view raw search-original.php hosted with ❤ by GitHub
/* Woo Search */
.widget_product_search {
overflow: auto;
}
.widget_product_search input[type="search"],
.widget_product_search input[type="submit"] {
border-radius: 0;
padding: 6px;
}
.widget_product_search input[type="search"] {
width: 200px;
float: left;
padding: 5px;
}
.widget_product_search form[role="search"] {
float: left;
}
.widget_product_search input[type="submit"] {
float: left;
font-size: 1em;
}
.widget_product_search input[type="submit"]:hover,
.widget_product_search input[type="submit"]:focus {
background: #57ad68;
border: #fff 1px solid;
color: #000;
}
view raw search-widget.css hosted with ❤ by GitHub
/* Woo Search */
.widget_product_search {
overflow: auto;
}
.widget_product_search #searchform {
float: left;
}
.widget_product_search input[type="text"],
.widget_product_search button[type="submit"] {
border-radius: 0;
padding: 6px;
}
.widget_product_search input[type="text"] {
width: 200px;
float: right;
padding: 6px;
}
.widget_product_search button[type="submit"] {
float: right;
}
.widget_product_search button[type="submit"]:hover,
.widget_product_search button[type="submit"]:focus {
background: #f9ba00;
border: #fff 1px solid;
color: #000;
}
view raw search.css hosted with ❤ by GitHub

For an ecommerce heavy site, you want the search to use the woocommerce layout and product results only, this works great for that issue.

12 Comments

  1. Jessica on May 20, 2019 at 9:07 pm

    Nevermind, I found a plugin solution to what I was trying to do with the search options on the site.

  2. Jessica on May 20, 2019 at 8:39 pm

    I love this! I’m having one little problem I can’t figure out how to fix. The magnifying glass icon is on the left side of the screen, while I want it on the right side of the screen where the button is. I tried doing some CSS to float the icon to the right, but it didn’t work (probably because I’m very much a CSS amatuer):
    i.fa.fa-search {
    float: right;
    }
    You can see the misplaced magnifying glass in the top left corner here:
    https://inkerdoo.com/
    Any suggestions?

  3. Mazen on March 11, 2019 at 2:28 pm

    Hello,
    Please help, I don’t code that much..
    I need the search to go throw the products tags,, any advice?
    I use https://woodmart.xtemos.com theme.

    Thank you

  4. Kedai on June 22, 2018 at 5:50 am

    Thank good share sir, how about we need add own query like search form drop-down menu by category option and brand option?

    Like this sample
    https://imgur.com/a/LCsN8F3

  5. Nikos Kavvadas on June 11, 2018 at 4:54 pm

    Thanks!

  6. Ioannis on March 29, 2018 at 5:57 pm

    Where specifically should they placed within the functions.php and style.css files for this to work?

  7. Ioannis on March 29, 2018 at 5:36 pm

    Should they be copied somewhere specifically in functions.php and style.css for this to work?

    • Neil Gowran on April 2, 2018 at 3:47 am

      Not specifically – for the CSS code best at the end of the file so it overrides any similar selectors – for the php it doesn’t matter, just remove the opening php tag.

  8. Bert on December 25, 2017 at 3:30 pm

    Thanx a lot. Just did a copy-paste in functions.php and style.css of my child-theme. Great result, after modifying css.

  9. Warner on December 24, 2017 at 9:02 am

    Hi Bert,

    Either you include this code in functions.php or create a new file (i.e. my-theme-woocommerce.php) and add the code.

    To include this file you could add the following code into your functions.php file;

    /**
    * Check and see if WooCommerce is installed and activated.
    * If true, then we load our file, otherwise we skip it.
    **/
    if ( in_array( ‘woocommerce/woocommerce.php’, apply_filters( ‘active_plugins’, get_option( ‘active_plugins’ ) ), true ) ) {
    require_once ‘my-theme-woocommerce.php’;

    The latter option is nice and handy when you plan on adding a lot of WooCommerce code. Keeps things organized.

    Hope that helps.

  10. Bert on December 23, 2017 at 10:59 pm

    in which files / folders do I have to change this?

  11. Warner on October 12, 2017 at 8:53 am

    Nuggets of gold can be found on your site; The digital equivalent of the New South Wales goldrush.

    Keep on digging for us, it’s highly appreciated!

Leave a Comment