Show search results product as the shop overview (3.0.0) with thumbnails + price

Hi guys,

Open this ticket just to bring a solution I found to show search results products as the shop overview 3.0.0 (with the thumbnails, the first gallery image switch and the price).

Look to find the loop-search.php in enfold/includes, make a copy of it and upload an edited version to your child-theme subfolder includes (commonly it is : enfold-child/includes).

Then look the line 33 :

echo "<span class='search-result-counter {$counterclass}'>{$post_loop_count}</span>";

Replace it by :

 $searchimage = get_the_post_thumbnail( $the_id, 'shop_catalog' );
  $searchimagealt = avia_woocommerce_gallery_first_thumbnail( $the_id , 'shop_catalog' );
  echo "<div class='thumbs'><div class='thumbnail_container'>{$searchimagealt}{$searchimage}</div></div>";
  echo "<span class='search-result-counter {$counterclass}'>{$post_loop_count}</span>";

And the line 52 :

echo "<{$heading} class='post-title entry-title {$css}'><a title='".the_title_attribute('echo=0')."' href='".get_permalink()."' $markup>".get_the_title()."</a></{$heading}>";

By :

if( get_post_type() === "product" )
                {
                    $product = wc_get_product( $the_id );
                    $price = $product->get_price();
                    $currencysymbol = get_woocommerce_currency_symbol();
                    $pricesuffix = $product->get_price_suffix();
                    
                    echo "<a href='".get_permalink()."'><div class='inner_product_search_table'><div class='inner_product_search_cell'><{$heading} class='post-title entry-title {$css}'>".get_the_title()."</{$heading}><span class='price'><span class='woocommerce-Price-amount amount'><bdi>{$price}<span class='woocommerce-Price-currencySymbol'>{$currencysymbol}</span></bdi></span>{$pricesuffix}</span></div></div></a>";
                }
                
                else
                {
                    echo "<a href='".get_permalink()."'><div class='inner_product_search_table'><div class='inner_product_search_cell'><{$heading} class='post-title entry-title {$css}'>".get_the_title()."</{$heading}></div></div></a>";
                }

Here is some css to customize the design (to adapt to your project) :

‘/*SEARCH*/

#top.search .template-search .post-entry {
margin: 0 1% 1% 0;
width: 32.6%;
float: left;
clear: none;
}

#top.search .template-search .post-entry:nth-of-type(3n) {
margin-right: 0;
}

#top.search .template-search .post-entry .search-result-counter, #top.search .template-search .post-entry .entry-content, #top.search .template-search .post-entry .post-meta-infos, #top.search .template-search .search_form_field .author-extra-border, #top.search .template-search .search_form_field h4 {
display: none;
}

#top.search .template-search .post-entry .image-overlay {
display: none !important;
}

#top.search .template-search .post-entry .inner_product_search_table {
width: 100%;
height: 100%;
background: rgba(0,0,0,0.35);
position: absolute;
top: 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

#top.search .template-search .post-entry .inner_product_search_cell {
position: relative;
top: 50%;
transform: translateY(-50%);
color: #fff;
text-align: center;
padding: 15px;
}

#top.search .template-search .post-entry > .entry-content-wrapper {
padding: 0;
}

/*#top.search .template-search .post-entry .entry-content-header > a {
display: inline !important;
}*/

#top.search .template-search .post-entry:hover .thumbnail_container > img.avia-product-hover {
opacity: 1;
filter: alpha(opacity=100);
}

#top.search .template-search .post-entry:hover {
cursor: pointer;
}

#top.search .template-search .post-entry:hover .inner_product_search_table {
opacity: 0;
}

/*#top.search .template-search .post-entry .avia-product-hover .thumbnail_container > img:first-child {
position: absolute;
top: 0;
left: 0;
opacity: 0;
filter: alpha(opacity=00);
-webkit-transition: all ease-in-out 0.3s;
-moz-transition: all ease-in-out 0.3s;
transition: all ease-in-out 0.3s;
-webkit-backface-visibility: hidden;
}*/

#top.search .template-search .post-entry .post-title {
font-size: 20px;
line-height: 20px;
text-transform: uppercase;
color: #fff;
margin: 0;
padding: 5px 0;
font-weight: normal;
}

#top.search .template-search .page-heading-container {
border: 0;
margin: 0;
padding: 0 0 20px;
}

#top.search .template-search .extra-mini-title {
margin: 0;
padding-bottom: 20px;
}

#top.search .template-search .search_form_field h4 + p {
margin-top: 0;
}

/*#top.search .template-search .post-entry .post-title a:hover {
text-decoration: none;
}*/’

I’ve also chosen to limit search results to products and posts (not pages) so I’ve add to my functions.php (child-theme) :

/*Filter search results by type (only post and product allows) excluding page*/
function wpb_add_cpt_search($query) {
  if ( !is_admin() && $query->is_main_query() ) {
    if ($query->is_search) {
      $query->set('post_type', array('product', 'post'));
    }
  }
}

Hope this will help you not loosing two days of your life :)