如何在WooCommerce目录页商品卡片中显示当前商品图库图片？

你的代码存在几个关键问题，导致无法正常显示当前商品的所有图库图片，直接给你修正方案和问题解析：

原代码的核心问题 #

• 未定义$product变量：在商品循环里直接调用$product会触发报错，必须先获取当前商品对象
• 未初始化图库ID数组：$attachment_ids完全没有赋值，根本不知道要循环哪些图片
• 循环参数错误：把商品ID传给了wp_get_attachment_image()，自然只会重复显示当前商品的主图

修复后的完整代码 #

add_action('woocommerce_before_shop_loop_item', 'add_custom_flipper_img', 30);

function add_custom_flipper_img() {
    // 获取当前循环的商品对象
    $product = wc_get_product(get_the_ID());
    
    // 获取商品图库的所有附件ID数组
    $attachment_ids = $product->get_gallery_image_ids();
    
    // 遍历每个图库附件，输出缩略图
    foreach( $attachment_ids as $attachment_id ) {
        echo wp_get_attachment_image($attachment_id, 'thumbnail');
    }
}

实用扩展提示 #

• 若要避免重复显示主图，可以在循环前获取主图ID并跳过：

$main_image_id = $product->get_image_id();
foreach( $attachment_ids as $attachment_id ) {
    if ( $attachment_id === $main_image_id ) continue;
    echo wp_get_attachment_image($attachment_id, 'thumbnail');
}

• 可以给图库图片加自定义样式，比如横向排列：

/* 给输出的图库图片加个容器类，比如在echo前加<div class="gallery-thumbs"> */
.gallery-thumbs {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}
.gallery-thumbs img {
    width: 60px;
    height: 60px;
    object-fit: cover;
}

内容的提问来源于stack exchange，提问作者Stan Law