在WooCommerce中为特定产品属性术语别名添加CSS类

要实现将每个属性值单独用带对应类名的span包裹，你需要修改现有代码，把逗号分隔的属性值拆分成单个元素，再逐个生成带类的标签：

add_action( 'woocommerce_after_shop_loop_item_title', 'display_applications_attribute_pa_mood', 5 );

function display_applications_attribute_pa_mood() {
    global $product;

    $mood_values = $product->get_attribute('pa_mood');
    
    if ( $mood_values ) {
        // 将逗号分隔的属性值拆分为数组
        $values_array = explode( ', ', $mood_values );
        $output_spans = [];

        foreach ( $values_array as $value ) {
            // 处理类名：转小写，替换空格为连字符，确保符合CSS命名规范
            $class_name = strtolower( str_replace( ' ', '-', trim( $value ) ) );
            // 生成单个span标签，同时转义内容避免XSS风险
            $output_spans[] = sprintf( '<span class="attribute-%s">%s</span>', $class_name, esc_html( $value ) );
        }

        // 拼接所有span并输出，加上"Mood:"前缀
        printf( 'Mood: %s', implode( ' ', $output_spans ) );
    }
}

关键改动说明： #

• 拆分属性值：用explode(', ', $mood_values)把逗号分隔的字符串转为数组，实现逐个处理每个属性值
• 规范类名：通过strtolower()转小写、str_replace()替换空格为连字符，保证类名符合CSS命名规则
• 安全输出：使用esc_html()转义属性值，避免潜在的XSS安全问题
• 结构匹配：最终输出的HTML结构完全符合你给出的示例，比如：

Mood: <span class="attribute-chill">Chill</span> <span class="attribute-sleepy">Sleepy</span>

内容的提问来源于stack exchange，提问作者Miguel Gomes