How can I disable product lightbox but still can click on other pictures?

cindywill317 · March 2021

Hi, I use this code to disable the lightbox and zooming effect

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .zoomImg {display:none!important}
.woocommerce div.product .images {pointer-events: none !important;}

But it also disable to click-on other pictures of products.

It there any way to disable the lightbox effect only on the main picture?

Here's the single product page

https://allmyloveyogurt.com/shop/mango_yogurt/

Thanks a lot!

Phil · March 2021

Hello,

To disable the zoom effect, please go to Betheme -> Theme options -> Blog, Portfolio & Shop -> Shop, and in the Single Product section, select Product image: Disable zoom effect.

But to disable the lightbox, please, use the following CSS Code:

.woocommerce .woocommerce-product-gallery__image a{
   pointer-events: none!important;
}

Thanks

cindywill317 · March 2021

Hi, thanks for helping.

But the lightbox effect still on...

and it's like two lightbox (sry, not really know how to expain that.)

Phil · March 2021

I tried to click on the main image, and the lightbox does not show up.

Are you able to send me an example website of how it should work?

Or maybe try to explain in more detail what you want to achieve.

Best regards

cindywill317 · March 2021

Hi, sry if I didn’t say it clearly!

I want the lightbox effect disable on all images.

because at first I use the code I said above, the lightbox is gone but it also makes me can not click to see other images.

Phil · March 2021

I tried to click on other images, and the lightbox is not working either but switching to see other images works.

Can you send me a link to the page that contains an image with a lightbox and a screenshot showing what you are referring to, please?

Thanks

cindywill317 · March 2021

But I can still click on those images and the lightbox still popup. ( sry if I misunderstanding the "lightbox.")

as you can see from the picture, this is what it shows when I click on the images. There's two lightbox.

How can I make the images unclickable? I think this is the main question.

Thanks again!

Phil · March 2021

Are you able to record where do you click and these lightboxes and upload them here, please?

Thanks to that, I will be sure what you are referring to.

Thanks

cindywill317 · March 2021

Hi! I figure it out... I just simply add this css

.woocommerce-product-gallery__image {
    pointer-events: none;
}

sorry if I didn't say it clearly before!

Thanks :)

Phil · March 2021

That is great you found the solution!

If you have any other questions or problems, feel free to ask.

Best regards

How can I disable product lightbox but still can click on other pictures?

Comments