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

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

我成功地使用了hook

woocommerce\u show\u product\u 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; ?>">

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

然后我又尝试在

content single product.php中使用for循环

<?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 } ?>

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

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

有几种方法可以获得变体缩略图，在第二次尝试中，您几乎做到了，但代码中有一些小错误

在第二次尝试中：

而不是：

<img src="<?php echo $product_variation['image_src']; ?>" alt="">

<img src="<?php echo $product_variation['image_src']; ?>" alt="">

<img src="<?php echo $product_variation['image']['src']; ?>" alt="">

if ( $product->has_child() ) {

    $variations = $product->get_children();

    foreach ( $variations as $variation ) {

        if ( has_post_thumbnail( $variation ) ) {

                echo get_the_post_thumbnail( $variation );
        }
    }
}