Get URL of variation image thumbnails in WooCommer

Question

I'm using the following code to grab the image of every variation for a particular product:

$product = new WC_Product_Variable( $product_id );
$variations = $product->get_available_variations();

foreach ( $variations as $variation ) {
  echo "<img src=" . $variation['image']['url'] .">";
}

This returns the full size image.

Can anyone tell me how I would modify this to return the 'thumbnail' URL? (or any other size)

I'm sure it's a fairly simple change but I just can't figure it out.

Answer 1

If you know the product variation ID, you can do

// find out $variation_id, it's different from product_id
$variation = new WC_Product_Variation( $variation_id );
$image_tag = $variation->get_image();

// The below is the whole image tag including <img> and some classes that will help customize it.
echo $image_tag;

See related docs found at the Woocommerce reference for WC_product_variation class and the WC_Product class. The function get_image() is actually inherited from WC_Product, but you can use it in either class.

Answer 2

Use thumb_src instead of url.

$product = new WC_Product_Variable( $product_id );
$variations = $product->get_available_variations();

foreach ( $variations as $variation ) {
  echo "<img src=" . $variation['image']['thumb_src'] .">";
}