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.

woocommerce-filter-search-icon

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 Comment

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