stop woocommerce shop overlay images showing on page before thumbnails

Hello @stevexi555

Based on your description and image shared, the overlay thumbnail images are showing up on your page before your own thumbnails have a chance to load in.

While there isn’t a built-in feature to prevent the WooCommerce shop overlay thumbnails from loading before your own, there are a few possible solutions that you might consider. You could try using some lazy load plugins. These plugins work by waiting to load images that aren’t immediately visible when a page loads. This could give your thumbnails a chance to load before the WooCommerce shop overlay thumbnails.

You can also optimize your thumbnails to load faster. You can do this by compressing the images or reducing their dimensions. There are several plugins that can automate this process for you.

I hope it helps!

Hi Darla,

Thank you for your suggestions, much appreciated!

I will try them out later and hopefully it will remedy the problem or make it less apparent.

Kind regards,

Steve

Hi Steve,

Thanks! Let us know how it goes. ??

Hi Darla,

I tried several plugins which have the lazy loader and also optomize thumbnails and found Litespeed to be the best one, while it loads my website faster it doesn’t have much affect on the woocommerce thumbnails load times and the lazy loader as no effect on the overlay images for some reason?

• This reply was modified 1 year, 6 months ago by stevexi555.

Hi @stevexi555

There could be a few reasons why this is happening. One possibility is that there might be a conflict with another plugin or your theme. You can check this by deactivating all other plugins except WooCommerce, switching to a default theme like Storefront, and then testing the lazy loading and optimization again.

Also, it’s important to note that LiteSpeed Cache is a server-level cache, which means it works at a level above WordPress and WooCommerce. This is why it might not be having the desired effect on your WooCommerce thumbnails and overlay images.

However, here are a few steps you can take to troubleshoot this issue:

• Check Image Optimization Settings: Ensure that you have enabled image optimization in the LiteSpeed Cache settings.
• Check Lazy Load Settings: Make sure that the Lazy Load settings are correctly configured.
• Exclude Thumbnails from Lazy Loading: If the above steps don’t work, you might want to consider excluding WooCommerce thumbnails from lazy loading. Sometimes, certain images might not play well with lazy loading, and excluding them might solve the issue.

If none of the above steps work, you might want to consider using a dedicated image optimization plugin for WooCommerce thumbnails. There are several plugins available that can help you optimize your WooCommerce thumbnails.

Additionally, it would be best to reach out to the plugin’s developers for further assistance here: https://www.ads-software.com/support/plugin/litespeed-cache/#new-topic-0

Remember to clear your cache after making any changes to see if the issue has been resolved.

I hope this helps! If you have any other questions, feel free to ask.

Hi Shameem,

Thank you for the time and for your suggestions!

I’ve tried everything but to no avail, I think it’s gonna be a case of investing in a dedicated image optimization plugin for WooCommerce, I’ll do some research and see what’s what but thanks for your reply, it’s very much appreciated!

kind regards

Steve

Hi @stevexi555

While a dedicated plugin could certainly help, there might be other solutions to explore as well.

You can try optimizing your images before uploading them to your site. There are several free tools online that can help with this. Also, ensure your images are the correct size for your site’s design to avoid unnecessary large files.

If you still prefer to go with a plugin, several reliable ones are available, such as Smush, EWWW Image Optimizer, and Optimole. These have good reviews and are widely used in the WooCommerce community.

Additionally, I also suggest using CDN like Cloudflare, BunnyCDN etc.

Meanwhile, I will be marking this thread as resolved. Should you have further inquiries, kindly create a new topic here.

Thank you for your patience and for letting us assist you!