How to change colour of the Variable price?

[davo]

Hello!
I found that when you have a variable product and you choose an option it in its the product page the colour it shows is a light green (see attached file). Is the any css code I can use to change that?
Thanks so much in advance!

[Melanie – SUPPORT]

Can you post up the URL to a page where this is happening so I can check it out directly?

Thanks!

[davo]

Sure!

Here this link for example though, obviouly it happens in every variable product, you just have to select the product and the “green” price will appear 😉
Thanks so much

http://www.rufoiluminacion.com/producto/apolo-a-811-2/

[Melanie – SUPPORT]

Hey, you can use this custom css:

.woocommerce div.product span.price, .woocommerce-page div.product span.price {
color: black;
}

[DAPPER-tekstenweb]

Hey Melanie, what CSS should I use if I want the price to show in this hex #e87a9a ?

[Fedde12]

@davo How did you add the color and size viables to this item? I can’t figure it out.. help me out please. Thanks

[davo]

@Fedde12 here you have a link where you can find all the info about that:
http://docs.woothemes.com/document/product-variations/

I hope it helps!

[Fedde12]

@davo Thanks! It was much easier then I thought.

[davo]

Thanks so much Melanie!

@DAPPER-tekstenweb if you want that color just change black for the color code you need, this would be you final code then:

.woocommerce div.product span.price, .woocommerce-page div.product span.price {
color: #e87a9a;
}

For me it worked awesomely 😉

[Swift Ideas – Ed]

Thanks for posting that @davo 🙂

– Ed

[glassdomain]

Could you tell me where/how to add some static text into the page just before the variant price please?
I would ideally like to do this through the child theme if possible to avoid issues with theme updates.

The text I want to add is “Total price for your option:”

Many thanks,

[Kyle – SUPPORT]

Hi

Try adding this to your custom css:

.single_variation_wrap .single_variation:before {
  content: "Total price for your option";
  margin-right: 10px;
}

– Kyle

[glassdomain]

Hi Kyle,

Thanks that’s awesome!

Best,

Pete

[Kyle – SUPPORT]

No problem

– Kyle