Home » WooCommerce: Edit External Product Image URL

WooCommerce: Edit External Product Image URL

by Tutor Aspire

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 tutoraspire.com FREE
 * @author        Tutor Aspire
 * @compatible    WooCommerce 3.8
 * @donate $9     https://www.tutoraspire.com

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

function tutoraspire_image_link_external_url( $html, $post_thumbnail_id ) {
   global $product;
   if ( ! $product->is_type( 'external' ) ) return $html;
   $url = $product->add_to_cart_url();
   $pattern = "/(?

You may also like