The Genesis theme forces the single product images to the 555 x 688px size with hard crop. The gallery is build for images with this fixed size, but the image zoom needs the full-size images, which have a different width/height ratio than the hard cropped images.
The warm-closeup-lg.jpg photo is 1500 x 1278px and the warm-t-shirt.jpg is 1500 x 1651px. When the image is shrank and hard cropped to the 555 x 688px size, it gets two vertical slices cut away.
One simple solution for your problem is to go to WP Admin -> WooCommerce -> Settings -> Products -> Display page and disable the “Hard Crop” option for the Single Product Images, as shown here.
Afterwards go edit the product and remove the images and re-upload them. It is very important to re-upload them, not only to remove them and add them back from the Media Library. If you re-upload the image, then the Single Product Images will not be hard cropped.
Another solution is to photoshop the images to the same width/height ratio and reupload them.
Halfway there. I edited the photo to the 555 668px size, uploaded it, and the bottom is not being cropped but the right side still is.
You need to edit both the photos.
The issues comes from the fact that the photos don’t have the same width/height ratio. If one is 555 x 688px (555/688 = 0.80) and the other one is 1500 x 1278px (1500/1278 = 1.17).
I cropped the close-up to match the size of the full image, reloaded both images to the product page, now it’s cutting off the right edge of both images. When you click on the closeup, you see the sleeve of the previous image that had been cut off on the left side of the close-up image. You can see the full image using the zoom tool, but without the zoom the image is cropped on the right.
But it looks alright to me.
Ah, I see the problem, not being full screen. When the screen size is reduced, the cropping happens. Is there a way to keep this full product image when changing screen sizes? Or is this a function of the theme or WooCommerce?
I just tested the zoom plugin with the Genesis theme and everything works fine. Also with a smaller screen.
You have a custom made theme. Could you switch for a moment to the parent theme and see if the issue is still there? I assume there is a CSS somewhere in the child theme that causes that.
dang, it appears to be my child-theme messing things up. But at least I know where to look. Thanks for your help and patience!
