1

I have spent hours researching how to do this but everything I found explains it in a way that goes over my head. I'm not great with coding but I know how to Inspect element and work from there but that doesn't help me in this case.

I want to use a different page layout/template on products in a specified category. I am using WooCommerce and I was able to use inspect element to recreate a product page the way I desired. Then I have copied the text into the custom css and it works great. However, this ends up being a Global change.

A majority of my product pages would benefit from having the default template rather than the custom one I made. I want to know how to add the code inside of the brackets so that the custom css (custom template) that I've added only gets applied to products in it's designated category.

I hope all that makes sense. Here are pictures to give you a visual example.

enter image description here

I already know what custom css I want to add to the modified product page template. I hope that designating this custom css to the specific categories is as simple as adding brackets similar to this (sorry, I'm sure it's way wrong but I see custom css that looks similar to this)

.product.category-2 { custom css changes here }

Thanks for taking the time to read this and I appreciate any and all help.

  • 1
    The body should have a class term-XX, where XX is the ID of the category. If you add .term-XX to the beginning of your CSS rules they'll only apply to that category. – Jacob Peattie Dec 1 '17 at 10:56
0

Add this to your funtions.php https://gist.github.com/thegdshop/3197540

That should add the appropriate category class when on the single prlduct page.

  • WordPress already adds a unique class to the body for categories, term-{id} – Jacob Peattie Dec 1 '17 at 10:54
  • Really appreciate your feedback. I've seen this talked about in other threads during my search for an answer but this is over my head a bit. I know how to add stuff to the function.php file and more so know how to add custom CSS but i'm not sure what to change and where to put it. For example, the product category ID is 206. Where would I add that in the functions.php file? After I have placed the product category ID in the correct place, where would I then add the custom css code so that this works? Is there a way to do this with Custom CSS? Thanks again – Blake Shiman Dec 1 '17 at 10:55
  • .woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images { width: 100%; } – Blake Shiman Dec 1 '17 at 10:57
  • Above is an example of code I want to add for the specified product page category. – Blake Shiman Dec 1 '17 at 10:58
  • @JacobPeattie OP is specifically asking to add a selector to the single product page, not the categories page. Your comment missed the mark entirely, I'm afraid. – Daniel Fonda Dec 1 '17 at 11:11
0

Here's my solution... Added the following to functions.php in my child theme:

add_filter( 'body_class','my_body_classes2' );
function my_body_classes2( $classes ) {

if ( is_product() ) {

    global $post;
    $terms = get_the_terms( $post->ID, 'product_cat' );

    foreach ($terms as $term) {
        $product_cat_id = $term->term_id;
        $classes[] = 'product-in-cat-' . $product_cat_id;    
    }
}
return $classes;
}

Now whenever you're viewing a single product page, an additional CSS class for each category the product is in will be added to the <body> tag.

Then if you want to change the styling for any single product pages in category 2 or 4, you can use the following CSS:

.product-in-cat-2 , .product-in-cat-4 {
    color: #ffffff;
}
  • Thank you and everyone else for the help! I am going to give this a shot when I get back to the office and let you know how it goes. Thanks again! – Blake Shiman Dec 2 '17 at 2:03
0

1) Install plug-in "add costum CSS"

2) This will not display a box to add css by default. You need to go into the plug in (lower part of the admin bar) and there will be a question about "enable costum CSS for following pages" - then check the "products" and you will now have a box to add CSS in individual producs when you go in them through woocommerce.

I don't know if you can do that kind of thing through this method, I needed this for removing render blocking CSS on a product page.

0

Add a body class related to the product category in WooCommerce Add this to your functions.php

add_filter( 'body_class', 'wc_cat_names' );
function wc_cat_names( $classes ) {
    if(is_product()){
    global $post;
    $terms = get_the_terms( $post->ID, 'product_cat' );
        foreach ($terms as $term) {
            $classes[] = $term->slug;
        }
    }
    return $classes;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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