admin管理员组

文章数量:1122832

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.

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.

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.

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.

  • woocommerce-offtopic
Share Improve this question edited Dec 1, 2017 at 16:58 Narek Zakarian 4144 silver badges17 bronze badges asked Dec 1, 2017 at 10:20 Blake ShimanBlake Shiman 311 gold badge1 silver badge2 bronze badges 1
  • 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 Commented Dec 1, 2017 at 10:56
Add a comment  | 

5 Answers 5

Reset to default 2

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

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.

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.

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

i have added this code in functions.php file by going

dashboard ...>>> appearance >>> editor >>>> functions.php

bottom of the code pasted 

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

then i goes to dashboard ...>>> product >>>> categories >>> hover the mouse on edit button and id i got

that same id i placed on single product page 

.product-in-cat-(ID) {
    color: #ffffff;
}

it's worked

本文标签： Add Custom CSS to Woocommerce Product Page in a specified category

版权声明：本文标题：Add Custom CSS to Woocommerce Product Page in a specified category 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736296183a1929732.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。