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 file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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; | |
| } |
This will just reproduce the form in it’s original format.
The New Markup
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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; | |
| } |
Here a fontawesome magnifying glass is added with the original submit removed
Add some CSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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; | |
| } |
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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; | |
| } |
For an ecommerce heavy site, you want the search to use the woocommerce layout and product results only, this works great for that issue.
