Question

我基本上想要实现的是在商店页面上显示产品变体图像（每种变体的特定图像）。我使用下面的代码成功地获得了变体的名称（放入＆＃34; content-product.php＆＃34;）：

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

不幸的是，$colouvalues数组中没有任何内容是变体图片网址或与图片相关的任何内容。

有人请帮帮我吗？

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文件中。经过测试和工作。

相关主题：Get URL of variation image thumbnails in WooCommerce

在Woocommerce商店页面上获取产品差异图像

4 个答案: