Display WooCommerce product categories names with a different background color

Question

In WooCommerce, I want to display the category name on shop pages as well as a single product pages, for 5 categories, setting up a different background color.

I used the code in WP snippet code:

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

Plus the CSS style in customizer: .category.text {background...}

It works, but it changes the background color on all my products.

I've also tried this code, but the result is similar:

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

What needs to be added so that each category has its own style?? Thanks in advance, I'm not a programmer.

Hello. Both codes work. Thank you. But... I used the second method. But I encountered a problem - the products in the store have 3 categories added: 1 - category type - product line, i.e. name of the product line category (this is what I have currently done thanks to your help) 2 - category type - what body part it is for - BODY or HEAD values 3 - category type - home or professional use

How can you combine two categories (1) and (2) together by separating them with the special character "|" e.g. SUPER LINE | Body? How can you add a note that the product is for home or professional use? Thank you in advance for your help.

Answer 1

first modify your php code to this:

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

then in your css something like this:

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

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

Answer 2

First, add the following CSS styles in the customizer (or in your child theme style.css file), defining for each category slug the desired color.

Here, the first rule is the default background color fallback (and text color if needed).

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

Then you will use the following to display the colored product category(ies) on products loop and single products, after the product title:

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

Code goes on functions.php file of your child theme (or in a plugin). Tested and works.

Note:
You can change the displayed location by tuning the hook priority in the add_action() function.