Get product variation images on Woocommerce shop page

Question

I want 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.

How can I get product variation images?

Berend · Accepted Answer · 2016-01-22 09:59:54Z

11

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

answered Jan 22, 2016 at 9:59

Berend

3,2251 gold badge20 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Punchlinern Over a year ago

Great! If you aren't already sure that the product is variable you have to check first (with $product->get_type() for instance), or the method get_available_variations() might not exist.

kalle · Accepted Answer · 2017-04-05 13:42:25Z

5

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

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

answered Apr 5, 2017 at 13:42

kalle

2233 silver badges8 bronze badges

3 Comments

NuclearApe Over a year ago

This grabs the original image - how would you grab the thumbnail? Or any other size for that matter?

NuclearApe Over a year ago

This has been answered by @Elvin85 here: link

Tofandel Over a year ago

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

Eligreen · Accepted Answer · 2015-02-23 23:16:13Z

-1

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

 }

answered Feb 23, 2015 at 23:16

Eligreen

6210 bronze badges

1 Comment

brett Over a year ago

The provided code is not related to the question (it does not retrieve the variation image as asked). Moreover there's no built-in function called woocommerce_variable_product() in Woocommerce or WP. As it stands, this looks like a random copy paste from a functions.php file of a custom theme.

Collectives™ on Stack Overflow

Get product variation images on Woocommerce shop page

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related