[Resolved] Disable lightbox woocommerce, but retain zoom on hover

[Pauline]

Hello

I would like to disable the lightbox for individual product images in woocommerce, but still retain the zoom on hover. Can you advise me how to do this (preferably just using CSS – I’ve never delved into PHP, but if it’s necessary, I’ll give it a go…)?

Thanks
Pauline

[Ying]

Hi Pauline,

There’re 2 options, CSS and PHP 🙂

Here’s the CSS solution:

.single-product a.woocommerce-product-gallery__trigger, .single-product img.zoomImg {
    display: none !important;
}

And here’s PHP solution:

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 );

Let me know 🙂

[Pauline]

Hi Ying

Thanks so much for giving me 2 options 🙂 I used the CSS, but it took away the “zoom/magnification on hover”. Perhaps I did not phrase my question correctly – I would like the user to be able to zoom/magnify over the image when they glide their mouse over the image (this is the default woocommerce capability which I am getting on my website), but I don’t want them to be able to click on the picture and have it open full size in another screen. Is there any CSS that can do this?

Best regards
Pauline

[David]

Hi there,

the PHP solution that Ying provided disables both the zoom and the lightbox, so you just need to remove the lightbox like so:

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

[Pauline]

Thankyou David for sorting me out again – the PHP worked perfectly 🙂 Thanks also to Ying for her earlier code suggestions, which I will reference for the future 🙂

[David]

Glad we could be of help

[Author]

Posts