WooCommerce: Edit External Product Image URL

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?

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