WooCommerce Product Search Filter Markup

search-new.php

<?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;


}

search-original.php

<?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;


}

search-widget.css

/* 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;
}

search.css

/* 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;
}