在 Woocommerce 商店頁面上獲取產品變體圖片

Question

我本質上想要實現的是在商店頁面上顯示產品變體圖像（每個變體的特定圖像）。 我成功地使用下面的代碼獲得了變體的名稱（放入“content-product.php”）：

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

不幸的是， $colouvalues數組中沒有任何內容是變體圖像 url 或與圖像相關的任何內容。

有人請幫助我嗎？

Answer 1

您可以獲得產品變體的列表：

// 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）第一種方式（可以設置縮略圖的大小）：

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）其他方式：

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

代碼進入您的活動子主題（或活動主題）的function.php文件中。 經過測試和工作。

---

相關主題： 在WooCommerce中獲取變化圖像縮略圖的URL