以不同的背景颜色显示 WooCommerce 产品类别名称

Question

在 WooCommerce 中，我想在商店页面以及单个产品页面上显示类别名称，对于 5 个类别，设置不同的背景颜色。

我使用了WP片段代码中的代码：

function show_category_on_loop() {
    global $product;
    $terms = get_the_terms( $product->get_id(), 'product_cat' );
    if( $terms ) {
        $names = array();
        foreach ( $terms as $term ) {
            $names[] = $term->name;
        }
        print '<span class="category-text"> '.join( ', ', $names ).'</span>'.PHP_EOL;
    }
}

加上定制器中的CSS样式：

.category.text {background...}

它有效，但它改变了我所有产品的背景颜色。

我也尝试过这段代码，但结果是相似的：

function category_single_product(){

    $product_cats = wp_get_post_terms( get_the_ID(), 'product_cat' );

    if ( $product_cats && ! is_wp_error ( $product_cats ) ){

        $single_cat = array_shift( $product_cats ); 
        ?>
        <h2 itemprop="name" class="product_category_title"><span><?php echo $single_cat->name; ?></span></h2>
        <?php 
    }
}
add_action( 'woocommerce_before_shop_loop_item_title', 'category_single_product', 25 );

需要添加什么才能让每个类别都有自己的风格？预先感谢，我不是程序员。

Answer 1

首先将你的 php 代码修改为：

function category_single_product(){
    $product_cats = wp_get_post_terms( get_the_ID(), 'product_cat' );

    if ( $product_cats && ! is_wp_error ( $product_cats ) ){
        $single_cat = array_shift( $product_cats );
        $category_class = strtolower( str_replace( ' ', '-', $single_cat->name ) ); // Generate a class based on category name
        ?>

        <h2 itemprop="name" class="product_category_title <?php echo $category_class; ?>"><span><?php echo $single_cat->name; ?></span></h2>

<?php }
}
add_action( 'woocommerce_before_shop_loop_item_title', 'category_single_product', 25 );

然后在你的CSS中像这样：

.category-text.books {
    background-color: #ffcccc;
}

.category-text.electronics {
    background-color: #ccffcc;
}

Answer 2

首先，在定制器中添加以下 CSS 样式（或在您的子主题 style.css 文件中），为每个类别 slug 定义所需的颜色。

这里，第一条规则是默认背景颜色后备（如果需要，还有文本颜色）。

/* Default background color (and text color) */
.product-categories > span,
.product-categories > a {
    background-color:#eeeeee;
    color: #000000; /* Define if needed /*
}

/* background color by category slug (define the color property if needed)*/
.product-categories > .shoes {
    background-color:#aaffed;
}
.product-categories > .accessories {
    background-color:#fd23aa;
}
.product-categories > .tshirts {
    background-color:#f45da4;
}
.product-categories > .hoodies {
    background-color:#e45fea;
}
.product-categories > .music {
    background-color:#bbf4e5;
}

然后，您将使用以下命令在产品循环和单个产品上的产品标题后显示彩色产品类别：

add_action( 'woocommerce_shop_loop_item_title', 'show_colored_product_categories', 20 ); // Loop products
add_action( 'woocommerce_single_product_summary', 'show_colored_product_categories', 7 ); // Single product
function show_colored_product_categories() {
    global $product, $woocommerce_loop;

    $category_ids = $product->get_category_ids();

    if ( ! empty($category_ids) ){
        $categories = array(); /// Initializing

        foreach ( $category_ids as $category_id ) {
            $term = get_term($category_id, 'product_cat');

            // On single product pages (Linked term)
            if ( isset($woocommerce_loop['total']) && $woocommerce_loop['total'] == 0 ) {
                $categories[] = '<a href="'.get_term_link($term).'" class="'.$term->slug.'">' . $term->name.'</a>';
            } 
            // On products loop
            else {
                $categories[] = '<span class="'.$term->slug.'">' . $term->name.'</span>';
            }
            
        }
        print '<div class="product-categories">'.implode( ' ', $categories ).'</div>';
    }
}

代码位于子主题的functions.php 文件中（或插件中）。已测试并有效。

注意： 您可以通过调整
add_action() 函数中的钩子优先级来更改显示位置。