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 :)

Hi support,
I created a photo gallery using the gallery element with settings: Big image with 6 columns of thumbs below. It looks fine but on some portfolio pages the first thumb of the second row is empty. This occurs only on Chrome and works fine on Firefox. I tried a lot with lazy loading on/off, resizing al thumbs etc. etc. but no luck. The client is really upset about it so it would be great if you could have a look what can be the problem here.
Url’s:

or later today when the website is live:
https://www.noutclassiccars.nl/car/mclaren-mp4-12c-spider-2012/
https://www.noutclassiccars.nl/car/aston-martin-vanquish-v12-2003/

Thank you for your help.
Ariane

Hi,
I created a photo gallery using the one included in the Enfold theme. The thumbnails load ok, but they are extremely small and greyed out. Plus, the selected preview size is 260×185, but the resulting preview photo is extremely large with no way to advance to the next photo.

Thank you for your help.

Hi guys,

I have disabled the Category Meta for the blog posts but the code still shows those categories and a redirect.

<main class=’content units av-content-small alpha av-blog-meta-comments-disabled av-blog-meta-category-disabled av-blog-meta-html-info-disabled av-blog-meta-tag-disabled’ >

<article class=’post-entry post-entry-type-standard post-entry-3628 post-loop-1 post-parity-odd post-entry-last single-big post-3628 post type-post status-publish format-standard has-post-thumbnail hentry category-accidentes-de-auto category-accidentes-de-construccion tag-abogado-accidentes-transito tag-abogado-lesiones-personales tag-abogados-de-accidentes-de-trabajo tag-accidentes-de-construccion’ ><div class=’blog-meta’></div><div class=’entry-content-wrapper clearfix standard-content’><header class=”entry-content-header”><div class=”av-heading-wrapper”><span class=”blog-categories minor-meta”>Accidentes Auto, Accidentes Construcción </span><h1 class=’post-title entry-title ‘ > Cómo Elegir el Mejor Abogado de Accidentes y Lesiones Personales Para Tu Caso <span class=’post-format-icon minor-meta’></span> </h1></div>

The reason I disabled the display of the Category Meta is because my categories are displayed much nicely on ALB pages and there is a redirect from /category/page to /page This creates hundreds of redirects and it impacts SEO negatively.

How can I get rid of the invisible to the human eye but not to bots redirect?

(Ideally, we could have custom Enfold pages for Categories – hint, hint) ;)

Thank you in advance for your prompt reply,

Best,

Havi

Guten Tag,
Bilder werden unscharf dargestellt, wie kann ich das ändern? ich benutze ein Enfold Child Thema.
Ich habe die Plugin, Simple Image Sizes und Regenerate Thumbnails, installiert, aber die Bilder bei Lightbox werden nicht scharf.
was muss ich noch einstellen?

Hi,
we added new image sizes through the function below.

add_action( 'after_setup_theme', 'my_custom_image_sizes' );

function my_custom_image_sizes() {
if ( function_exists( 'add_image_size' ) ) {
  //Header Titelbild 1920 x 700	
  add_image_size( 'header-top', 1920, 700, array('center', 'top') );
  add_image_size( 'header-center', 1920, 701, array('center', 'center') );
  add_image_size( 'header-bottom', 1920, 702, array('center', 'bottom') );
  
  //Trennerbild 1920 x 500
  add_image_size( 'trenner-top', 1920, 500, array('center', 'top') );
  add_image_size( 'trenner-center', 1920, 501, array('center', 'center') );
  add_image_size( 'trenner-bottom', 1920, 502, array('center', 'bottom') );
  
  //Bild Spalte 1/1 800 x 450
  add_image_size( 'bild-content-1-1', 800, 450 );
  
  //Bild Spalte 1/2 650 x 366
  add_image_size( 'bild-content-1-2', 650, 366 );

  //Newsbereich 450 x 253
  add_image_size( 'bild-news', 450, 253 );
  
  //Thumbnails für Menü 334 x 188
  add_image_size( 'menu-thumbnails', 334, 188 );  
 }
}

add_filter( 'image_size_names_choose', 'my_custom_sizes' );

function my_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
    'header-top' => __('Header Top 1920x700'),
	'header-center' => __('Header Center 1920x700'),
	'header-bottom' => __('Header Bottom 1920x700'),
	'trenner-top' => __('Trenner Top 1920x500'),
	'trenner-center' => __('Trenner Center 1920x500'),
	'trenner-bottom' => __('Trenner Bottom 1920x500'),
	'bild-content-1-1' => __('Bild Content 1/1 800x450'),
	'bild-content-1-2' => __('Bild Content 1/2 650x366'),
	'bild-news' => __('Newsbereich 450x253'),
	'menu-thumbnails' => __('Menü Thumbnails 334x188')
) 

We want to have different cropped versions of the same image size. The Problem ist that the uploaded image name is always the same (image-1920×700). Can this be changed?
We had something in mind like adding a letter for each cropped version like image-1920x700c (c=center). Would this be possible?

Looking forward to any solution for this.

Thanks in advance,
Sebastian