在模板中的自定义位置显示产品变体图像

我想做的是,根据变体选择,在产品页面的自定义位置显示一个附加的产品变体图像。

我成功地使用了钩子 woocommerce_show_product_images 并以这种方式添加产品图像和所有变体图像。这在选择时作为变体图像切换工作。但这样我得到了所有的缩略图,滑动功能和放大镜的东西了。

然后我试着用其他的方法得到变异图像。首先我用了这个密码。

我把它放进去了 content-single-product.php 在子主题中:

<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $loop->post->ID ), 'single-post-thumbnail' );?>

<img src="<?php  echo $image[0]; ?>" data-id="<?php echo $loop->post->ID; ?>">

这使我的主要产品形象在我想要的位置。但不能开启变异选择。

之后,我找到了另一个具有以下代码行的资源:

在 内容单一-产品.php

<?php
    // get the product variations
    $product_variations = $product->get_available_variations();
    if ( !empty( $product_variations ) ) {
        ?>
    <div class="product-variation-images">
    <?php
    foreach($product_variations as $product_variation) {
        // get the slug of the variation
        $product_attribute_name = $product_variation['attributes'];
        ?>
        <div class="product-variation-image product-variation-<?php echo $product_attribute_name ?>" id="product-variation-<?php echo $product_variation['variation_id']; ?>" data-attribute="<?php echo $product_attribute_name ?>">
        <img src="<?php echo $product_variation['image_src']; ?>" alt="">
        </div><!-- #product-variation-image -->
    <?php } ?>
    </div>
    <?php } ?>

这将导致在显示标题后出现空白页。

然后我尝试使用for循环,同样在 内容单一-产品.php

$product = new WC_Product_Variable( $product_id );
$variations = $product->get_available_variations();

foreach ( $variations as $variation ) {
echo "<img src=" . $variation['image']['thumb_src'] .">";
}

什么都不做,没有错误,没有图像。

更新

现在我已经弄明白了,并且得到了正确执行的函数。 少了一个 global $product; 一开始。

但这两个函数都以列表的形式显示所有可用的变体图像 相反 根据选择的变体切换图像。

以下是中的工作函数 functions.php

add_action ('woocommerce_after_single_product_summary', 'test_code', 5 
);
function test_code () {
global $product; 

    if ( $product->has_child() ) {

$variations = $product->get_children();

foreach ( $variations as $variation ) {

    if ( has_post_thumbnail( $variation ) ) {

            echo get_the_post_thumbnail( $variation );
      }
    }
  }
}