Hello friends, welcome to my another blog post, how to override product search box widget WooCommerce. If you are working with WooCommerce and want to customize WooCommerce default product search form into your own style then you are an incorrect place. Today I will show you how to override product search box widget WooCommerce step by steps.
At go to wp-content/plugins/woocommerce/templates folder, copy product-searchform.php file or if you are working with fileZilla then download the file into your computer and now go to wp-content/themes/your-default-theme folder. Here you create a folder called woocommerce and paste the file inside this folder or upload the file into this folder.
Open the file into you text editor and edit or customize the design and then save the file. Your own design will override WooCommerce default design.
The default markup of product-search-form.php is given below:
<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…', '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>
Now you know how to override the product search box widget WooCommerce. Please give your opinion below.