Tagged: ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • August 15, 2024 at 9:21 am #1464671
    THP Studio

    Hi Gunter,

    We have a client who wants to use the WooCommerce product image hover option, so that when you’re in catalogue view (browsing a product category for example) you can hover the product image and it swaps to a 2nd image.

    This is working fine, however it doesn’t work when the product categories or main shop page are cached (using Litespeed). Do you know of any way around this? For performance we really would want the pages cached, but also for the hover to work.

    Thanks as always

    Regards

    Tim

    August 20, 2024 at 2:37 pm #1464981
    Günter

    Hey Tim,

    Very sorry for the late reply.

    Do you have a staging site where I can see the HTML structure and the backend settings please – so we are talking about the same.

    Best regards,
    Günter

    August 21, 2024 at 4:35 am #1465015
    THP Studio

    Hi Gunter,

    No problem at all, appreciate you getting back to me.

    Please see private,

    Thanks

    Tim.

    August 21, 2024 at 3:32 pm #1465092
    Günter

    Hi,

    It seems that the class litespeed-loaded which is added to the img tag, causes the problem.

    If you check the shop page of your dev server the HTML of second image “Guy Rope” you see 2 img tags, the first one is the overlay to change – it has class avia-product-hover. Remove the class litespeed-loaded there and it will work.

    Why the first image does not have the the overlay image in HTML – no idea – maybe some customization ??

    I added an echo at line 618 in ..\enfold\config-woocommerce\config.php and when logged in it shows, that

    
get_post_meta( $id, '_product_image_gallery', true );

    returns no result – but the product shows a gallery.

    Hope this helps your developer to fix the problem.

    An idea would be to run a js script to remove class litespeed-loaded in all img tags that have class avia-product-hover.

    Best regards,
    Günter

    August 22, 2024 at 7:18 am #1465153
    THP Studio

    Hi Gunter,

    Thanks so much for taking the time to look at this.

    Your thoughts really helped point us in the right direction and eventually we were able to find a simple CSS conflict that was causing the issue, related to that litespeed-loaded class you mentioned. For anyone else who uses Litespeed cache and wants product hover but finds it isn’t working properly, hopefully this helps…

    Litespeed in their documentation suggest this code which makes lazy loaded images load in nicer:

    /* PART 1 - Before Lazy Load */
img[data-lazyloaded]{
    opacity: 0;
}
/* PART 2 - Upon Lazy Load */
img.litespeed-loaded{
    -webkit-transition: opacity .5s linear 0.2s;
    -moz-transition: opacity .5s linear 0.2s;
    transition: opacity .5s linear 0.2s;
    opacity: 1;
}

    But the opacity settings in here conflict with how Enfold wants to handle the image hover. So using a not pseudo class and removing that from the product hover eliminates this issue entirely:

    /* PART 1 - Before Lazy Load with shop products hover excluded */
img[data-lazyloaded]:not(.avia-product-hover) {
    opacity: 0;
}
/* PART 2 - Upon Lazy Load with shop products hover excluded */
img.litespeed-loaded:not(.avia-product-hover) {
    -webkit-transition: opacity .5s linear 0.2s;
    -moz-transition: opacity .5s linear 0.2s;
    transition: opacity .5s linear 0.2s;
    opacity: 1; 
}

    Hope that helps, and thanks so much Gunter, really appreciate your time always helping us with things.

    Regards

    Tim

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Product Image Hover & Cache’ is closed to new replies.