Zoom on the product page

Is it possible to change the magnification (in settings or in code)?
What is now is too big for me, because the photos are not super quality and I need a little less magnification.

Hi,

You can select the “Zoom” functionality for the “Main image click action” option from theme settings >> Product Page >> Images.

Screenshot for clarification: https://ibb.co/RHtG0nG

Best Regards

I know that there you can turn it on or off in settings- this is very easy, but I was asking about something else.
Once again
Is it possible to change the magnification (in settings or in code)? Change I mean bigger or lower magnification
What is now is too big for me, because the photos are not super quality and I need a little less magnification.

And I ask where is is possible, in code , or i setting, how can I do it ?

Hi,

WooCommerce Allows some settings that you can find under Appearance >> Customize >> WooCommerce >> Product Images.

You can also read our detailed documentation for further help:
https://xtemos.com/docs/woodmart/faq-guides/image-size-content-alignment-product-grid/

Best Regards.

No, no, no, i try again to explain my problem

Suppose I have a 1000×1000 pixel photo in the gallery. On product page I see a smaller- this is norma; situation

If I turn on the magnification (zoom) in the theme settings, then after hovering over the photo on the product page, the photo enlarges 1: 1, so if the original photo has 1000×1000 pixels, the magnification also shows this size. So i see a big foto and this is too big.

How to reduce the magnification, for example to 600×600 pixels or 800×800 or 700×700 etc. . That is, after hovering over the photo product, the enlarged photo would be smaller, and not like the original, so 1000×1000 pixels

Simply, how can you smoothly adjust the magnification to make it bigger or smaller?

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(1.8) !important;
}

In this CSS, you can change the value of scale according to your choice. We have added 1.8 as an example.

Best Regards

[Author]

Posts