Hello WP Questions Experts!
I use Divi for my site but I am not pleased with how Divi by default displays search results in general, and Woocommerce products in particular..
This is how a normal shop page look like: [[LINK href="http://ow.ly/10w8NJ"]]http://ow.ly/10w8NJ[[/LINK]]
And this is how Divi displays search results: [[LINK href="http://ow.ly/10w8X8"]]http://ow.ly/10w8X8[[/LINK]]
I would like our search results page to look more like our shop pages, with a grid view of the product search results, add to cart buttons etc.
Can that be done?
Reigel Gallarde answers:
you need to add the post_type...
like this
[[LINK href="http://purelyprofessional.dk/?post_type=product&s=shampoo"]]http://purelyprofessional.dk/?post_type=product&s=shampoo[[/LINK]]
Reigel Gallarde comments:
to do this, you need to add
<input type="hidden" name="post_type" value="product" />
in your search form...
Reigel Gallarde comments:
alternatively, you can use "WooCommerce Product Search" widget instead of the default "Search" widget... to do so, please navigate to Appearance > Widgets... then replace the Search widget with "WooCommerce Product Search" widget.
medico comments:
Hi Reigel,
Ok thanks, I didn't know that, that's pretty neat.
But what if a customer is searching for - let's say - an article from our blog. Then I would need to have a search form for general search and one for product search only, or?
Reigel Gallarde comments:
if you want to retain the current functionality of your search, you will need to modify or makge a good search.php file... would not be easy to make on my opinion.
you can also have a dropdown that can choose what to search, a product or blog... which is easier...
but yeah, the easiest is to have two search form...
Reigel Gallarde comments:
for the dropdown, you can try adding this code on your functions.php
function my_search_form( ) {
ob_start();
$post_type = isset($_GET['post_type'])?$_GET['post_type']:'';
?>
<form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<div>
<label class="screen-reader-text" for="s"><?php _x( 'Search for:', 'label' ); ?></label>
<select class="searchfor">
<option value="" <?php selected( $post_type , '' ); ?>>Website Search</option>
<option value="product" <?php selected( $post_type , 'product' ); ?>>Product Search</option>
</select>
<input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" />
<input type="hidden" class="post_type_search" name="" value="product" />
<input type="submit" id="searchsubmit" value="<?php echo esc_attr_x( 'Search', 'submit button' ); ?>" />
</div>
</form>
<script>
jQuery(function($){
$(document.body).on('change', '.searchfor', function(){
this.name = (this.value == 'product')?'post_type':'';
});
});
</script>
<?php
return ob_get_clean();
}
add_filter( 'get_search_form', 'my_search_form', 20 );
Reigel Gallarde comments:
Is your problem solved?
Reigel Gallarde comments:
thanks.
Arnav Joy answers:
it can be customized but it will require much work ..
and for which I will have to work directly in your site and will cost you more .
if you want more better search result and more options , you can use this plugin
https://www.woothemes.com/products/woocommerce-product-search/
Arnav Joy comments:
Or addition to above answer you can add following js
<script>
jQuery(document).ready(function($){
$('<input>').attr({
type: 'hidden',
name: 'post_type',
value : 'product',
}).appendTo('#searchform');
});
</script>