Ask your WordPress questions! Pay money and get answers fast! (more info)

Improved Woocommerce search results in Divi WordPress

  • SOLVED

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?

Answers (2)

2016-04-11

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.

2016-04-11

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>