Viewing 30 posts - 1 through 30 (of 67 total)
  • Author
  • #773820

    There are numerous threads about Enfold not displaying product images on the product page or displaying blurred images after updating to WooCommerce 3.0.1.

    Many times it has been posted to add a CSS rule to the quick css fields in Enfold and/or to regenerate the images. Kriesi’s support team is doing an awesome job however the advice to apply the CSS rule or to regenerate images is wrong. The regeneration of images will cause you more trouble than you might think off because you change dimension of the wrong images (thumbnails). Every time a thumbnail should be loaded WordPress will fetch an image way to large. You may imagine what this means for mobile users and what Google will tell you about your mobile performance.

    I can’t emphasize this strong enough: Don’t regenerate your images!

    The latest update to WooCommerce 3.0.1 does not solve the image issue on single product pages within Enfold. The update is intended to address the display of the ‘missing featured image’ if no image has been set.

    The main issues in Enfold are the usage of a woocommerce template filter (woocommerce_single_product_image_html) that has been removed in WooCommerce 3.0 and the usage of a second filter (woocommerce_single_product_image_thumbnail_html) that has been formerly used only for thumbnails but is now used in general by WooCommerce. I don’t know whether Automattic has informed theme developers about this change nor do I judge anyone for a possible mistake.

    Anyway the issues still exists and won’t be solved by WooCommerce. At least not according to my conversation with Mike Jolley because the removed filter is unlikely to return.

    Saying this I can only suggest you – as users of Enfold – either stay with WooCommerce 2.4.16 until an update of Enfold will fix the issue or you update to WooCommerce 3.0.1 in combination with the solution I have provided to fix the issue.

    To make this clear again: I love Enfold, I highly recommend it to my customers and I have the highest respect for the awesome job the support crew is doing here. And as we are all humans sometimes we are mistaken. This does not reduce the value of Enfold in any way.


    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 including the new zoom feature and the WooCommerce native lightbox.

    • Use only with WooCommerce Version 3.x.x
    • Use only with Enfold version 4 to 4.0.5

    If you just want to fix the basic image issue please stick with my first solution.

    If you are curious and want to use the new zoom and lightbox feature from woocommerce continue reading.

    If you do NOT have a Child Theme

    1. Download
    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 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
    9. You are done. Have fun with the new features

    If you already have a Child Theme

    1. 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', ">=" ) ) {
    	add_theme_support( 'wc-product-gallery-zoom' );
    	add_theme_support( 'wc-product-gallery-lightbox' );
    	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;

    2. Copy the following code block to the style.css file of your child theme

        position: absolute !important;
        top: 1em;
        left: 1em;
        z-index: 99;

    3. Download and unpack the file
    4. Connect to your hosting account via ftp and navigate to your child themes directory
    5. If the child theme directory does not contain a directory called woocommerce you can simply copy the woocommerce directory from my child theme (step 3) to your child themes directory. Otherwise you need to check whether the woocommerce directory in your child theme contains a directory named ‘single-product’. If not you can copy the ‘single-product’ directory contained in the ‘woocommerce’ directory from my child theme (step 3) to your child themes ‘woocommerce directory’. If you already have a directory called ‘single-product’ you have to check wether the files contained in my child theme exist in your child theme. If not copy theme. If they do you need to merge the modifications (Hint: search for ‘noLightbox noHover’ and most likely you will know what to do).
    6. You are done. Have fun with the new features


    Side note: If my feature request would have been included it would have been possible to create a solution without overloading the templates. Developers should upvote so we may get plugable jquery functions for better control of the image overlay.


    Is it possible to “roll-back” to WooCommerce 2.4.16? To avoid all these problems?


    If you got no new orders since the update you can manually remove the woocommerce files via ftp. and upload the former version. If you got new orders I do not recommend a roll back because the version of woocommerce is stored with the order which may cause problems if an order has a higher version than the active woocommerce version.


    Ok thank you. We got about 100 orders at so I assume that waiting for Kriesis team is the best option.


    @maxisgoinghome if you are on WC 3 your best option is to apply my solution to have 100% working shop.


    As you can see I did use your first solution but there are still minor design errors.


    @maxisgoinghome I did not check your site ;-) until now. Nice work!



    Great post.
    Thank you very much for doing that! :)



    Thanks for the fix!

    The ratio between the height and width of the thumbnails, in the gallery, were at 1/1. Is there a way we can keep the cropping function?

    Again, thanks for the help!


    The formerly used catalog image is hardcroped by default. The single product image used now has fixed width and variable height. You could of course change that in woocommerce settings and afterwards regenerate the thumbnails. You could also modify the product-image.php contained in my enhanced fix and change the shop_single (default thumbnail in woo 3) to any other predefined thumbnail size. My advice is to wait until we know which way Enfold will chose to avoid additional work.


    Thanks Max!



    Thanks a lot for helping out @mensmaximus :-)

    Best regards,


    Worked perfectly, Thank You so much for that.
    Hope to see it as as a standard feature in an upcoming update to Enfold.


    Thanks to Mensmaximus -So appreciate your generous support.

    I had success restoring my images with the solution you posted on April 5th.
    Then I discovered a new problem. That is, Single Product pages were no longer functioning properly. If a customer went to the site and clicked on the Add to Cart button, nothing would happen. The product page simply refreshed. The Variable Product pages worked fine.

    Today, after much research, I decided to try your newest solution, thinking that it might resolve my problem because both were related to Single Products, but as soon as I added your code to the functions.php file in my child theme, the site crashed. Syntax error. Got that fixed, added the CSS and uploaded the newer Product image files. That restored the site but created new problems: The SHOP page now redirects to the HOME page, and the CALENDAR page (which is built on a plugin called WooEvents that hooks into WooCommerce) now shows only the short code and not the actual events!

    I removed all the changes and reverted back to your original solution but the SHOP page and CALENDAR page are still broken.

    I’m at a loss and my client is losing business as a result.

    Can somebody please help?

    Thanks Mensmaximus and everyone else who contributes on the forum.


    I have resolved all of the problems I was having. As it turns out, when I called the hosting company earlier to help me investigate, they deactivated all of the plugins without telling me and then forgot to reactivate them, so my CALENDAR page and SHOP page are now back in working order.
    I also reinstalled Enfold and the functions.php file in my Child Theme and updated the Woo Events plugin. Something helped because the Single Product checkout is now working.



    Thank you @mensmaximus for your generous contribution!

    My client barely has any orders or visitors to her site, so I will wait for an update from the Enfold team, they always solve any problem that comes this way… :)

    BTW, if you use and Enfold layout for single products instead of the WooCommerce one, this does not happen. (it could be an option, if you don’t have too many products) and you can switch to the Enfold Product Layout. It really looks amazing!


    Thank you very much for this great solution and well done documentation. Fixed my problem in no time.

    Kind regards,



    Hi Mike

    I did that and it’s still fuzzy. All MAIN product image

    it was not like that before the wocommerce updates

    what else to do?

    Ana Darace
    Trikke Tech Inc.


    @ana40 the chances are you did not follow the instructions by 100%. The solution I have provided works on hundreds of sites. So there are only two possible issues. Either you did wrong (95%) or you have a third party plugin that causes the problem (5%).


    In der Tat eine tolle Leistung. Hochachtung vor Deiner Liebe zu Enfold und Deinem Sachverstand.


    Ja, wirklich klasse. Ein kleiner Bug noch:
    kombiniere ich ein Varianten-Produkt mit einer Produktgalerie, bekomme ich beim klick auf ein thumbnail in der productgallery zwar eine Lightbox, leider aber immer mit dem Bild als Inhalt, das eine ID kleiner hat als das angewählte.

    Ein Beispiel hier.


    @ollihb kann ich nicht bestätigen auch nicht auf der im Beispiel genannten Seite


    Seltsam. Ich habe hier mit allen 3 major-browsern das Problem (IE, FF, Chrome).
    Klicke ich auf das Vorschaubild mit der weissen Karte, öffnet sich die Lightbox mit der orangenen drin.


    @ollihb ich habe das anders verstanden. Wenn ich eine Variation auswähle und auf das Vorschaubild (lupe) des Hauptbildes klicke, wird das korrekte Bid gezeigt. Das Gallerie Problem sehe ich jetzt auch. Das dürfte an der fehlenden Gallerie Unterstützung liegen, da bei anderen Themes zusätzlich zur Gallerie immer auch das Hauptbild in der Thumbnails erscheint.


    @ollihb ich habe mir das mal genauer angesehen. Die neue WooCommerce Lightbox und die Flexslider Funktion gehen immer davon aus, das dass Hauptbild mit in der Gallerie angezeigt wird (als Thumbnail). Bei Enfold ist das nicht der Fall. Da das Hauptbild aber mit im div der css Klasse woocommerce-product-gallery steckt, wird es mitgezählt. Somit ist bei einem Klick der index um eins verschoben wodurch das Bild davor gezeigt wird. Da hilft nur eine Änderung der Anzeige, denn im WooCommerce single-product.js Script kann ich das Target nicht per Monkey Patch korrigieren (z.B. um nur das .thumbnail div in enfold zu berücksichtigen)


    hi there mensmaximus and thanks for the solution!

    I have one question: i seem to have a problem with the product slider on homepage on 100% width:
    – in the initial view only 4 from 5 products are displayed
    – if the slider is scrolled then there appear 5 products but 1 on one line and the other 4 on a second line.

    Tried to reduce the number of products shown in the slider to 4 but the result is the same. In my test system where I did not applied your patch this problem is not present.

    could you advise?

    Thank you so much,


    My patch does not touch the slider. It only applies to the single product page. A few days ago an other user had a similar issue and turned out to a caching problem. Do you have by any chance a caching plugin running?


    hello mensmaximus, yes, I have a cache plugin: SG Optimizer. Can you give me a link with the issue the other user had? Thanks a lot!

Viewing 30 posts - 1 through 30 (of 67 total)
  • The topic ‘WooCommerce 3.0.0/3.0.1 and the images issue’ is closed to new replies.