In this article, I’ll provide you with a method to modify the WooCommerce Product Search Form. I ran into a scenario recently where I needed to update the default placeholder text that is output in the product search form. Rather than overriding the template, I was able to utilize the get_product_search_form filter provided by WooCommerce to override the product search form in my themes functions.php.
To begin modifying this snippet, simply copy the code below and place it in your themes functions.php file:
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">' . __( 'Enter Keyword or Product Number', 'woocommerce' ) . '</label> | |
<input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="' . __( 'Enter Keyword or Product Number', 'woocommerce' ) . '" /> | |
<input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search', 'woocommerce' ) .'" /> | |
<input type="hidden" name="post_type" value="product" /> | |
</div> | |
</form>'; | |
return $form; | |
} |
Once installed, you will see that you have completed control of the markup of the product search form.
You can now update the submit button text, screen reader text and placeholder text as you please. Have fun!