How to Disable Link on Product Image WooCommerce

Table of Contents

Do you wish to remove the link that is always wrapped around the WooCommerce product image?

If you are looking for a quick way to remove the WooCommerce link on your store product images, I will share with you an effective WooCommerce disable link on the product image code snippet that will help you fix this issue.

I will also illustrate how you can use this code to remove the link on the product image.

As a WooCommerce developer, you may also want to understand how to display WooCommerce product images.

In my previous tutorial, I shared with you how you can get the WooCommerce product image src and use it in your code to customize how the WooCommerce product image is displayed.

WooCommerce Disable Link on Product Image

When you check the WooCommerce product image you will see it is wrapped in an href tag as shown in the image below :

This is what makes the WooCommerce product image to be clickable.

If you want to disable the link on this WooCommerce product image you should add the following snippet to your WooCommerce child theme functions.php file or your plugin files if you want to implement this customization using a custom WooCommerce plugin.

add_filter( 'woocommerce_single_product_image_thumbnail_html', 'njengah_remove_product_link' );
function njengah_remove_product_link( $html ) {

return strip_tags( $html, '<div><img>' );
}

This is a filter that hooks on the single product image HTML hook and takes one parameter in the callback function which is the HTML tags that you want to return in the callback function.

You then use the strip_tags function to remove the HTML tags that you do not want in the single product image HTML.

You should add this code in the functions.php or your plugin and when you update you will see the product image link is removed successfully as shown in the image below :

Conclusion

In this post, we have looked at the way you can use to disable or remove a link on a product image in WooCommerce by changing the HTML tag in the single product image HTML and stripping the href tag which is the HTML link tag so that you get rid of the link in the WooCommerce product image.

Joe

Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.

How to Disable Link on Product Image WooCommerce

WooCommerce Disable Link on Product Image

Conclusion

Similar Articles

Related