We’ve already seen how to open the External Product “Buy Product” button in a new browser tab – and now it’s time to complete the full picture for External/Affiliate WooCommerce Products: how do we also link the “featured” image to the same external URL?

Our goal is to get the External Product featured image to link to the same “Buy Product” URL

PHP Snippet Part 1: Disable Zoom/Gallery (For External Products)

If we want to link to a URL, we first need to disable the default WooCommerce zoom and lightbox gallery functionalities.

You can use https://businessbloomer.com/woocommerce-disable-zoom-gallery-slider-lightbox-single-product/ for that.

Also, make sure to disable the Product Gallery e.g. that the external product has only 1 featured image.

PHP Snippet Part 2: Link Featured Image to External Product URL @ WooCommerce Single Product Page

 * @snippet       Image to External URL - WooCommerce Single Product
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.8
 * @donate $9     https://businessbloomer.com/bloomer-armada/

add_filter( 'woocommerce_single_product_image_thumbnail_html', 'bbloomer_image_link_external_url', 100, 2 );

function bbloomer_image_link_external_url( $html, $post_thumbnail_id ) {
   global $product;
   if ( ! $product->is_type( 'external' ) ) return $html;
   $url = $product->add_to_cart_url();
   $pattern = "/(?<=href=("|'))[^"']+(?=("|'))/";
   $html = preg_replace( $pattern, $url, $html );  
   return $html;

Leave a Reply