WooCommerce：将商品相册图片设为店铺页面商品主图

首先得纠正一下：你之前尝试的WC_Structured_Data::generate_product_data()钩子是用来生成Schema结构化数据的，和前端店铺页面显示的商品主图完全不相关，所以调整这个钩子自然不会有效果。下面给你适配WordPress 4.9.6、WooCommerce 3.3.5和Storefront 2.3.1的可行方案：

方法：使用WooCommerce图片过滤器替换主图 #

我们可以用woocommerce_product_get_image过滤器，在店铺/产品归档页面替换商品的主图为相册中的唯一图片，代码如下：

add_filter( 'woocommerce_product_get_image', 'replace_shop_page_main_image_with_gallery', 10, 3 );
function replace_shop_page_main_image_with_gallery( $image_html, $product, $size ) {
    // 仅在店铺页面、产品分类/标签页面生效
    if ( ! is_shop() && ! is_product_category() && ! is_product_tag() ) {
        return $image_html;
    }

    // 获取商品的相册图片ID列表
    $gallery_images = $product->get_gallery_image_ids();
    
    // 如果存在相册图片（这里是你说的唯一那张）
    if ( ! empty( $gallery_images ) ) {
        // 取第一张相册图（也就是唯一的那张）
        $gallery_image_id = reset( $gallery_images );
        // 生成对应尺寸的图片HTML
        $image_html = wp_get_attachment_image( $gallery_image_id, $size );
    }

    return $image_html;
}

代码使用说明 #

• 放置位置：把这段代码添加到Storefront主题的functions.php文件末尾，或者用「Code Snippets」这类自定义代码插件来添加（推荐后者，避免主题更新后代码丢失）。
• 兼容性：你的WooCommerce 3.3.5版本支持get_gallery_image_ids()方法，无需担心版本兼容问题。
• 可选调整：如果你只想针对只有一张相册图的商品生效，可以把if ( ! empty( $gallery_images ) )改成if ( ! empty( $gallery_images ) && count($gallery_images) === 1 )。

内容的提问来源于stack exchange，提问作者Munir Hachemi Guerrero