Woocommerce- Change Colour of Attribute Heading Text

If you’re using woocommerce, then you are at a level where you will find Firebug/developer tools useful for this sort of thing. Watch this video—only 6 minutes and it will change your relationship with CSS forever.

For the snippet, we need a link to your site to see (or not see, in this case!) which text you’re talking about.

Thanks for the video link I will take a look.

Here is the link to my product page https://www.hatchedinfrance.com/product/lace-curtains-tile-mosaic/

Many thanks

.woocommerce .label > label {
    color: #5a5a5a;
}

Yes: watch the video. To find the above code, I right-clicked the text and selected “Inspect Element with Firebug”. I then right-clicked the style pane of Firebug and selected “Add rule…”. It dynamically added the rule:

.label > label {
}

for me. I then added .woocommerce on the front to make it more specific and added the color property declaration.

Easy when you have the right tools.

mmm? I’ve copied and pasted your snippet into my editor style sheet with the rest of my snippets and nothing has changed. What should I have done?

Appreciated,

[Moderator Note: No bumping. If it’s that urgent, please consider hiring someone instead.]

The only CSS I can see added (in “my-child-theme”) is:

.marketing h2 {
    color: #99cdc9;
}
footer#footer .colophon {
    background-color: #5e5e5e;
}
footer#footer {
    background: none repeat scroll 0 0 #89967f;
    border-top: medium none;
}
body {
    font-size: 1.05em;
}
.dropdown-menu > li > a {
    background: none repeat scroll 0 0 #ffffff;
    color: #808080;
}
#top.single-product .variations td {
    color: red;
}

Do you need to clear your cache or something?

Hi electricfeet yes that is my CSS code. Has the text changed for you? I have cleared cache and tried another device but the words- size, colour and trim are all still white (hidden)

yes that is my CSS code

But it shouldn’t be. You should have

.woocommerce .label > label {
    color: #5a5a5a;
}

in there somewhere.

Can you double-check that you have added it in the editor, in your child theme’s stylesheet?

If it’s definitely there, then you have some caching going on on your host—either as a plugin on your WordPress installation or provided by your hosting company.

/*
Theme Name: My Child Theme
Version: 1.0
Description: A child theme of Customizr
Template: customizr
*/

@import url(“../customizr/style.css”);

.marketing h2 {
color: #99CDC9;
}

footer#footer .colophon {
background-color: #5E5E5E;
}

footer#footer {
border-top: none;
background: #89967F;
}

body {
font-size: 1.05em;
}

.dropdown-menu > li > a {
color: #808080;
background: #FFFFFF;
}

#top.single-product .variations td {
color: red;

.navbar-inner a.social-icon {color:#DC622C;}

.woocommerce .label > label {
color: #5a5a5a;
}

Hello again Electricfeet thank you for being so patient with me. The above code is exactly what I have in the editor. The hosting company is dreamhost.

Thanks again

You don’t need the
@import url("../customizr/style.css");
statement.

The child-theme’s stylesheet on your page is still showing

@import "../customizr/style.css";
.marketing h2 {
    color: #99cdc9;
}
footer#footer .colophon {
    background-color: #5e5e5e;
}
footer#footer {
    background: none repeat scroll 0 0 #89967f;
    border-top: medium none;
}
body {
    font-size: 1.05em;
}
.dropdown-menu > li > a {
    background: none repeat scroll 0 0 #ffffff;
    color: #808080;
}
#top.single-product .variations td {
    color: red;
}

that is, without the extra rule. So you either haven’t put the CSS in the right place, or it must be being cached somewhere along the way.

As a temporary stop-gap, can you put that rule in your Custom CSS?

Yay!! I added the code to my “custom Css” and its worked! I have also removed @import url(“../customizr/style.css”);

Thanks electricfeet you are a star*

Ha!

I made a mistake this afternoon in my stylesheet by adding an extra “{” and was astonished to see the rest of the stylesheet ignored completely … and I thought of you.

In what you posted above, #top.single-product .variations td {color: red; is missing its closing bracket. That’s why the rest was being ignored!

Phew. Mystery solved.

Hello again,

Gosh you are absolutely right! I have now added the closing bracket to the editor and removed all the coding from the CSS style sheet and all is working great! Even the social icons at the top of the page are now working as they were also being ignored previously. Thanks for the detailed observation.

??

Hello guys,

I am working on a new WordPress install using the Customizr theme. I noticed something in the slide and I am wondering if that’s by default part of the design of the theme. I uplaoded animage sized 1170/500px but there’s a strange square box that appears on top my slider image, which covering part of the image including the face of the picture on my slider image. Is there anyway I can remove this square box from the slider, or it comes, by default, with the title and call to action button. If so, is it possible to link a page to my image without using the call to action button?

Thanks,

Start a new thread as this is nothing to do with the above subject.

And include a link to your site