Price colors on the individual Product page

[geomatani]

Need help on this one more time.

All price colors are showing fine, except on the individual Product page.
Sale prices are fine on individual product pages, Black is strike-through with Red Sale Price, but Regular price item still shows as RED. I need Black for Regular price item

here is my Current custom CSS that I have. This is fine for Home page and Sale price product. I dot want to break this, but need to fix only Regular price item to black. See attached

.woocommerce div.product p.price del, .woocommerce div.product span.price del {
color: #000 !important;
}

.woocommerce ul.products li.product .price {
color: #000 !important;
}

.woocommerce div.product span.price, .woocommerce div.product p.price {
color: #000;
}

ins > span.amount{
color: #D33 !important;

.home span.amount{
color:#000 !important;
}

del > span.amount{
color:#000 !important;
}

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

You have this in your custom css:

ins > span.amount{
color: #D33 !important;

Which is making that price red. Also you need to add a closing tag }

– Kyle

[geomatani]

This reply has been marked as private.

[Kyle – SUPPORT]

Like I said, you have

ins > span.amount{
color: #D33 !important;
}

in your custom css, which is making the price red, you should change that to:

ins > span.amount{
color: #111 !important;
}

– Kyle

[geomatani]

This reply has been marked as private.

[Kyle – SUPPORT]

The sale price (not the one crossed out) you want black right?

– Kyle

[geomatani]

If the product is on sale, i want “Black” price scratched out with “Red” sale price, which was working fine and now its not for some reason.

the issue was with the regular price items. on home page regular prices are Black, which is good, but on individual product page its red, so I needed to change this to “black”.

hope this makes sence.

Also, just noticed that in Firefox browser page doensot load all the way, but its fine in Chrome!

please confirm!

[Kyle – SUPPORT]

Add !important to this rule in your css:

.woocommerce div.product span.price, .woocommerce div.product p.price {
  color: #000!important;
}

Home page loading fine for me in Friefox

– Kyle

[geomatani]

I added the !important; but still not working as intended.

Should I move any CSS line up or down, on top of other rules? does it matter?

[Kyle – SUPPORT]

Are you using a cache plugin? In your source code it shows the !important, but when I inspect with firebug it does not, so seems to be some caching going on

– Kyle

[geomatani]

no, I dont have any Cache plugin installed

[Kyle – SUPPORT]

Ahh, it’s just the browser cache. I cleared mine and now the price is black

– Kyle

[geomatani]

Ok, i fixed the Individual product page to black.
Not sure if this was an issue, but i removed the extra semicolon before !importnat.

Now, i have to fix red price on home page. If the product is on sale, i want “Black” price scratched out with “Red” sale price on home page.

This is not ending….sorry Kyle

[geomatani]

this is what I have so far:

/* Custom css for sale Price colors for BLK */
.woocommerce div.product p.price del, .woocommerce div.product span.price del {
color: #000 !important;
}

/* Custom css for sale Price colors */
.woocommerce ul.products li.product .price {
color: #000 !important;
}

.woocommerce div.product span.price, .woocommerce div.product p.price {
color: #000 !important;
}

ins > span.amount{
color: #d33 !important;
}

.home span.amount{
color:#000 !important;
}

del > span.amount{
color:#000 !important;
}

[Kyle – SUPPORT]

In your custom css you have:

.home span.amount{
color:#000 !important;
}

Causing the sale price to be black instead of red, remove that

– Kyle