Get product variation images on Woocommerce shop page

Question

What I essentially want to achieve is to show product variation images (particular image for each variation) on the shop page. I was successfully able to get the name of the variations using the code below (put into "content-product.php"):

<?php
$colourvalues = get_the_terms( $product->id, 'pa_colour');
  foreach ( $colourvalues as $colourvalue ) {
   echo $colourvalue->name;
  }
?>

Unfortunately there is nothing in the $colouvalues array that is the variations image url or anything related to the image.

Does anyone please help me with this?

Answer 1

You can get a list of the product's variations:

// In the product loop:
$variations = $product->get_available_variations();

// Outside the product loop:
$product = new WC_Product_Variable( $product_id );
$variations = $product->get_available_variations();

Loop over it to get the image from each variation like so:

foreach ( $variations as $variation ) {
    echo $variation['image_src'];
}

Answer 2

For Woocommerce 3. loop over like this once you create the variations array.

foreach ( $variations as $variation ) {
    echo $variation['image']['url'];
}

Answer 3

in functions file

add_action('woocommerce_after_shop_loop_item_title','woocommerce_template_single_excerpt', 5);
function woocommerce_template_single_excerpt() {
            global $product;
            if ($product->product_type == "variable" && (is_shop() )) {
              echo woocommerce_variable_product(); 
            }

 }

Answer 4

Since WooCommerce 3 your code is outdated: $product->id should be $product->get_id()

There is multiple ways to do what you ask. The two code snippets below will display the variation value of the product attribute "color" and the corresponding variation thumbnail in WooCommerce archive pages (as shop), below the button, for variable products.

They both use a hooked function and will give mostly the same result:

1) First way (with a possibility to set the size of the thumbnail):

add_action( 'woocommerce_after_shop_loop_item', 'loop_display_variation_attribute_and_thumbnail' );
function loop_display_variation_attribute_and_thumbnail() {
    global $product;
    if( $product->is_type('variable') ){
        foreach ( $product->get_visible_children() as $variation_id ){
            // Get an instance of the WC_Product_Variation object
            $variation = wc_get_product( $variation_id );

            // Get "color" product attribute term name value
            $color = $variation->get_attribute('color');

            if( ! empty($color) ){
                // Display "color" product attribute term name value
                echo $color;

                // Display the product thumbnail with a defined size (here 30 x 30 pixels)
                echo $variation->get_image( array(30, 30) );
            }
        }
    }
}

2) Other way:

add_action( 'woocommerce_after_shop_loop_item', 'loop_display_variation_attribute_and_thumbnail' );
function loop_display_variation_attribute_and_thumbnail() {
    global $product;

    // HERE your targeted product attribute taxonomy
    $taxonomy = 'pa_color';

    if( $product->is_type('variable') ){
        foreach ( $product->get_available_variations() as $variation ){
            if( isset($variation['attributes']['attribute_'.$taxonomy]) ){
                // Get the "pa_color"
                $term_name = get_term_by('slug', $variation['attributes']['attribute_'.$taxonomy], $taxonomy)->name;


                // Display "Color" product attribute term name value
                echo $term_name;

                // Display the product thumbnail
                echo '<img src="' . $variation['image']['thumb_src'] .'">';
            }
        }
    }
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

---

Related thread: Get URL of variation image thumbnails in WooCommerce