How to 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 Codding the code on Gist.

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

The New Updated the code on Gist.

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

See also  Move Order Notes Field on Checkout Page

Add some CSS Codding the code on Gist.

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

Leave a Reply

Your email address will not be published. Required fields are marked *