I have everything including variable images working by just using:

function avia_woocommerce_gallery_thumbnail_description($img, $attachment_id, $post_id, $image_class ) {
    return $img;
}

function avia_woocommerce_post_thumbnail_description($img, $post_id){
    return $img;
}

in my functions.php file.

I am not using a woocommerce folder in my child theme.

@mensmaximus – Hi OK I have done everything as suggested entered the fix into the functions on the child theme and now crashed the site Error 500 – now I am in deep s… – how about I just leave it as was until a new update comes – in the interim period any ideas how to get me site back please http://www.muebles43.es ? Thank you
/*
Woocommerce 3.0.0 Compatibility Fix
Remove Enfold’s custom functions that conflict with the new image display in WooCommerce 3.0.0
*/
global $woocommerce;
if( version_compare( $woocommerce->version, ‘3.0.0’, “>=” ) ) {
function avia_woocommerce_gallery_thumbnail_description($img, $attachment_id, $post_id, $image_class ) {
return $img;
}
function avia_woocommerce_post_thumbnail_description($img, $post_id){
return $img;
}
}

Hi mensmaximus, thanks for your patience and giving us this fine solution. Yes, it works as before. Thumbnail is sharp, lightbox works too and overlay is gone.

Now its up to kriesi giving us a working solution in case of the new gallery feature of WooCommerce.

Til then we use your simple code.

Thanks, Adrian

The following solution removes Enfolds custom functions for the image display of products and variations to restore the new image display starting from WooCommerce 3.0.0.

• It is save to use with any version of WooCommerce.
• It is intended to be used with Enfold version 4 to 4.0.5 only

If you do NOT have a Child Theme

1. Download https://mensmaximus.de/dokumente/enfold/enfold-child.zip
2. Login to wordpress and select Appearance -> Themes in the admin menu
3. Click on ‘add new’ (top left of the theme page)
4. Click on ‘upload theme’ (top left of the theme page)
5. Click on the file select button and choose the enfold-child.zip file from step 1
6. Click on ‘Install now’
7. Activate the Enfold Child Theme after the installation has finished
8. Follow the instructions from http://kriesi.at/documentation/enfold/using-a-child-theme/

If you already have a Child Theme

Copy the following code block to the functions.php file of your child theme

/*
	Woocommerce 3.0.0 Compatibility Fix
	Remove Enfold's custom functions that conflict with the new image display in WooCommerce 3.0.0
*/
global $woocommerce;
if( version_compare( $woocommerce->version, '3.0.0', ">=" ) ) {
	function avia_woocommerce_gallery_thumbnail_description($img, $attachment_id, $post_id, $image_class ) {
	    return $img;
	}
	function avia_woocommerce_post_thumbnail_description($img, $post_id){
	    return $img;
	}
}

Attention: If you feel you are not able to reproduce this steps hire a WordPress freelancer to do it for you. Point him to this posting and he will know what to do. It takes less than 15 min. for a WordPress professional to accomplish the job (including asking for ftp credentials and/or WordPress access).

Nag Nag Nag: If you do not want to use a Child Theme or if you are just in bad mood please feel free to keep that for you. No need to tell anyone. In this case just wait for an official update.

Support: This solution is provided by me and not Kriesi. I am not affiliated to Kriesi in any way other than you all loving Enfold. I have spent more than one day with trouble shooting and talking to the WooCommerce Development as well as extensive testing. If you use this solution please report back if it worked or not. Your feedback will help others to decide if they will give it a try too.

@ollihb to fix the variation problem you need to add two functions to your child themes functions.php:

function avia_woocommerce_gallery_thumbnail_description($img, $attachment_id, $post_id, $image_class ) {
    return $img;
}

function avia_woocommerce_post_thumbnail_description($img, $post_id){
    return $img;
}

Hello sorinoprea1,

try to use the Regenerate Thumbnails plugin. Also, check it the image size on Woocommerce. The Woocommerce image sizes can be changed in Dashboard > WooCommerce > Settings > Products > Display.

Thank you

Thanks for the quick fix!
I already had a child theme, so adding indeed:

function avia_woocommerce_gallery_thumbnail_description($img, $attachment_id, $post_id, $image_class ) {
return $img;
}
function my_backlink ( $link )
{
return ”;
}
add_filter( ‘kriesi_backlink’, ‘my_backlink’, 10, 1);

…worked immediately like a charm (regarding the image problem)
And don’t forget to clear your cache (browser and cache plugins)

@mensmaximus Thank you so very much the addition of that code into the child theme’s function.php worked beautifully. Big hug and a Oorah!
For those of you that are a bit like me – a designer rather than a coder, here’s how the php looks – as I was unsure where to place it – yeah I know … but learning more and more everyday :)

<?php

function avia_woocommerce_gallery_thumbnail_description($img, $attachment_id, $post_id, $image_class ) {
return $img;
}

