Archived topic
Woo Commerce product gallery not rendering properly on mobile...
9 replies · Started by Caro on September 14, 2021
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
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?
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/
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!
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.
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
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!!!
Yeah I'd say just wait for WP Rocket to respond - I'm sure they've seen this issue already :)
Thank you — will do
Please let us know when you hear back on a solution as well.
Thanks!
