[Resolved] Thumbnails below product image on single product page doesn't work

[Nik]

In the single product page, there are 3 – 4 thumbnails below the main product image.
On mobile, when I tap these thumbnail images, the main product image doesn’t get updated. It only starts working like 10 – 20 seconds after the page loads, then when I tap on it, it works again.

This issue doesn’t appear on desktop.

I’ve disabled all plugins on my site except WooCommerce (I even disabled GeneratePress Premium), but problem still exists.

GeneratePress 2.2.2

GP Premium 1.7.8

[David]

Hi there,

can you try disabling other plugins to see if there is a conflict?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Nik]

Hi David, I’ve already disabled all the plugins on my site except for the Woocommerce plugin itself.

[David]

Do you have any custom scripts in your child theme or in hooks?
I can see the click on the thumbnail is working its just not completing the action.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Nik]

Hi David, I do have some code in the child theme (style.css and functions.php) file to customize the look of the site, but I’ve removed them all and tested again, but the problem still persists.

Any ideas? Thanks!

[David]

Are you using any Cache / Optimization plugins?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Nik]

Yes, Wp Rocket and AutoOptimize, but they’re already disabled.

[Tom]

Hi there,

Can you try adding this CSS?:

@media (max-width: 768px) {
    .zoomImg {
        display: none !important;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Nik]

Hi Tom, thanks, I added that code in the Customize > Additional CSS section but it’s still the same.

[Tom]

Just made an adjustment to the CSS above – can you give it another shot?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Nik]

Nope, doesn’t work….

[Tom]

Hmm, I can’t see any other reason why this would be happening – there must be something specific to your site.

Before you deactivated your caching plugin, did you clear it?

I assume you’ve tested with all of your custom CSS removed?

Do you have another site to test on to see if you can spot the difference between the two?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Nik]

Hi Tom, yes I just tried clearing the cache (both on server side and within WP dashboard) before de-activating the plugin, and tested with all custom CSS removed (it’s pretty much now a bare site with only GeneratePress and WooCommerce).

I don’t have another site. Do you mean to make a copy of this site and test on another server?
I think it’s probably somewhere in the code itself.

The only thing I can think of is that recently, I hired one of the Codeable.io guys to change my SSL links to all https instead of http (since it was previously a mix of http and https and the secure lock icon doesn’t show), not sure if that somehow affects the site, but seems unlikely.

[David]

Unless there was a redirect to an HTTPS link on those images, i can’t see that causing the issue. It looks like you have added a different carousel plugin and the issue is resolved? Let us know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Nik]

Hi David, yes, I installed a product image plugin to replace the default woocommerce plugin.
It’s the best workaround. 🙂

[Author]

Posts