[Support request] disable lightbox/image zoom woocommerce

[Nick]

Hi there,

I would like to disable the image zoom/lightbox for the products.
I can not find in in woo settings or customizer?
I am using the woocommerce element/module from GP premium.
Thank you in advance.

Site is not live so i cant give any URL.

[Leo]

Hi there,

Try this snippet:

function remove_image_zoom_support() {
    remove_theme_support( 'wc-product-gallery-zoom' );
    remove_theme_support( 'wc-product-gallery-lightbox' );
}
add_action( 'wp', 'remove_image_zoom_support', 100 );

Adding PHP: https://docs.generatepress.com/article/adding-php/

[Nick]

Hi there,

Thank you, that works!

But one more thing: now the image can still be clicked on and is then enlarged but now way to navigate back to the site (other then the arrow in the browser).
Is there a way to also switch off clicking/enlarging on/off the image?

Thank you in advance.

[David]

Hi there,

try adding this snippet as well:

add_filter('woocommerce_single_product_image_thumbnail_html','wc_remove_link_on_thumbnails' );
 
function wc_remove_link_on_thumbnails( $html ) {
     return strip_tags( $html,'<img>' );
}

[Nick]

Hi there,

Sadly that also makes all variations images “gone” as in when you click on a variation from the dropdown/swatches the variation image doesnt appear when this snippet is added..

The zoom is not that much of an “issue” (if it can be removed it would be nice but otherwise no problem).

The lightbox/larger image on click is an issue since it doesnt contain any navigation (arrows/dots/similair) or an X or something to close it (people get “lost”, i gave a few the option to try it).

Could use some more help 🙂
Thank you!

[David]

Try adding this CSS just to disable the main images link:

.woocommerce-product-gallery .flex-viewport {
    pointer-events: none;
}

[Nick]

Hi there,

Same result sadly: the zoom is gone, and so is the magnifying glass icon but still the images can be opened as/in a lightbox with no navigation/arrows or way to go back (other then clicking the browser arrow).

for now i will leave it like this, once the site is live (next week) i will send a message in this topic, it is probably easier for you if you can see it 🙂

Have a nice day.

[David]

For sure – let us know when the site is live.

[Teresa]

I was just looking for how to do this…glad someone else asked. Could this be added to GP Premium Woocommerce options? Just a nice little checkbox in the Layout -> Woocommerce section. Thank you!

[Nick]

Site is live: http://www.spuitbuswinkel.nl

maybe support can have a look?

[Leo]

Sorry what is the issue with this code?
https://generatepress.com/forums/topic/disable-lightbox-image-zoom-woocommerce/#post-1253043

I just tried it and it seems to work for me:
https://wordpress-202309-991531.cloudwaysapps.com/?product=happy-ninja

[SLIM]

Man everyone is pointing at this post, when you want to disable to the ZOOM effect. However, when i add this code IF the product has multiple images it makes them disappear. Is there an alternative, has an update broken this?
Thanks.

Just to be clear (IT DOES REMOVE the zoom successfully)
It just is not displaying the OTHER images of the product. And it stacks the main featured image top to bottom (ie. if there are 4 gallery pics = it shows the featured image 4+1 times).

[David]

Hi there,

can you share a link to your site where we can see the issue?
If you want to share a link privately then raise a new topic, and you can use the Private Information field.

[Author]

Posts