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

Hi Gunter,

Excellent, thanks for adding a fix for that, much appreciated.

Regards

Tim

Hi Gunter,

Thanks for the quick reply. Please see private for details.

Yes that option is selected in the theme options, but as outlined in point 1 it didn’t work. Now there’s no image set (as you’ll see in the backend) yet the most recently uploaded image in the media library displays for all categories.

Look forward to seeing what you find out, thanks for the assistance.

Regards

Tim

Hi Gunter,

That is fantastic news, thank you very, very much!

I really appreciate you working on that and I look forward to trying it out soon with the release of 6.0

It looks like it’s going to be a huge release, lots of work detail in the changelog. Thanks for all your work improving the theme.

Will let you know any feedback on it once I’ve tested it.

Thanks again

Tim

Hi Gunter,

In Private,

Thanks again.

Thanks Gunter for looking into this and adding the fix in the next update, much appreciated.

Tim.

Hey Gunter,

Thanks for taking a look, I wasn’t sure if it was theme or core related so thanks for confirming.

Please see private.

Thanks again

Tim

Hi Gunter,

Circling back to this one, sorry for the long delay on it. We’ve tried to make this work ourselves, but really feel that improving this in core Enfold would be the better option if at all possible.

Most ecommerce stores now have a banner image on their category pages, and while Enfold has this ability I really hope it could be improved. My suggestion is the following…

1. Leave the current functionality in place for sites that already have it so as not to break anything
2. Provide an option in the Enfold Shop settings to toggle the existing parallax effect on or off
3. Provide an option in the Enfold Shop settings to toggle the ability to have text over the image on or off. If this is set to off, the image should no longer be loaded as a background image, but rather a normal image with full srcset abilities to improve performance, and the ability to select an image size from the usual drop down list of registered image sizes. Also, if this option is set to off, the text is output below the image on the page as normal.
4. Provide an option in the Enfold Shop settings to change the position of where this image is displayed on the front end. Currently it displays above the breadcrumb bar, but this is unusual functionality as any page built with the ALB will always put content below the breadcrumb bar. So an option to place the image below the breadcrumb bar (but still full width) would be perfect.

These settings would need to affect not just the single Shop banner image, but also the category banner images as well (that are added via editing the categories themselves).

I hope that makes sense Gunter, thanks as always for considering improvements

Kind regards

Tim

• This reply was modified 1 year ago by THP Studio.
• This reply was modified 1 year ago by THP Studio.
• This reply was modified 1 year ago by THP Studio.

Thanks Gunter, please see below.

Hey Gunter,

Excellent, thanks for confirming that, I figured Enfold wouldn’t need to interact directly with those changes but just wanted to confirm.

Thanks for taking the time to respond.

Regards

Tim

Thanks Ismael, we will keep your code for reference should we need this again on another project, much appreciated.

This can be closed.

Tim

This can be closed thanks.

Thanks Yigit, this can be closed.

Thanks Gunter, we will wait for 5.6 to test the functionality, but hopefully this does what we need it to, although if it just pulls max size I’m not sure it will. Could it be tweaked a little to allow us to specify an image size to call?

Regards

Tim

Hi Gunter,

Thanks a lot for the reply. Shame there’s no easier way to interact with this.

To help us further with this, can I ask how Enfold adds the search icon to the header so that it always stays in its position in the header both on desktop and mobile? Eg: on mobile it doesn’t get added to the hamburger menu, but rather sits next to it, which is what we want.

Thanks

Tim