Customize Search Form WordPress

Here is a quick method that will allow you to override the default search form.
You have two options. You can use the get_search_form filter. That’s the easiest solution, but you can also use a custom template that you have to name searchform.php.

add_filter( 'get_search_form' , 'cmsaddons_custom_searchform' );

	/**
	 * custom_searchform
	 *
	*/
	function cmsaddons_custom_searchform( $form ) {
		
		$form = '<div class="ca-search-wap"><form role="search" method="get" class="search-form" action="' . esc_url( home_url( '/' ) ) . '">
                <label>
                    <span class="screen-reader-text">' . _x( 'Search for:', 'label' ) . '</span>
                    <input type="search" class="search-field" placeholder="' . esc_attr_x( 'Search &hellip;', 'placeholder' ) . '" value="' . get_search_query() . '" name="s" />
                </label>
                <input type="submit" class="search-submit" value="'. esc_attr_x( 'Search', 'submit button' ) .'" />
            </form></div>';
		
		return $form;
		
	}	

Similar, with woocommerce use get_product_search_form filter or custom template that you have to name product-searchform.php

add_filter( 'get_product_search_form' , 'woo_custom_product_searchform' );

function woo_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;
	
}