如何在WooCommerce归档页面添加带商品分类ID的自定义body类

分三部分实现你的需求： #

1. 适配商店归档页的body自定义类修改 #

你原有代码仅判断了单商品页is_product()，新增商品分类归档页的判断逻辑即可，修改后完整代码如下，额外补充了错误判断避免无分类时出现PHP报错：

add_filter( 'body_class','my_body_classes2' );
function my_body_classes2( $classes ) {
    // 保留原有单商品页逻辑
    if ( is_product() ) {
        global $post;
        $terms = get_the_terms( $post->ID, 'product_cat' );
        if ( $terms && ! is_wp_error( $terms ) ) {
            foreach ($terms as $term) {
                $classes[] = 'product-in-cat-' . $term->term_id;    
            }
        }
    }
    // 新增商品分类归档页逻辑
    if ( is_product_category() ) {
        $current_cat = get_queried_object();
        $classes[] = 'product-cat-' . $current_cat->term_id;
    }
    // 如需适配商店主归档页，可自行添加is_shop()对应的判断逻辑
    return $classes;
}

2. 给归档页商品分类标签添加自定义class #

如果需要直接给分类标签元素加对应分类ID的类，方便直接设置标签样式，添加以下代码即可：

add_filter( 'woocommerce_product_meta_term_classes', 'add_custom_cat_tag_class', 10, 3 );
function add_custom_cat_tag_class( $classes, $term, $taxonomy ) {
    // 仅处理商品分类的标签
    if ( $taxonomy === 'product_cat' ) {
        $classes[] = 'product-cat-tag-' . $term->term_id;
    }
    return $classes;
}

3. 自定义样式示例 #

添加完上述代码后，直接在主题自定义CSS面板添加对应样式即可实现你要的效果，把下面的分类ID替换成你后台实际的分类ID即可生效：

/* 分类ID为1的标签设为黄色 */
.product-cat-tag-1 {
    background: #ffeb3b;
    color: #000;
    padding: 2px 6px;
    border-radius: 3px;
}
/* 分类ID为2的标签设为红色 */
.product-cat-tag-2 {
    background: #f44336;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
}

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