[Support request] Woo Commerce product gallery not rendering properly on mobile…

[Caro]

Morning team!

Re https://www.mooksdesign.co.uk/

My Woo Commerce product gallery is not rendering properly on mobile view. It looks fine on desktop; but on mobile, the hero product image doesn’t have the secondary images underneath in a row. They’re just stacked one on top of another and they’re all pixelated.

I suspect it’s caused by WP Rocket — but not sure what.

I don’t have any minify CSS switched on — only remove unused.

I have delay JS switched on — and when I switched that off, the problem remained, so I’ve switched it back on again.

I’ve also added this to the excluded files:

/woocommerce-tm-extra-product-options/assets/js/epo.min.js
/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js
/jquery-migrate(.min)?.js
/wp-includes/js/jquery/ui/core.min.js
/wp-includes/js/jquery/ui/mouse.min.js
/wp-includes/js/jquery/ui/slider.min.js
/wp-includes/js/underscore.min.js
/wp-includes/js/wp-util.min.js
/wp-includes/js/dist/hooks.js
/wp-includes/js/dist/i18n.js
/woocommerce/assets/js/zoom/jquery.zoom.min.js
/woocommerce/assets/js/photoswipe/
/woocommerce/assets/js/flexslider/jquery.flexslider.min.js
/woocommerce/assets/js/frontend/single-product.min.js

Not sure if this right — but it’s not solving the issue so I’m assuming not!!

Please can someone help me to fix it?

Best,

Caro

[Ying]

Hi Caro,

Can you link us to the page that we can see the issue?

Have you tried disable the cache plugin completely to test?

[Caro]

Hiya, yes. I’ve disabled the plug-in completely and it’s definitely WP Rocket causing the issue.

This page gives an example of what I’m seeing.

https://www.mooksdesign.co.uk/shop/15-personalised-rambling-rose-favour-tins/

[Leo]

I would try disabling these two settings within WP Rockets first:
1. Disable Optimize CSS Delivery
2. Enable Remove Unused CSS

If not please check with WP Rocket’s support team – I’m sure they’ve seen this issue and have a solution already.

Thanks!

[Caro]

I don’t have those two settings enabled.

And yes — I’ve contacted them I’m still waiting for a reply.

Is there a JS code that powers the product gallery? I wondered if I could add it to the delay DS setting.

[Leo]

Yes I’d assume the product gallery is using a JS script.

You can try searching for it in their Github repo:
https://github.com/woocommerce/woocommerce/search?q=gallery
https://github.com/woocommerce/woocommerce/tree/trunk/assets/js

[Caro]

Thanks Leo — I don’t really know what I’m looking for to be honest. I don’t understand all the code!! I hoped there would just be one thing — there’s so many!!!

[Leo]

Yeah I’d say just wait for WP Rocket to respond – I’m sure they’ve seen this issue already 🙂

[Caro]

Thank you — will do

[Leo]

Please let us know when you hear back on a solution as well.

Thanks!

[Author]

Posts