1. Documentation /
  2. Overriding the product search box (widget)

Overriding the product search box (widget)

For tips on how to override this function, see: Template Structure + Overriding Templates via a Theme.

The product search box widget loads the search box using the template function:

get_product_search_form()

For more info, see: Function get_product_search_form.

It then looks for the product search form in the file ‘product-searchform.php’ or uses its default markup. You can override the default WooCommerce template product-searchform.php by customizing the markup.

For reference, the default markup is:


<form role="search" method="get" class="woocommerce-product-search" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label class="screen-reader-text" for="s"><?php _e( 'Search for:', 'woocommerce' ); ?></label>
<input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search Products&hellip;', 'placeholder', 'woocommerce' ); ?>" value="<?php echo get_search_query(); ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label', 'woocommerce' ); ?>" />
<input type="submit" value="<?php echo esc_attr_x( 'Search', 'submit button', 'woocommerce' ); ?>" />
<input type="hidden" name="post_type" value="product" />
</form>

The form is also run through the filter get_product_search_form.

WooCommerce

The most customizable ecommerce platform for building your online business.

  • 30-day money-back guarantee
  • Support teams across the world
  • Safe and secure online payment