CODEWITHSUNDEEP
imagewoocommerce
user3522375
user3522375

Reputation: 45

Remove LinkUrl to Image for Woocommerce Products

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?

Upvotes: 3

Views: 10255

Answers (5)

Hugo Picado de Almeida
Hugo Picado de Almeida

Reputation: 3

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!

Upvotes: 0

Kirill A
Kirill A

Reputation: 517

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

Upvotes: 0

Yolanda
Yolanda

Reputation: 1

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.

Upvotes: 0

amir
amir

Reputation: 27

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

Upvotes: 1

Howli
Howli

Reputation: 12469

Change this line inthe product-image.php

echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s" data-rel="prettyPhoto' . $gallery . '">%s</a>', $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( '<a href="%s" class="%s" title="%s" data-rel="prettyPhoto[product-gallery]">%s</a>', $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.

Upvotes: 6

Related Questions