function my_backlink ( $link )
{
return ”;
}

add_filter( ‘kriesi_backlink’, ‘my_backlink’, 10, 1);

@yigit as a quick solution your developers can load the two filter hooks in /wp-content/themes/enfold/config-woocommerce/config.php only if the woocommerce version is lower than 3.0.0

global $woocommerce;
if( version_compare( $woocommerce->version, '3.0.0', "<" ) ) {
	if(!function_exists('avia_woocommerce_post_thumbnail_description')) {
		add_filter('woocommerce_single_product_image_html','avia_woocommerce_post_thumbnail_description', 10, 2);
		function avia_woocommerce_post_thumbnail_description($img, $post_id){
			...
			return $img;
		}
	}
	if(!function_exists('avia_woocommerce_gallery_thumbnail_description')) {
		add_filter('woocommerce_single_product_image_thumbnail_html','avia_woocommerce_gallery_thumbnail_description', 10, 4);
		function avia_woocommerce_gallery_thumbnail_description($img, $attachment_id, $post_id = "", $image_class = "" ){
			...
			return $img;
		}
	}
}

This will solve both issues. The missing and blurred images.

I just realized WooCommerce has dropped the support for the filter ‘woocommerce_single_product_image_html’ and is using ‘woocommerce_single_product_image_thumbnail_html’ instead in product-image.php and product-thumbnails.php. Therefore the functions in Enfold that hooked into ‘woocommerce_single_product_image_html’ is not used any more. Instead the function hooked into ‘woocommerce_single_product_image_thumbnail_html’ is used (see my last post above) which causes images to disappear and to be blurry if the opacity is removed manuals (by css hack or overload). According to a chat with Mike Jolley the old filter ‘woocommerce_single_product_image_html’ is unlikely to return with an update due to changes in css classes and new features like ‘swipe’. Saying this Enfold will have to provide an update to solve the issue. I checked with other major themes and found some have dropped custom html code to display the images with WooCommerce 3.0 as I did in my solution above.

Digging a bit deeper into this issue reveals the main problem is within Enfold creating its own html code to display the product images. This code is incompatible with WooCommerce 3.0. The code is inserted in /wp-content/themes/enfold/config-woocommerce/config.php line 1423 using the woocommerce filter ‘woocommerce_single_product_image_thumbnail_html’.

You can remove that filter to get the native woocommerce 3.0 product image display by adding the following function to a child themes functions.php:

function avia_woocommerce_gallery_thumbnail_description($img, $attachment_id, $post_id, $image_class ) {
    return $img;
}

@mensmaximus implementing the woocommerce patch fixed the opacity problem. But I had to increase the thumbnail size in woocommerce Settings > Product > Display from 120×120 to 400×600 so the images would not blow out. Seems like woo also needs to address why single product pages are suddenly displaying the ‘Product thumbnails’ rather than the ‘Single product image’?

Thanks for linking the patch!

I had this behavior in case of thumbnails. First I had set product image size in listings in woocommerce to 450×450 px but not cropped. In shop category listings image showed correct in 450×150 px, because original uploaded image has dimensions of 1500×500 px.

On single product page image was shown as 120×40 px and scaled up to 450 px width and highly blurred. Hmm …

Than I did a regenerate thumbnail for this image after I set in woocommerce image size to 450×450 px but with cropping. In listings the image displayed correct with 450×450 px cropped. But …

on single product page image now showed up as 150×150 px and scaled up to 450 px width and a bit blurred.

This is not what I expected. Someone else may has something to do on this.

• This reply was modified 9 years ago by adrianwackernah.

If this helps any, when I tested an update the Product Grid gave me a large error in the first area of the site. We reverted back to the previous version of WooCommerce.

This was the error:
Notice: id was called
incorrectly
. Product properties should not be accessed directly. Please see Debugging in WordPress for more information. (This message was added in version 3.0.) in /home2/shopjade/public_html/wp-includes/functions.php on line 4137
class=”post-6479 product type-product status-publish has-post-thumbnail product_cat-tops product_cat-featured first instock taxable shipping-taxable purchasable product-type-variable has-default-attributes has-children”>

Is this related to us using the Product Grid/Product Grid Slider? Img here: https://www.screencast.com/t/Wj9gt22GT9d

Hi

It’s my first post here :)
For me it’s not an css issue but it’s on php file.
If you do hard core the opacity it will display the thumbnail image and not the main product image. So it’s getting a different image.
It’s better to wait for an Enfold update…

• This reply was modified 9 years ago by Seichinha.

So if you can load the “correct” product image size, rather than the thumbnail image, it will be workable.

The image in question is a 120×120 thumbnail being stretched to fill the whole section, hence the blurry!

Will await a fix on this issue, as its the only one I can find for Enfold & wc 3.0.