Add a modal form like this to your site with SearchWP’s Modal Search Form Extension!
These instructions are considered deprecated. Please use the official WooCommerce extension instead
WooCommerce uses what can be considered it’s own internal search mechanism that kind of hijacks post type archives. You’ll notice that after searching, the URL has &post_type=product
appended to the end.
This is why your search results have not changed; SearchWP is not in use when you visit CPT archive pages.
In order to resolve this issue, you need to remove a hidden input that WooCommerce injects into your search forms. To do so, you need to create a new file in your theme directory named product-searchform.php
with the following:
<form role="search" method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<div>
<label class="screen-reader-text" for="s"><?php _e( 'Search for:', 'woocommerce' ); ?></label>
<input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" placeholder="<?php _e( 'Search for products', 'woocommerce' ); ?>" />
<input type="submit" id="searchsubmit" value="<?php echo esc_attr__( 'Search' ); ?>" />
</div>
</form>
See their documentation for additional information.
Once you have that file in place and you submit a search you will see that your search results have improved, but the results template doesn’t look like it did. That again is due to WooCommerce using a CPT archive template for search results. To get the WooCommerce product-focused search results back in place, copy
~/wp-content/plugins/woocommerce/templates/archive-product.php
to your theme folder and rename it as search.php
. This is now your search results template, you can customize it in any way that you’d like.
Never lose visitors to unhelpful search results again. SearchWP makes creating your own smart WordPress search fast and easy.
Get SearchWP Now