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

Improved Woocommerce search results in Divi


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=""]][[/LINK]]

And this is how Divi displays search results: [[LINK href=""]][[/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)


Reigel Gallarde answers:

you need to add the post_type...

like this

[[LINK href=""]][[/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( ) {
$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( '/' ) ); ?>">
<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>
<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' ); ?>" />
$(document.body).on('change', '.searchfor', function(){ = (this.value == 'product')?'post_type':'';
return ob_get_clean();

add_filter( 'get_search_form', 'my_search_form', 20 );

Reigel Gallarde comments:

Is your problem solved?

Reigel Gallarde comments:



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

Arnav Joy comments:

Or addition to above answer you can add following js


type: 'hidden',
name: 'post_type',
value : 'product',