Remove lazy loading from a picture

Hello support team,

I would like to remove lazy loading from a specific image. I tried the following custom css but it didn’t work:

.attachment-thumbnail.size-thumbnail.wd-lazy-load.wd-lazy-fade {
		loading: eager;
}

The custom selector is correct, but the loadingpart appeared in red, so it’s probably not accepted as is…

Could you please help me correct this?

Many thanks

Hello,

Sorry, but we don’t have such an option that can disable lazy loading for a specific image. You can enable it globally or for a specific element via page builder.

If you’d like to contact us, we are here for whatever questions you may have.

Kind Regards

Hello Luke,

Okay I understand.
Just thinking about a potential solution: in lazy loading settings, we can define a loading offset. Is there a way to change the offset value for one image maybe?

Otherwise I’ll think of something else to make this image appear properly.

Thank you

Hello,

Unfortunately, there is no way to change the offset value for one image.

Please, describe your issue with the image so we will try to help you with it.

Kind Regards

Hello Luke,

Thank you. My issue is the following.

I have installed a plugin to add gift wraps to orders. On the cart page, there is a button to add the gift wrap that opens a popup to set it. In this popup, there is a picture of the gift wrap. However the image doesn’t load, I think because of lazy loading. I have to scroll down to force it to appear.
Do you think of something that could help display this image correctly?

I added relevant links, screenshots and admin access below.
Thank you

Attachments:

You must be logged in to view attached files.

Hello,

You should contact plugin support so that they would add compatibility with our theme when opening their popup.

The below code causes pictures to load.

$(document).trigger('wood-images-loaded');

Kind Regards

All right I will.

Thank you Luke!

Hello,

Let me know when they sorted it out.

Have a good day!

Kind Regards

Hello Luke,

The plugin support replied to my request. Unfortunately they don’t want to add JavaScript just to support one theme.

So I am looking for another solution. I am trying to include the image in a section before the plugin so that it is already loaded when the plugin appears. I set this section as hidden on all devices in Responsiveness settings so that it loads but doesn’t show.

Unfortunately my tries haven’t been conclusive:
– I tried to create a custom cart page with Layout builder but it erases my current customizations (free shipping bar removed as well as the plugin we are talking about).
– I also tried to include it in the megamenu of my header but it didn’t work either. Anyway, it would not have worked for mobile since this megamenu is not in the mobile menu.

Would there be a way to add custom css to include the picture at the top of the cart page and hide it from all devices?
Here is the url of the picture (size 150x150px): https://jubilefrance.com/wp-content/uploads/2022/06/pochette-cadeau-jubile.jpg

Thank you !

Hello,

I suggest you try the below code that shows an image by clicking on the “Ajouter une pochette cadeau ?” button.

.woocommerce-cart .giftwrap_products .giftwrap_details:after {
    content: '';
    display: block;
    background-image: url(https://jubilefrance.com/wp-content/uploads/2022/06/pochette-cadeau-jubile.jpg);
    height: 160px;
    width: 160px;
    background-repeat: no-repeat;
    background-size: cover;
}

After that, you can remove the image that comes from the plugin.

Result: https://monosnap.com/file/8z3HorQYfz08zEBRBjd9dDvJZvMWch

Kind Regards

Hello Luke,

Thank you very much for this solution, it works very well now.

And thank you for going the extra mile on this issue, it is much appreciated 🙂

Hello,

I’m glad we managed to sort this out.

Our customers are incredibly important to us here and your satisfaction remains our priority at all times and we’re excited to serve awesome customers like you in any way we can.

Thanks for your time and have a great day.

Kind Regards

[Author]

Posts