Hi @saqlain234
I understand that you only want to have the zoom feature in the top right corner of your products’ images, and disable the WooCommerce hovering effect, right?
You can add a CSS code by navigating to Appearance → Additional CSS, then paste the code below to disable the zoom effect while hovering the image.
/* Disable hovering zoom effect */
.woocommerce div.product div.images .zoomImg {
display: none !important;
}
Hi @aguinaldodarla,
The code you mentioned worked right but there is a little problem that when I open my website on mobile browser the area of picture doesn’t scroll so i have to scroll from upside. Kindly tell me solution to this.
Hi @saqlain234
I apologize for that. Here’s the modified code:
/* Disable hovering zoom effect on desktop */
@media (min-width: 768px) {
.woocommerce div.product div.images .zoomImg {
display: none !important;
}
}
The code means that the zoom effect will only be disabled on screens with a width of 768 pixels or greater (typically desktop and tablet screens). On smaller screens, such as mobile devices, the zoom effect should not be affected, allowing users to scroll the image area as needed.
