Adjusting Product Image’s Zoom Magnification Factor
-
Hi there,
We want to adjust product images’s zoom magnification factor without resizing the image.
We already did some research and found this in forum but it’s not working:
https://stackoverflow.com/questions/53584936/adjusting-product-images-zoom-magnification-factor-in-woocommerce-3
Is there any way to to this?
Thank you.
Hello,
Although unfortunately there isn’t a direct option available to adjust the Product Image zoom effect but you can try using the below Custom CSS code and paste it to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section:
.single-product .zoomImg {
transform: scale(0.8) !important;
}
In this CSS, you can change the value of scale according to your choice. We have added 0.8 as an example.
Hope this works out for you !
Best Regards.
Hi there,
We’ve tried this solution, it woking but it has a downside after apply it.
If we hover over the corner or edge of the image, there is a big gap in the image that is hovered.
Screenshot : https://prnt.sc/W_EjQFYcZLTR
We’ve decided to replace the image, but would appreciate if you have any other suggestions. Thank you
Hello,
Sorry to say but the thing is, the Zoom of the Product Image works dynamically as it covers multiple widths and heights when hovered to different areas of the Product Image. So, it is quite difficult to adjust that with the Custom CSS. The one possible solution that we mentioned you was the only available one that was possible right now.
Other than that, It requires Customization and this is beyond our limitations and support policy scope. Hope you can understand our limitations.
Best Regards
.
