WooCommerce Product Image Zoom & Gallery Problem

WooCommerce product image thumbnails

- 7 years, 8 months ago kentsmythe
 Participant
 
 Expired
 
 I have two problems with WooCommerce(3.1.1) product images and Specular(2.5.0) running on WordPress 4.8.1.
 
 Zooming on Product Image – On the product page, the zoom only works if I first click on the image. Shouldn’t it zoom if I simply hover over the image?
 
 Switching Product Images – On the product page, when the product has multiple images, clicking on one of the additional thumbnail images does not load the new image. The image remains the same.
 
 You can see these issues at this link.
 
 I have deactivated all plugins with the exception of WooCommerce. But I’m still seeing the problem. I switched to Twenty Seventeen and it got rid of the “switching product images” issue. But I still have to click to zoom on the image.
 
 Thanks in advance for your assistance.
- 7 years, 8 months ago Mirela
 Participant
 
 Hello,
 
 1-Yes, the zooming starts as soon as you hover over the product image. If you are not getting this, then some conflict may be happening in your site. Do you have any third party plugins installed? Please deactivate all and try again.
 
 2-Switching product images does not have any issue as well.
 
 I opened the link provided and none of the issues are present. Please see this screen recording of it: https://drive.google.com/file/d/0B51Lyn41UgszdG5rSWdsSEpOY2c/view
 
 Did you manage to fix it? If not, i suggest you try opening the site from another browser. Perhaps you have add-ons installed that conflict with it’s scripts.
 Let us know.
 
 Best regards!
- 7 years, 8 months ago kentsmythe
 Participant
 
 Expired
 
 Thanks for your assistance. All plugins are disabled except for WooCommerce. All browser extensions are disabled. I have been able to narrow down the problem. It seems to only occur on Windows 10 touch screen computers with the Chrome browser. Works fine with touch on Edge and Firefox. Any idea what might be causing the problem on touchscreen/Win10/Chrome systems?
- 7 years, 8 months ago Mirela
 Participant
 
 Hello,
 
 The zooming effect takes place after capturing a mouse hover action. If you are in a touch screen, this action is not possible because of the touch.
 
 This is a WooCommerce feature not controlled from theme.
 I will forward your topic to our developers to see what they can do for future theme updates. But for now, this is out of this support reach.
 
 Best regards!
- 7 years, 8 months ago kentsmythe
 Participant
 
 Expired
 Thanks for your quick reply. I understand from your response WooCommerce is detecting a touchscreen when I’m using Chrome. Very curious it’s not detecting it when I’m in other browsers. I’ve also noticed it’s not detecting the touchscreen when I’m using Twenty Seventeen and Chrome. It works fine with Twenty Seventeen. This has me thinking it’s the combination of Specular, Chrome and touchscreen.
 
 Also I’m unable to switch to another product image by clicking on the thumbnail when I’m in Chrome w/touch. I can use touch to switch images, but not a mouse click. Weird.
 
 This reply was modified 7 years, 8 months ago by kentsmythe.
 
 This reply was modified 7 years, 8 months ago by kentsmythe.
- 7 years, 8 months ago Mirela
 Participant
 
 Hello,
 
 Can you post a screen recording of these actions?
 I just tested the product image zooming in ipad touch and i was able to switch the related images and also to zoom by clicking on a point in the image.
 Let us know.
 
 Best regards!
- 7 years, 8 months ago kentsmythe
 Participant
 
 Expired
 
 I did two screen capture videos for you. I now understand the zoom will not activate on the main product image on a touchscreen device until the image is clicked. The issue I’m still experiencing is clicking on the thumbnails doesn’t change the main image on the product page. The two videos below show the same site with Specular and Twenty Seventeen activated.
 
 Video 1 – Specular theme. https://youtu.be/GAzdTglMmTs
 
 Video 2 – Twenty Seventeen theme. https://youtu.be/0zig2p9LX3w
 
 Note – If I disable touch in Chrome (using this method) everything works fine with Specular.
- 7 years, 8 months ago Ruco
 Keymaster
 
 Hello,
 
 I tested the thumbnail image click on chrome and on ipad. It works fine. Try to disable any chrome extension and clean the browser cache. Let us know it if happens again, and help me replicate your situation.
 
 Best regards!
- 7 years, 8 months ago kentsmythe
 Participant
 
 Expired
 
 I have disabled all Chrome extensions and reset Chrome to the default settings, also cleared browser cache. Still didn’t help.
 
 I did some research and wonder if this might be due to how Specular is handling mouse inputs when a touch screen is detected. See these posts regarding similar problems and recommendations for developers. The posts go beyond my understanding but maybe they will help you diagnose the problem and find a solution. I’m not technically savvy enough to look into how Specular and Twenty Seventeen differ in their detection and handling of touchscreens.
 
 Issue 332397: Mouse click does not work while touching the screen does – on certain websites Issue 392584: TouchEvent API should be enabled consistently (Engineers are working on this issue) Issue 578695: Mouse clicks don’t work on some sites when touch events are supported
- 7 years, 8 months ago Ruco
 Keymaster
 What Chrome version are you using? The above links refer the issues in CHROMIUM browser, a developer version of Chrome. Please use the official one: Version 60.0.3112.90 (Official Build).
 
 Let us know.
 
 This reply was modified 7 years, 8 months ago by Ruco.
- 7 years, 8 months ago kentsmythe
 Participant
 
 Expired
 
 I’m using Version 60.0.3112.101 (Official Build) (64-bit)
- 7 years, 8 months ago Ruco
 Keymaster
 
 This reply has been marked as private.

Viewing 11 reply threads

You must be logged in to reply to this topic.

Community Forums

WooCommerce Product Image Zoom & Gallery Problem

Site Links

Useful Articles

Login