How to change the color of variable product price range?

For me it’s:

.woocommerce ul.products li.product .price {
    color: #77a464;
    color: red!important;
}

you might have to put !important in as well, depending on the theme used.

Morris

Thank you for your input, Morris! I tried your code and it works for the product catalog page! However, it does not work for the product page of each product.

For the page of each product, I’ve tried this so far:

.price .woocommerce-Price-currencySymbol{
color: #FFFFFF !important;
}

.woocommerce-Price-amount.amount {
color: #FFFFFF;
}

This changes the color of the dollar sign and price but does not change the dash sign.

Thanks again!

• This reply was modified 3 years, 7 months ago by icebing.

Hello,
Please send a link to your site so that we can check and see what is the best code for your site.

A link to one of the products where you are having issues would be perfect.

Thanks, Nicola! Not sure if I could provide the link as I am running my WordPress locally. But I copied the page source code for your reference if possible.

https://github.com/icebing/wordpress/blob/main/example.txt

I guess the problem occurs at line #296..

<p class="price"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>40.00</bdi></span> &ndash; <span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>218.00</bdi></span></p>

Thanks!

• This reply was modified 3 years, 7 months ago by icebing.

I figured out in this way.

.price {
    color: #FFFFFF ;
}