Single product zoom effect has a bug?

webbabe · January 2023

I have the zoom effect on single product page enabled (theme options->shop->single product->image->main image), but on mobile at the moment you touch it to swipe down, the product image disappears and doesn't come back.

Tried everything I could think of, disabled all installed plugins, cleared cache etc.

Only thing to avoid the issue to set 'disable hover effect' at theme options->global->image frame->image frame->style

Or when you disable the zoom effect.

Can you reproduce this problem?

Phil · January 2023

Hi,

Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.

It is always a good idea to also attach a screenshot showing your issue.

Thanks

webbabe · January 2023

Hi Phil,

Sorry about that, thought you might were able to reproduce it in a test setup on your side.

But while I prepared the old settings so you could reproduce this issue yourself, I cannot repoduce it anymore, so maybe having saved the settings somehow removed a cache issue.

So consider it solved! Otherwise I will report. :-)

Phil · January 2023

I hope this issue will not appear again, but please, let me know if this will happen. ?

Thanks

webbabe · January 2023

Thank you and have a great weekend!

webbabe · January 2023

Hi Phil,

Unfortunately the issue is still there, I have sent and example URL via codecanyon, refering to this post.

But basically all products have this problem.

The moment you touch the screen to scroll down, the product image disappears, hen you then click underneath the image, on a text or product title, as long as it isn't on the image itself, the image appears again.

See also the description in my first post here.

Phil · January 2023

Thank you for the link. I reproduced it in my environment and checked it with another theme. In standard WP themes like Twenty Twenty-One or Twenty Twenty-Two, zoom option is disabled for mobiles by default, and we will add this to Betheme too.

For now, please, use the following CSS code:

@media only screen and (max-width:767px){
   .product-gallery-zoom .woocommerce-product-gallery__image:hover .wp-post-image{
      opacity: 1!important;
   }
}

Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Best regards

webbabe · January 2023

Hi Phil,

The css code seems to solve the issue indeed. :-)

Single product zoom effect has a bug?

Comments