Question

我的主题使用自定义代码显示Woocommerce单品图片，但不会显示变量产品图片。功能图像显示和图库图像显示。当使用product-image.php中的woocommerce标准模板时，变量图像可以工作，但我不想使用标准模板，因为它不适合我的主题（图库图像滑块不能正常工作）。这是下面的自定义代码。知道什么是缺失或可以做些什么来让变量图像出现？

提前致谢。

＆＃13;

$image_size = array(500,600);
    $url_image_default = ST_MaxShop_Assets::url('images/img-default.png');
	$attachment_ids = $product->get_gallery_image_ids();

	$post_thumbnail_id = $product->get_image_id();
	
	$image_url = wp_get_attachment_image_src( get_post_thumbnail_id( $product->get_id(), apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ) ) );

	
    ?>
	<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 1; transition: opacity .25s ease-in-out;width:100%">

    <div class="clearfix">
		<figure class="woocommerce-product-gallery__wrapper">

        <?php

        if ( has_post_thumbnail() ) {

            ?>
            <a class="jqzoom" href="<?php echo get_the_post_thumbnail_url($product->get_id() , array(1500,1800)); ?>" id="jqzoom" data-rel="gal-1">
                <?php
                $props = wc_get_product_attachment_props( get_post_thumbnail_id(), $post );
                ?>
                <img src="<?php echo $image_url[0]; ?>" title="<?php echo esc_attr($props['title']); ?>"  alt ="<?php echo esc_attr($props['alt'])?>">
                <?php
                ?>
            </a>
            <?php
        }  else { ?>
        <a class="jqzoom" href="<?php echo esc_url($url_image_default);  ?>" id="jqzoom"  data-rel="gal-1">
            <?php
            $dimensions = wc_get_image_size( $image_size ); ?>
            <img src="<?php echo esc_url($url_image_default); ?>" width="<?php echo esc_attr( $dimensions['width'] ) ?> " height="<?php echo esc_attr( $dimensions['height'] ) ?> "  alt="<?php esc_html_e('Image Default','maxshop')?>" title="<?php esc_html_e('product','maxshop')?>" />
            <?php
            ?></a><?php
        }
        ?>
		</figure>
	</div>
	</div>
    <?php
	
    if($attachment_ids){
        ?>
        <ul class="jqzoom-list">
            <?php
            if ( has_post_thumbnail() ) { ?>
                <li>
                    <a class="zoomThumbActive" href="javascript:void(0)" data-rel="{gallery:'gal-1', smallimage: '<?php echo get_the_post_thumbnail_url($post -> ID,$image_size); ?>', largeimage: '<?php echo get_the_post_thumbnail_url($post->ID , array(1500,1800)); ?>'}">
                        <?php echo get_the_post_thumbnail( $post->ID, array(100,100)); ?>
                    </a>
                </li>
            <?php } ?>
            <?php
            foreach ($attachment_ids as $attachment_id){ ?>
                <li>
                    <a href="javascript:void(0)" data-rel="{gallery:'gal-1', smallimage: '<?php echo esc_url(wp_get_attachment_image_url($attachment_id,$image_size)); ?>', largeimage: '<?php echo esc_url(wp_get_attachment_image_url($attachment_id, array(1500,1800))); ?>'}">
                        <?php 
						

						echo wp_get_attachment_image($attachment_id,array(100,100)); ?>
                    </a>
                </li>
                <?php
            }
            ?>
        </ul>
        <?php
    }
}

＆＃13;

Answer 1

因为我可以看到你只获得了这一行的主要产品形象

 $attachment_ids = $product->get_gallery_image_ids();

并且您正在使用代码循环遍历所有这些代码，并且为了获取您需要的变体图像，请添加以下代码，如下所示：

$image_size = array(500,600);
$variation_image_id = array();
$attachment_ids = $product->get_gallery_image_ids();
$variations = $product->get_available_variations();
foreach ( $variations as $variation ) {
$variation_image_id[]=  $variation["image_id"];
}
$attachment_ids =   array_merge(    $variation_image_id , $attachment_ids);

$post_thumbnail_id = $product->get_image_id();

可变产品图像不会显示在单个产品视图中

1 个答案: