How can I change the 'Compare At Price' color to white on all product pages?

Hello!

I cant seem to find how to change the text of the “Compare At Price” to white, like the rest of the text on my page. It is visible on the collection page, but on the product page (as seen here: https://alittlekinky.co/collections/toys/products/free-willy), it is black, and is not visible.

How do I change this price on all the product pages to white?

Thank you in advance.

@Snohx

oh sorry for that issue can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.grid-view-item .grid-view-item__title, .product-price__price {
    color: #fff;
}

When I open the browser inspector to look at that element on your page, I see it is getting is colour from the .product-price__price class. The colour for this class is set to white on line 9846, but it is later set to black on line 12697.

There are at least four ways to change this, including:

(1) remove .product-price__price from the classes that are affected by line 12697 (though there may be other attributes added in this section)

(2) change the color attribute on line 12697 (though this might affect other elements)

(3) remove the color attribute on line 12697 and add a new line for just the black color attribute that only applies to .grid-view-item and .grid-view-item__title

(4) add “!important” to the entry at line 9846 so it will override the color entry at 12697.

Doing that changes the font on the hover overlay on collection page to white as well, making it difficult to see. Is there anyway to change The compare at pricing only?

@Snohx

yes that work only product page doesn’t effect other if have issue other page send screenshot or link

The color of this overlay text changes to white when I add that code in. I need this to remain black and the compare at price, white.

@Snohx

oh sorry for that issue can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.product-single__price s.product-price__price {
    color: #fff;
    opacity: 1;
}