Woocommerce：如何获取产品图片并将其放入默认店面图片中？答案

【问题标题】：Woocommerce: How to get product image and put it in default storefront image?Woocommerce：如何获取产品图片并将其放入默认店面图片中？
【发布时间】：2017-10-16 20:46:10
【问题描述】：

我想改变woocommerce店面主题的布局。到目前为止，我通过以下方式获取产品图片：

echo $product->get_image('full');

它显示没有灯箱和缩放效果的图像。如何为其添加“常规”店面样式？

【问题讨论】：

标签： woocommerce zooming lightbox

【解决方案1】：

如果您查看 woocommerce 模板文件 single-product/product-image.php，您将需要一些类似的代码来获取显示的带有缩放和样式的 WooCommerce 图像。

这段代码应该是：

global $post, $product;

if( ! is_object ( $product ) && $post->post_type = 'product' )
    $product = wc_get_product($post->ID);

if( is_object ( $product ) ):
    $columns           = apply_filters( 'woocommerce_product_thumbnails_columns', 4 );
    $thumbnail_size    = apply_filters( 'woocommerce_product_thumbnails_large_size', 'full' );
    $post_thumbnail_id = get_post_thumbnail_id( $post->ID );
    $full_size_image   = wp_get_attachment_image_src( $post_thumbnail_id, $thumbnail_size );
    $placeholder       = has_post_thumbnail() ? 'with-images' : 'without-images';
    $wrapper_classes   = apply_filters( 'woocommerce_single_product_image_gallery_classes', array(
        'woocommerce-product-gallery',
        'woocommerce-product-gallery--' . $placeholder,
        'woocommerce-product-gallery--columns-' . absint( $columns ),
        'images',
    ) );
    ?>
    <div id="product-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
        <figure class="woocommerce-product-gallery__wrapper">
            <?php
            $attributes = array(
                'title'                   => get_post_field( 'post_title', $post_thumbnail_id ),
                'data-caption'            => get_post_field( 'post_excerpt', $post_thumbnail_id ),
                'data-src'                => $full_size_image[0],
                'data-large_image'        => $full_size_image[0],
                'data-large_image_width'  => $full_size_image[1],
                'data-large_image_height' => $full_size_image[2],
            );

            if ( has_post_thumbnail() ) {
                $html  = '<div data-thumb="' . get_the_post_thumbnail_url( $post->ID, 'shop_thumbnail' ) . '" class="woocommerce-product-gallery__image"><a href="' . esc_url( $full_size_image[0] ) . '">';
                $html .= get_the_post_thumbnail( $post->ID, 'shop_single', $attributes );
                $html .= '</a></div>';
            } else {
                $html  = '<div class="woocommerce-product-gallery__image--placeholder">';
                $html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src() ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
                $html .= '</div>';
            }

            echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, get_post_thumbnail_id( $post->ID ) );

            // Uncommenting this will display the product thumbnails gallery below the main image
            // do_action( 'woocommerce_product_thumbnails' );
            ?>
        </figure>
    </div>
    </div>
    <?php
endif;

这将以经典店面样式显示放大的图像

【讨论】：