How to remove WooCommerce single product image lightbox link

Introduction

WooCommerce is great and sometimes the lightbox image link for the product image is really not needed.

So I needed to find out a way to remove single product image lightbox link for individual WooCommerce product pages.

The easy way to remove the single product image lightbox link in WooCommerce

The solutions which I have found consists in two pieces of code.

The first piece of code removes the link from the product image. You need to add the following code to your functions.php file in your WordPress theme's folder:

function zi_remove_product_image_link( $html ) {
    return preg_replace( "!<(a|/a).*?>!", '', $html );
}
add_filter( 'woocommerce_single_product_image_thumbnail_html', 'zi_remove_product_image_link', 10, 2 );

The above coded uses woocommerce_single_product_image_thumbnail_html filter to remove the link around the product image.

After that, you will notice that the link it is removed indeed, but you are still able to see the magnifying glass icon on top right.

Once it is clicked it will open the lightbox for the image. That is not good

To fix this I added a second piece of code. This time it is a CSS code and needs to be added to Appearance > Customize > Advanced CSS:

.woocommerce-product-gallery__trigger {display:none !important;}

Once the code it ias added and saved, the magnifying glass icon will not show up.

Conclusion

To be honest, I realize that this might not be the most elegant solution to disable image lightbox for WooCommerce product images. But, as long as it has the right result, it is just the best for me.