Question

我想做的是，根据产品选择，在产品页面的自定义位置显示其他产品产品变化图像。

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

显示标题后，将导致空白页。

然后我再次尝试在content-single-product.php

中使用for循环

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

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

在模板中的自定义位置显示woocommerce产品变化图片

1 个答案: