CODEWITHSUNDEEP
phpcsswordpresswoocommerceproduct
Matin
Matin

Reputation: 13

Targeting specific div on specific WooCommerce product pages to customize css

I am using Wordpress and WooCommerce to build a website for my client. For every product page I have set up two groups of links (buttons, secondary menu) to allow user to visit other product category pages. I would like certain links to be automatically a specific color and weight when the user is on a certain product page (like an active state, but without having to first clicked on the link, I guess similar to breadcrumbs to show where the user is in terms of what category/categories the product they're viewing belongs to).

I've been trying to target the post-id and the div of the specific links to make css changes, but it's not working. I would really appreciate any help!

Here is the css I used to target a specific secondary menu link:

#menu-item-1886 > a {
color: #003b59 !important;   
font-weight: 600;

}

This works, but of course it made the change to this menu item across all pages. I want it to be only on a specific product page.

I also tried this, which also didn't work:

.body.post-id-766 #menu-item-1886 > a {
color: #003b59 !important;   
font-weight: 600;

}

The site is at http://www.hoptri.d-gecko.com

Again, really would appreciate your help with this! Thanks in advance!

Upvotes: 1

Views: 1763

Answers (1)

LoicTheAztec
LoicTheAztec

Reputation: 253859

You can add with body_class WordPress filter hook and choosen conditional tags some additional classes where you want, like in this example:

add_filter( 'body_class', 'adding_some_custom_body_classes' );
function adding_some_custom_body_classes( $classes ) {
    if ( is_product() ) {
        $classes[] = 'product-single-pages';
    } elseif( is_product() && is_single( array( 17, 19, 1, 11 ) )  {
        $classes[] = 'product-single-pages-2';
    }
    return $classes;
}

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

This code is tested and works

So you will be able to use that classes selectors in your CSS rules like (fake example):

body.product-single-pages #menu-item-1886 > a,
body.product-single-pages2 #menu-item-1886 > a { font-weight: 600; }

body.product-single-pages #menu-item-1886 > a { color: green !important; }

body.product-single-pages2 #menu-item-1886 > a { color: red !important;  }

WooCommerce inject yet in body classes some specific classes as in this html example:

 <body class="product-template-default single single-product postid-19 logged-in woocommerce woocommerce-page right-sidebar woocommerce-active customize-support">

So you can also use this class selectors in your css:

  • single-product
  • woocommerce
  • woocommerce-page
  • woocommerce-active

For example this way:

body.woocommerce.single-product.woocommerce-active #menu-item-1886 > a {
     color: blue !important; 
}

References to conditional tags:

Upvotes: 2

Related Questions