Which hook for Woocommerce single product thumbnail src link replacement
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).
Related videos on Youtube
Comments
-
Akash Agrawal almost 2 years
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
-
LoicTheAztec about 6 years
apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, get_post_thumbnail_id( $post->ID ) );
on templatesingle-product/product-image.php
… you can useglobal $post, $product;
in your hooked function additionally -
Gufran Hasan about 6 years@Akash, see below link it will be helpful. github.com/woocommerce/woocommerce/…
-
silver about 6 yearsthumbnails are array of images, they are different from the main product image, check woocommerce template
product-thumbnails.php
andproduct-image.php
and see where you can modify and add your filter -
Akash Agrawal about 6 years@LoicTheAztec I'm developing a plugin and the image of the product should be updated by my plugin so I cannot edit any template files.
-
Akash Agrawal about 6 years@silver, I'm developing a plugin and the image of the product should be updated by my plugin so I cannot edit any template files.
-
silver about 6 yearsdid you check the template files I mentioned? you should be able to hook your modification on
woocommerce_single_product_image_thumbnail_html
-
LoicTheAztec about 6 years@AkashAgrawal I know, I am not talking about editing templates, but I am showing you the correct filter hook
woocommerce_single_product_image_thumbnail_html
that you can use with your function to hooked it in… and in your function you can addglobal $post, $product;
to use either theWP_Post
object or theWC_Product
object…
-
-
Akash Agrawal about 6 yearsAmazing explanation!! This works like a charm. Thank you so much for the help. I really appreciate this.