从 Woocommerce 的单个产品页面中删除特色图片

Question

我安装了带有 Woocommerce 的 Wordpress。 商店的每件产品都有一个特色图片，将显示在商店页面和单个产品页面，以及图库图片，仅显示在单一产品页面（首先作为拇指，然后在点击后在灯箱中变大）。

这是由以下代码产生的：

<div class="images">

    <?php
        if ( has_post_thumbnail() ) {

            $image_title    = esc_attr( get_the_title( get_post_thumbnail_id() ) );
            $image_caption  = get_post( get_post_thumbnail_id() )->post_excerpt;
            $image_link     = wp_get_attachment_url( get_post_thumbnail_id() );
            $image          = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array(
                'title' => $image_title,
                'alt'   => $image_title
                ) );

            $attachment_count = count( $product->get_gallery_attachment_ids() );

            if ( $attachment_count > 0 ) {
                $gallery = '[product-gallery]';
            } else {
                $gallery = '';
            }

            echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s" data-rel="prettyPhoto' . $gallery . '">%s</a>', $image_link, $image_caption, $image ), $post->ID );

        } else {

            echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%s" />', wc_placeholder_img_src(), __( 'Placeholder', 'woocommerce' ) ), $post->ID );

        }
    ?>

    <?php do_action( 'woocommerce_product_thumbnails' ); ?>

</div>

这样，在一个普通的单品页面中会产生如下：

<div class="images">

    <a href="br1-opression.jpg" 
       itemprop="image" 
       class="woocommerce-main-image zoom" 
       title="" 
       data-rel="prettyPhoto[product-gallery]">

            <img width="750" 
                 height="544" 
                 src="br1-opression.jpg" 
                 class="attachment-shop_single wp-post-image" 
                 alt="br1-opression" 
                 title="br1-opression">
    </a>

    <div class="thumbnails columns-3">

        <a href="br1-opression-1.jpg" 
           class="zoom first" 
           title="br1-opression-1" 
           data-rel="prettyPhoto[product-gallery]">

                <img width="180" 
                     height="180" 
                     src="br1-opression-1-180x180.jpg" 
                     class="attachment-shop_thumbnail" 
                     alt="br1-opression-1">
        </a>

        <a href="br1-opression-2.jpg" 
           class="zoom" 
           title="br1-opression-2" 
           data-rel="prettyPhoto[product-gallery]">

            <img width="180" 
                 height="120" 
                 src="br1-opression-2-180x120.jpg" 
                 class="attachment-shop_thumbnail" 
                 alt="br1-opression-2">
        </a>

    </div>

</div>

如您所见，它基本上将精选图片（大尺寸）和拇指图库图片（较小，在精选图片下方）放在一个图库中。

我想要达到的目标如下：

• 从单个产品页面中删除特色图片
• 从图库中取出第一张图片，并放入大的（与精选图片相同的大小）
• 其他拇指放在下面

长话短说，我想在单一产品页面中将特色图片替换为图库中的第一张图片。

到目前为止，我已经尝试过：

使用 CSS 和 Functions.php 中的新钩子隐藏特色图片。

它确实会杀死特色图片，但仍会显示在灯箱中。 而且拇指仍然很小，所以单品页面中没有大图，这是不可取的。

有什么想法或想法吗？

Answer 1

你可以试试这个：

$imgid = $product->get_gallery_attachment_ids();

get_gallery_attachment_ids() 函数获取数组中的所有画廊 ID，因此现在您可以通过这种方式获取该数组的第一张图像：

<a href="<?php echo wp_get_attachment_url( $imgid[0] ); ?>" class="woocommerce-main-image zoom"><img src="<?php echo wp_get_attachment_url( $imgid[0] ); ?>" alt=""></a>