Get product variation images on Woocommerce shop page

woocommerce show product variations on shop page
display woocommerce product variations dropdown on the shop page
woocommerce show single variations
woocommerce get product variations
woocommerce variation images
woocommerce variation swatches
smart variations images for woocommerce
woocommerce swatches on shop page

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"):

$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?

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'];

WooCommerce Additional Variation Images, By default WooCommerce will only swap the main variation image when you select a product variation, not the gallery images below it. This extension allows� Add any number of images to your variable product variations. The WooCommerce Additional Variation Images extension allows you to add additional gallery images per variation on variable products within WooCommerce. By default WooCommerce will only swap the main variation image when you select a product variation, not the gallery images below it. This extension allows visitors to your online store to be able to swap different gallery images when they select a product variation.

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

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

Show Variations on the Shop Page With WooCommerce Variations , To get your variations to show individually on the shop page in WooCommerce, do the following: Go to Products > All Products in your WordPress dashboard. Select the variable product you want to edit. Scroll down to the Product Data section of the page (usually found below the main text/product description area). Smart Variations Images is packed with i mpressive features to optimise your WooCommerce product image gallery and boost your sales. It’s Revolutionary!. By default WooCommerce will only swap the main variation image when you select a product variation, not the gallery images below it.

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(); 


Display Variation Image on Shop Page, [This thread is closed.] Hey guys, looking for a plugin recommendation. I have products with various sizes that looks very different. I would like to… I would love to have the possibility to show product variations (with their own image) as separate products on the product listing pages (main shop page, category page, etc). That way visitors would be able to see the right product images when they use the layered nav filters. Let's say I have a product that is available in both blue and white. I dont want to create two separate simple

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

WooCommerce Product Variations Demo: 2 Ways to Display , A comparison of 2 WooCommerce product variations plugins which make it easier to For example, you could display product variations on the main shop page, Scroll down to the Table content section and enter image,name, description� But with the plugin, WooThumbs for WooCommerce, you can now add multiple variation images, embed video and customize the look of your images. With this plugin you also get a nice design of the zoom, thumbnail layouts and carousel effects. Online Store Product Images Using WooThumbs for WooCommerce

How To Add Product Variations in WooCommerce With Image , How To Add Product Variations in WooCommerce With Image Swatches From Product Duration: 3:28 Posted: Sep 23, 2018 Go to WooCommerce > WooThumbs > Display. Enter your desired size in the Single Image Width (px) field. Click Save and it will trigger the background image regeneration process for your single image thumbnails, and the WooThumbs image cache will be cleared automatically once complete.

Display WooCommerce product variation image upon selection from , If you ever need to display WooCommerce product variation image, somewhere in single product page, upon selection from variation dropdown menu then of the products loop in main shop page of a WooCommerce theme. So, what I need to achieve is manipulating the main product query to select all products, where those who have variations must appear once for each variation with the correct image link and variation value (I need the info of the main product aswell to link to the correct page).

Color / Image Swatches — Theme Documentation, "WooCommerce Color or Image Variation Swatches" does a good job an the native functionality of WooCommerce for variable product with swatches. How to display one attribute swatches on shop/category pages?

  • This grabs the original image - how would you grab the thumbnail? Or any other size for that matter?
  • This has been answered by @Elvin85 here: link
  • This is only for the thumbnail, for other sizes you can get the attachment id and then use wordpress functions to handle attachments using $variation['image_id']