0

I am trying to style a single product page with custom CSS in WooCommerce. I managed to get the categories styled with the conditional tag is_product_category in my header file and an php IF statement.

Up to there its fine, I have a category called "Her" and all the pages to do with that category are pink. But then, when I go to an individual product in the "Her" category, it reverts to the default CSS.

I checked and there are no conditional tags to address a single product. I've spent hours researching and reading everything I can find but I cant find a solution. I need the product page to have the same styling as the parent category. Any thoughts as to how I can achieve this?

Many thanks in advance

Improve this question

2 Answers 2

Reset to default
1

Try adding classes, instead of restricting the CSS to certain pages.

You should be looking for classes that will allow you to apply your styles to those pages only. Usually the CSS for the entire site will be loaded at once and kept in the cache. So don't try to load the styles only on certain pages, instead provide styles that override existing styles only on the pages you want to modify.

Check the body_class function, it produces the classes you need may on the <body> tag already.

And if that is not enough, try changing the template to output the category as a class name.

Also, you should not just inject a stylesheet into the head, you should use wp_enqueue_script to add new styles, but you shouldn't really need to do that either.

Improve this answer
1
  • You should publish and accept your own answer.
    – DigitalDesignDj
    Commented Mar 30, 2013 at 19:22
0

Thank you. This is the solution that worked for me: You have to add this code in your functions.php file and then style the elements with the category slug. 

add_filter('body_class','wpa76627_class_names');
function wpa76627_class_names( $classes ) {
    if( is_singular( 'product' ) ):
    global $post;
    foreach( get_the_terms( $post->ID, 'product_cat' ) as $cat )
        $classes[] = $cat->slug;
endif;
    return $classes;
}

Then in the CSS add: BODY.my-product-cat-slug

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.