Remove LinkUrl to Image for Woocommerce Products - image

Question

I am trying to remove the ability to click on an image in woocommerce's product featured images, so that you can no longer click on the image and make it bigger.
Not much skills with css so simple explanations are appreciated.
I have the product-image.php open and I know how to enter custom code into my theme.
Anyone?

Answer 1

Change this line inthe product-image.php
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $image_link, $image_title, $image ), $post->ID );
to
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $image ), $post->ID );
and in the product-thumbnails.php file, change
echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '%s', $image_link, $image_class, $image_title, $image ), $attachment_id, $post->ID, $image_class );
to
echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '<a title="%s">%s</a>', $image_title, $image ), $attachment_id, $post->ID, $image_class );
Doing the above should remove the ability to click on the image and make it bigger.

Answer 2

works perfectly however I'm facing one issue because of it. I set up my page so that when I click a thumbnail it replaces the product image. When I apply your rule to make the product image unclickable, then the other js doesnt work anymore. Do you have any idea how I could make both work together? The jquery Im using is
(function($){
$(document).ready(function(){
$('.thumbnails a.zoom').click(function(event){
event.preventDefault();
var thumb_url = $(this).find('img').attr('src');
$('.woocommerce-main-image img').attr('src', thumb_url );
});
});
})(jQuery);

Answer 3

Try this
.woocommerce-product-gallery__image {
pointer-events: none;
It works perfectly for me.
Check if your theme has a custom CSS section and just paste it there.

Answer 4

First of all, if you want to replace single-product.php template you have to create a new one in you own theme folder.
Example: wp-content/themes/woocommerce/single-product.php
<?php
global $product;
echo $product->get_image();
?>
Will output only img tag without link and any div's.
This might be helpful https://docs.woocommerce.com/wc-apidocs/source-class-WC_Block_Featured_Product.html#156-175

Answer 5

I was looking for how to disable the zoom and lightbox on product images and the following code (inserted on functions.php) helped:
add_action( 'after_setup_theme', 'remove_pgz_theme_support', 100 );
function remove_pgz_theme_support() {
remove_theme_support( 'wc-product-gallery-zoom' );
remove_theme_support( 'wc-product-gallery-lightbox' );
}
This had, however, the side effect of still allowing users to click on the image, sending them to the direct link of the file. On the OceanWP theme I found this to work (insert it on your css):
img.wp-post-image {
pointer-events:none !important;
This will work for the featured image, but if you have other images in the same product gallery, those ones will still be clickable. To disable the click on those too, insert this extra code on your css:
div.woocommerce-product-gallery__image.flex-active-slide {
pointer-events:none !important;
Hope it helps you!