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

【问题标题】：Display woocommerce product variation images on custom place in template在模板中的自定义位置显示 woocommerce 产品变体图像
【发布时间】：2019-02-27 05:58:53
【问题描述】：

我想要做的是，根据变体选择在产品页面的自定义位置显示额外的产品变体图像。

我成功地使用了钩子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; ?>">

这为我提供了我想要的位置的主要产品图片。但它不能在变化选择上切换。

在那之后我找到了另一个资源与这行代码：

在content-single-product.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 循环，再次在 content-single-product.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 );
      }
    }
  }
}

【问题讨论】：

标签： php wordpress image woocommerce variations

【解决方案1】：

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

第二次尝试：

而不是：

<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 );
        }
    }
}

【讨论】：