如何在WooCommerce商品归档页仅显示颜色属性缩略图？

我需要在WooCommerce商品归档页，只展示颜色（color）属性对应的变体缩略图，但现有代码会显示所有属性的变体图片，求修改方法。

现有代码：

add_action ('woocommerce_before_shop_loop_item_title', 'test_code' );
function test_code () {
global $product; 

if ( $product->has_child() ) {

$variations = $product->get_children();

foreach ( $variations as $variation ) {

if ( has_post_thumbnail( $variation ) ) {

        echo get_the_post_thumbnail( $variation );
      }
    }
  }
}

add_action('woocommerce_before_shop_loop_item_title', 'display_color_variation_thumbnails');
function display_color_variation_thumbnails() {
    global $product;

    // 仅处理可变产品
    if (!$product->is_type('variable')) return;

    $color_attr_slug = 'pa_color'; // 颜色属性的slug，根据后台实际设置调整
    $displayed_colors = array(); // 记录已显示的颜色，避免重复输出

    // 获取商品的可用变体
    $variations = $product->get_available_variations();

    foreach ($variations as $variation) {
        $variation_id = $variation['variation_id'];
        $variation_obj = wc_get_product($variation_id);

        // 获取当前变体的颜色属性值
        $color_value = $variation_obj->get_attribute($color_attr_slug);

        // 仅当颜色值存在、未显示过且变体有缩略图时输出
        if (!empty($color_value) && !in_array($color_value, $displayed_colors) && has_post_thumbnail($variation_id)) {
            echo get_the_post_thumbnail($variation_id, 'thumbnail'); // 可替换为'woocommerce_thumbnail'匹配后台设置尺寸
            $displayed_colors[] = $color_value;
        }
    }
}

• pa_color是颜色属性的默认slug，若你在后台修改过属性的别名，需要替换为实际的属性slug（可在WooCommerce属性设置页面查看）。
• 加入$displayed_colors数组，避免同一颜色的多个变体重复显示缩略图。
• 使用get_available_variations()只会加载有库存、可购买的变体，比直接获取所有子产品更精准。
• 图片尺寸可通过get_the_post_thumbnail的第二个参数调整，比如'woocommerce_thumbnail'对应后台设置的商品缩略图尺寸。

内容的提问来源于stack exchange，提问作者Hubert Alva