Search code examples
phpwordpresswoocommerceproducthook-woocommerce

Which hook for Woocommerce single product thumbnail src link replacement


Is there any hook to change the single product thumbnail? I did search a lot on SO as well as over the internet but no luck.

With 'thumbnail' I don't mean changing the size of the current image but I want to completely change/replace the product image (thumbnail) with a new image based on some scenario.

public function pn_change_product_image_link( $html, $post_id ){

    $url =  get_post_meta( $post_id );
    $alt = get_post_field( 'post_title', $post_id ) . ' ' .  __( 'thumbnail', 'txtdomain' );
    $attr = array( 'alt' => $alt );
    $attr = apply_filters( 'wp_get_attachment_image_attributes', $attr, NULL );
    $attr = array_map( 'esc_attr', $attr );
    $html = sprintf( '<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/WP_Suspension_logo.svg/2000px-WP_Suspension_logo.svg.png"', esc_url($url) );
    foreach ( $attr as $name => $value ) {
        $html .= " $name=" . '"' . $value . '"';
    }
    $html .= ' />';
    return $html;
}

This is what I'm doing now but it's throwing an error.

Filter, Hook:

post_thumbnail_html

Solution

  • On the template single-product/product-image.php you can see all the source code that is displaying images on single product pages.

    you could use woocommerce_single_product_image_thumbnail_html as I have suggested in the comments, but it's not really useful, as you want to set a custom source link for the main image.

    In the template source code you will see that it uses WordPress function wp_get_attachment_image_src() and in it's source code you will see that you can use the filter hook 'wp_get_attachment_image_src' which is really convenient for what you want to do…

    So now you can build your code on it:

    add_filter( 'wp_get_attachment_image_src', array( $this, 'pn_change_product_image_link'), 50, 4 );
    public function pn_change_product_image_link( $image, $attachment_id, $size, $icon ){
        if( ! is_product() ) return $image; // Only on single product pages
        if( $size == 'shop_thumbnail' ) return $image; // Not for gallery thumbnails (optional)
    
        // Your source image link
        $src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/WP_Suspension_logo.svg/2000px-WP_Suspension_logo.svg.png';
        $width  = ''; // <== (optional) define the width
        $height = ''; // <== (optional) define the height
        $image  = array( $src, $width, $height );
    
        return $image;
    }
    

    This code goes in any plugin file with a constructor (but not in function.php file).

    The code is tested and works.

    You can target dynamically different image sources using $attachment_id function argument…


    The theme function.php file version

    Just replace:

    add_filter( 'wp_get_attachment_image_src', array( $this, 'pn_change_product_image_link'), 50, 4 );
    

    By this

    add_filter( 'wp_get_attachment_image_src', 'pn_change_product_image_link', 50, 4 );
    

    This code goes on function.php file of your active child theme (or theme).