Customize WooCommerce Product Search Field

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


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

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

The New Markup

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

Add some CSS

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


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

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


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

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

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

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

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

%d bloggers like this: