Question 343003 in Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Display WooCommerce product categories names with a different background color

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.

Tags:

2

Answers


  1. 0

    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;
}
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search