Swiping WooCommerce product gallery images is glitchy

Hi @shahzeb104,

I can see the same behavior on my dev site. I am checking this with our team. I will update this thread once I have anything to share.

Kind regards,
Herman ??

Hi @bsfherman,

Thank you for the reply. Wanted to know if you checked this issue with the team?

Hi @shahzeb104,

I have an update for you. It appears that the behavior is an expected outcome from the WooCommerce plugin. The slider is behaving differently on some themes like Astra, Kadence, and WordPress 2024 and is smoothly in effect with WordPress 2023 and storefront. We don’t have control over this as we are using the flexslider from WooCommerce only!

For an alternative solution, I would recommend reaching out to WooCommerce support as they can guide you better with this.

Kind regards,
Aradhy

I contacted WooCommerce support. Here’s their reply:

“Please note that if this issue were caused by WooCommerce, it would likely be consistent across all themes. Since the issue is resolved when you switch to a theme other than Astra, it strongly suggests that the problem is related to the Astra theme, not WooCommerce.
I recommend reaching out to the Astra theme support team again with this information. They might need to investigate further to ensure compatibility with WooCommerce’s flexslider implementation or look into any specific customizations in their theme that might be causing the glitch.”

Here is my conversation with them. You can see in the conversation that I asked them twice about this issue. They are pretty confident that the issue is from Astra’s end and not from their side. I think what they’re saying makes sense. If this glitch issue is from WooCommerce then it should appear in all themes, but that’s not the case.

Please further investigate this issue. It’s a major UX issue and is having a negative impact on my website, and probably thousands of websites that are using Astra.

Hi @shahzeb104,

I’ll reach out to our team and get back to you with an update as soon as I have more information. I’ll be sure to share it here.

Kind regards,
Aradhy ??

Hi @shahzeb104,

Can you please try adding the following CSS to Customize > Additional CSS:

.woocommerce-js div.product div.images figure.woocommerce-product-gallery__wrapper {
    transition: all ease .5s; /* OR transition: all linear .5s; */
}

Hope this helps.

Kind regards,
Aradhy ??

@bsfaradhy added the CSS. Didn’t work. Still the images transitioning using swipe is glitchy.

Can you please give this issue high priority? It has been 6 weeks since I reported this issue.

Hi @shahzeb104,

Apologies for the inconvenience caused.

I’ve reached out to our development team, and they provided an updated code for you. Please replace your current code with the following:

.woocommerce-js div.product div.images.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
transition: all ease .5s; /* OR transition: all linear .5s; */
}

This has worked on my end, and I hope it resolves the issue for you as well.

Kind regards,
Aradhy ??

@bsfaradhy thank you! It worked.

Hi @shahzeb104,

Happy to help!

Feel free to mark this ticket as resolved, but don’t hesitate to reach out if you need any further assistance in the future.

Kind regards,
Aradhy ??