Stop product images from being clickable

[wicara]

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

I would like to make the images when on the single product page not clickable. at the moment you can click the image and the same sized image shows. I do not want to load bigger image files so the clicking component is pointless. Above is what I tried and it did not work.

[Prasant]

Hello @wicara,

Thanks for writing in!

Please add following CSS under X/Pro > Theme Options > CSS:

.single.single-product.woocommerce div.product .images figure {
    pointer-events: none;
}

.single.single-product.woocommerce .woocommerce-product-gallery__trigger {
    display: none;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.