How to change font color in woocommerce for specific fields

jello32
jello32 used Ask the Experts™
on
I have a site that is medium brown with white text. The problem is on the woocommerce pages, the text either displays in grey which is hard to read or white on a white background. I need to know how to change the font color for following items:
 results line on shop page,  on the product page, the description that shows up above the product information, the description text that shows on the bottom of the product page in the box that says Description tab and Additional information Tab, the sku and category labels and on the cart page the telephone number field in billing details.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
can you give a URL that can inspect? then we can tell you which styles to change
the only way I see is by changing the background colour of the panels as the header h1 inside is the same header h1 outside the panel so changing that will change the headers that are on dark backgrounds.

On your appearance/theme you should have "edit CSS"  or a place for custom  CSS, if not try the "custom CSS" plugin and activate it.  
anyway:

put the following css style in:

.panel {
    margin-bottom: 20px;
    background-color: #a94442;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
Angular Fundamentals

Learn the fundamentals of Angular 2, a JavaScript framework for developing dynamic single page applications.

Author

Commented:
That changed the panels at the botton of the product page but what about the other items I mentioned?
Ok I thought I would try one then if that went ok look at the others ;-)
let me have a look..
These 2 (together)  should overwrite the Product summary and options

.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
    color: #ffffff;
}

.woocommerce div.product form.cart .variations select {
    color: #000;
}

Open in new window

actually you also  look like you need to change the background to the "am I 18 or not?)

this will do it:

#av-overlay {
    background: #cdc;
}

Open in new window

not sure about the TAb, but try..

.woocommerce #content div.product .woocommerce-tabs ul.tabs li, .woocommerce div.product .woocommerce-tabs ul.tabs li, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs li, .woocommerce-page div.product .woocommerce-tabs ul.tabs li {
   
    background-color: #E39B9A;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background: #E39B9A;
    border-bottom-color: #E39B9A;
}

Open in new window

Author

Commented:
What about the showing all results on the shop page?

Author

Commented:
And how do I change the coupon code button to black?
do you mean the text "Showing all 2 results" ?
 try:

 .woocommerce-result-count {
    margin: 0 0 1em;
    color: #FFF;
.woocommerce .woocommerce-ordering {
    margin: 0 0 1em;
    color: #000;
}

Open in new window


I can't seem to see the Coupon code button?
I keep tying to checkout to find the coupon but its saying there is no shipping method choosen?  (I'm in the UK)

Author

Commented:
I took it out.

Author

Commented:
Thanks very much!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial