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

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.