如何为WooCommerce循环中ACF文本字段生成多CSS类

在WooCommerce产品循环场景下，使用ACF文本字段woo_product_types，当前代码仅能生成单一的product-types类。需求为：无需新增ACF字段，生成可支持差异化样式的多CSS类（如HTML元素class包含product-types和对应字段值，以便用.product-types.shoes、.product-types.tshirt这类选择器设置差异化背景色），需要修改现有代码实现该效果。

现有代码：

add_action( 'woocommerce_before_shop_loop_item_title', 'add_acf_field_to_product_loop', 15 );
function add_acf_field_to_product_loop_title() 
{    
    global $product;     
    $product_id = $product->get_id();    
    $woo_product_types = get_field( 'woo_product_types', $product_id );    
    if ( ! empty( $woo_product_types ) ) {         
        echo '<div class="product-types">' . esc_html( $woo_product_types ) . '</div>';    
    }
}

只需在class属性中添加经过安全处理的字段值即可，同时为避免样式冲突，将字段值转换为符合CSS类名规范的格式。修改后的代码如下：

add_action( 'woocommerce_before_shop_loop_item_title', 'add_acf_field_to_product_loop', 15 );
function add_acf_field_to_product_loop_title() 
{    
    global $product;     
    $product_id = $product->get_id();    
    $woo_product_types = get_field( 'woo_product_types', $product_id );    
    if ( ! empty( $woo_product_types ) ) {
        // 处理字段值：转为小写，替换特殊字符为短横线，符合CSS类名规范
        $type_class = sanitize_title( $woo_product_types );
        // 拼接类名：基础类 + 处理后的字段值类
        echo '<div class="product-types ' . esc_attr( $type_class ) . '">' . esc_html( $woo_product_types ) . '</div>';    
    }
}

• 使用sanitize_title()函数自动将字段值转为小写，同时把空格、特殊字符替换为短横线，确保生成的类名符合CSS规范。
• 通过esc_attr()过滤类名输出，避免XSS安全风险。
• 最终生成的HTML结构类似：<div class="product-types shoes">Shoes</div>，此时可使用CSS选择器.product-types.shoes为该类型标签设置差异化背景色。

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