如何在 WooCommerce 产品页面上仅显示产品特色图片并隐藏产品缩略图？

Question

我想在单个产品页面上只显示产品的第一张图片（特色图片和相同的小图片）。换句话说，隐藏所有图片，但不隐藏特色图片。

我知道我必须使用 woocommerce_single_product_image_thumbnail_html（或者可能不用），我已经测试过：

function remove_featured_image($html, $attachment_id ) {
    global $post, $product;

    $featured_image = get_post_thumbnail_id( $post->ID );

    if ( $attachment_id == $featured_image )
        $html = '';

    return $html;
}
add_filter('woocommerce_single_product_image_thumbnail_html', 'remove_featured_image', 10, 2);

但它删除所有图像...

感谢您的帮助！

Answer 1

woocommerce_single_product_image_thumbnail_html 钩子获取产品的特色图片。

删除产品缩略图

您可以使用此行从单个产品页面中删除缩略图：

remove_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );

将其添加到您的活动主题的functions.php。

您也可以为此使用 CSS：

.flex-control-thumbs {
    display:none;
}

<块引用>

但这不是最好的选择。图像不应该被隐藏，因为 额外的 HTTP 请求将毫无用处。如果您愿意，最好通过 PHP 执行此操作 有选择权。

编辑产品缩略图

根据您的评论：

您可以通过 woocommerce_single_product_image_thumbnail_html 钩子编辑产品缩略图。此钩子生成每个缩略图的 HTML 内容。

// hides all product thumbnails except the featured image
add_filter( 'woocommerce_single_product_image_thumbnail_html', 'hide_thumbnails_except_featured_image', 99, 2 );
function hide_thumbnails_except_featured_image( $html, $attachment_id ) {

    global $product;
    $new_html = '';

    // gets the featured image of the product
    $featuted_image_id = $product->get_image_id();
    // hide all thumbnails except the featured image
    if ( $featuted_image_id != $attachment_id ) {
        $new_html = $html;
    }

    return $new_html;
}

<块引用>

如果唯一的缩略图是缩略图，则缩略图会自动隐藏 产品的特色图片。

代码已经过测试并且可以工作。将其添加到主题的functions.php。

覆盖模板

最后一种方法是覆盖 WooCommerce 模板。

模板可以在：/woocommerce/single-product/product-thumbnails.php