Get product option images on the Woocommerce Store Page

Question

Essentially, I want images of product options (a specific image for each option) to be displayed on the store page. I managed to get the names of the options using the code below (put in "content-product.php"):

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

Unfortunately, $colouvaluesthere is nothing in the array but the URL of the options image or anything related to the image.

Can someone please help me with this?

Answer 1

You can get a list of product options:

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

, :

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

Answer 2

Woocommerce 3. , .

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

Answer 3

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

WooCommerce 3 : $product->id $product->get_id()

, . "" WooCommerce ( ) .

:

1) The first method (with the ability 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) Another 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'] .'">';
            }
        }
    }
}

The code is placed in the function.php file of your active child theme (or active theme). Tested and working.

---

Related topic: Get URL of Thumbnail Image Variations in WooCommerce