在产品标题上方显示 Woocommerce 产品的 CSS 样式（每个类别不同的背景颜色）的类别名称。怎么办？

Question

我需要向产品页面以及单个产品页面添加代码，以允许我显示类别名称 - 对于 5 个类别，使用不同的背景颜色。 WordPress+woocomerce。

我使用了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;
}
}

• 在customize.category.text {background...}中编写CSS样式

它有效，但它改变了我所有产品的背景颜色。我也尝试过这段代码，但结果是相似的：

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;
}