WooCommerce商品列表中限制产品属性显示条目数的技术实现问询

我明白你的问题——当商品属性值太多时，商品卡片的布局确实会被撑乱，尤其是在列表页这种需要统一布局的场景下。咱们可以通过修改show_attribute函数，实现只显示前N个属性值，剩余的用「+X」的形式来展示，具体实现如下：

修改后的完整代码 #

/* Show attributes in the product card */
add_action( 'woocommerce_shop_loop_item_title', 'new_template_loop_product_meta', 20 );
function new_template_loop_product_meta() {
    global $product;

    $attrs_by_cats = [
        21 => [ 'pa_size', 'pa_color' ],
        23 => [ 'pa_size', 'pa_color' ],
    ];

    $attr_list = [
        'Size' => 'pa_size',
        'Color' => 'pa_color',
    ];

    if ( ! is_object( $product ) ) {
        $product = wc_get_product( get_the_id() );
    }

    $cats = $product->get_category_ids();
    if ( ! is_array( $cats ) ) {
        return;
    }

    $attrs = [];
    foreach ( $cats as $cat ) {
        if ( isset( $attrs_by_cats[ $cat ] ) ) {
            $attrs[] = $attrs_by_cats[ $cat ];
        }
    }

    $allowed_attrs = array_unique( array_merge( [], ...$attrs ) );

    echo '<div class="pa">';
    foreach ( $attr_list as $attr_title => $attr_name ) {
        if ( in_array( $attr_name, $allowed_attrs, true ) ) {
            show_attribute( $product, $attr_title, $attr_name );
        }
    }
    echo '</div>';
}

/**
 * Show attribute with limited values.
 *
 * @param WC_Product $product Product.
 * @param string $attr_title Attribute title.
 * @param string $attr_name Attribute name.
 */
function show_attribute( $product, $attr_title, $attr_name ) {
    // 自定义最多显示的属性值数量，可根据需求修改
    $max_display = 3;

    if ( 'sku' === $attr_name ) {
        $attr_value = (string) $product->get_sku();
    } else {
        $attr_value = $product->get_attribute( $attr_name );
    }

    if ( '' === $attr_value ) {
        return;
    }

    // 处理多值属性（WooCommerce默认用逗号分隔多值）
    $value_array = array_filter( explode( ',', $attr_value ) );
    $total_values = count( $value_array );

    if ( $total_values > $max_display ) {
        // 截取前N个值，剩余的用+X表示
        $display_values = array_slice( $value_array, 0, $max_display );
        $display_text = implode( ', ', $display_values ) . ' +' . ( $total_values - $max_display );
    } else {
        // 值的数量不多，直接全部显示
        $display_text = implode( ', ', $value_array );
    }

    // 输出属性内容，确保HTML安全
    echo '<span class="pa-title">' . esc_html( $attr_title ) . ': </span><span class="pa-value">' . esc_html( $display_text ) . '</span><br />';
}

关键修改说明 #

1. 自定义显示数量：在show_attribute函数开头的$max_display = 3;可以自由调整，比如改成5就会显示前5个属性值。
2. 多值处理逻辑：
   • 用explode(',', $attr_value)把逗号分隔的属性值拆成数组，再用array_filter过滤掉空值（避免属性值末尾有多余逗号的情况）
   • 如果值的总数超过设定的最大显示数，就截取前N个，再拼接+剩余数量的文本
   • 如果数量不多，就直接显示所有值
3. 安全输出：全程使用esc_html确保输出的内容不会触发XSS风险，符合WooCommerce的开发规范。

这样修改后，当商品属性值超过设定数量时，就会自动变成类似Size: 30x40, 50x70, 70x70 +15的形式，既保留了关键信息，又不会破坏商品卡片的布局。

内容来源于stack exchange