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 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.
Similar Articles
- How to Create Popups in WordPress Without Installing a Plugin
- How to Delete All Products WooCommerce MySQL
- How to Fix Duplicate WooCommerce Products Showing Up on Page
- How To Add Custom CSS To WordPress Page
- How to Get Product Image src WooCommerce
- How To Display Product Variations In WooCommerce
- How to Resize WooCommerce Product Images
- How to Remove Proudly Powered by WordPress Footer Link
- WooCommerce Image Placeholder Guide
- How to Add Amazon Affiliate Products to WooCommerce
- How to Change Link Color in Storefront WooCommerce Theme
- How to Link to an Email Address in WordPress
- How to Change Return to Shop Link in Woocommerce
- How to Remove Zoom Effect on WooCommerce Product Image
- How to Exclude Product From Discount Coupons WooCommerce
- How to Hide Product Image on Cart Page WooCommerce
- WooCommerce Create Custom Single Product Page
- How to Change Out Of Stock Text in WooCommerce
- How to Remove Category from Product Page WooCommerce
- How to Customize Storefront Theme Using Customizer