• Resolved KatrineDS

    (@katrineds)


    Hi,

    I hope someone can help.

    I need some specific CSS (header color) for a product category and all the products in it.
    This works for chainging the header color on the category page:

    .term-313 .header.style7 .main-header {
    background-color: #c8c2b3!important;
    }

    But how do I target all the products within this category so they all have the same header color? Can it be done without giving every single product id the CSS??

    Thanks in advance ??

Viewing 8 replies - 1 through 8 (of 8 total)
  • Please post the url to the category page.

    Thread Starter KatrineDS

    (@katrineds)

    Parent category page with correct color header:

    https://www.bygogspar.dk/produkt-kategori/marmor/

    Product page in that category – with wrong color header:

    https://www.bygogspar.dk/produkt/30x60x2-cm-poleret-mat/

    PW is spar123

    Thanks for the links but they are password protected.

    Thread Starter KatrineDS

    (@katrineds)

    PW is spar123

    Got it! I see that the product pages don’t have category identifiers amongst the body tag classes, but you can add them in with this function:

    add_filter( 'body_class', 'add_body_classes' );
    function add_body_classes( $classes ) {
      global $post;
      // product pages only
      if ( is_product() ) {
        // get the categories for this product
        $terms = get_the_terms( $post->ID, 'product_cat' );
        foreach ($terms as $term) {
          // you can use either slug or id, no point having both
          $classes[] = 'cat_slug_'.$term->slug;
          $classes[] = 'cat_id_'.$term->term_id;
        }
        return $classes;
      }
    }

    You’ll need only one of the slug or id, whichever you prefer, and the value needs to match the css selector that you use.

    Note that if a product is in more than one category, and you have different colours for different categories, the results will be unpredictable.

    Not tested fully.

    The code goes in functions.php for your child theme or you can use the “My Custom Functions” plugin.

    Thread Starter KatrineDS

    (@katrineds)

    I really appreciate your help but I’m a bit slow when it comes to PHP.

    I put it in my functions.php in the plugin you recommended – but I got a white screen of death when I (thought I) added the id (293).

    Can you perhaps highlight the parts I have to change?

    Please leave functions.php unaltered. Put just the snippet in “My Custom Functions”.

    The idea was that you can use the snippet unaltered. All product pages will have category identifier classes in the body tag, including some product pages you’re not bothered about, but there’s no harm in that.

    If you do alter the snippet, you can validate the new code here:
    https://phpcodechecker.com/

    Hi,

    We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘CSS for all products in specific category’ is closed to new replies.