This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

How To Add Custom Product Search in WooCommerce

Updated on June 16, 2021

2 Min Read

WooCommerce has a very basic product search form that often don’t provide enough information. Many store owners often try to replace this with a custom form.

Customize WooCommerce Product Search

In this tutorial, I will discuss a quick method of overriding the default product search form. I will use the get_product_search_form filter for this. You could use a custom template with the name product_search_form.php.

Adding customization options to your store can be tricky

Let a Cloudways Expert handle it for you.

I will add a custom code snippet to the functions.php (located in the themes folder). This code snippet will replace the default product search from in the search widget.

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;

}

At this point, you could create your own custom search form, use a placeholder or add CSS classes. For this, go to the theme folder and create a new file with the name product_search_form.php. Open this file and add the following code to it:

	$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 Super Search form', 'woocommerce' ) . '" />
			<input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search', 'woocommerce' ) .'" />
			<input type="hidden" name="post_type" value="product" />
		</div>
	</form>';
	
	echo $form;

Note that the template file will take priority over any filter based method(s). thus, even if you use a filter, the presence of the template file will ensure that the search form would come from the file rather than the template.

In order to implement AJAX based search, you could use another custom code snippet. This snippet allows you to modify the search parameters. In addition, you could also deactivate AJAX based search by setting ajax_disable to TRUE.

global $avia_config; 

$search_params = apply_filters('avf_frontend_search_form_param', array(

    'placeholder'  	=> __('Search','avia_framework'),
    'search_id'	   	=> 's',
    'form_action'	=> home_url( '/' ),
    'ajax_disable'	=> false
));

$disable_ajax = $search_params['ajax_disable'] == false ? "" : "av_disable_ajax_search";

$icon  = av_icon_char('search');
$class = av_icon_class('search');
?>
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div>
        <label class="screen-reader-text" for="s">Search for:</label>
        <input type="text"  name="s" id="s" placeholder='<?php echo $search_params['placeholder']; ?>' />
        <input type="submit" id="searchsubmit" value="<?php echo $icon; ?>" class="button <?php echo $class; ?>" />
        <input type="hidden" name="post_type" value="product">
    </div>
</form>

Conclusion

In this tutorial, I discussed how to add a customized In this tutorial WooCommerce product search through a custom template file. If you need any help with the code, do leave a comment below.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Customer Review at

“Great performance for the price, and plenty of control”

Sean P [SMB Owner]

Owais Alam

is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at [email protected]

×

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!