Customize On Sale Price Color

I love the accent color for my site -- it's a light yellow. BUT it doesn't work to use this color on the SALE price for my shop. How can I change JUST the sale price color????? Is there a custom CSS code for this? 

Site URL: https://cornet-maroon-xkyb.squarespace.com

How do I change the SALE PRICE color in the custom CSS area? Need help ASAP 

On 3/16/2021 at 11:22 PM, SJENKINS said:

Site URL: https://cornet-maroon-xkyb.squarespace.com

How do I change the SALE PRICE color in the custom CSS area? Need help ASAP 

 

Hi. Add to Design > Custom CSS

/* sale color */
.product-mark.sale {
    color: red !important;
}

Also you haven't changed SEO Title so the browser tab name still shows "Store 1"

Hi @tuanphan, this code isn't working for my site. It changes all the price colors. Is there another CSS target? 

On 8/13/2021 at 12:46 AM, plantshop203 said:

Hi @tuanphan, this code isn't working for my site. It changes all the price colors. Is there another CSS target? 

Can you share link to shop page on your site?

@tuanphan

theoldyew.com/shop

48 minutes ago, plantshop203 said:

@tuanphan

theoldyew.com/shop

I see no sale product here. Can you add one?

hi @tuanphan

I turned on the sale price for this product. 

Thank you!

6 hours ago, plantshop203 said:

hi @tuanphan

I turned on the sale price for this product. 

Thank you!

Hi,

Change color on listing page or individual page?

if list page, I don't see sale product

https://www.theoldyew.com/shop

@tuanphan

listing page! see screenshot with red circle

On 8/20/2021 at 4:52 AM, plantshop203 said:

@tuanphan

listing page! see screenshot with red circle

 

 

Add to Design > Custom CSS

/* sale price */
.product-price.product-price-clone span:nth-child(2) {
    color: red !important;
}

Thanks @tuanphan!!! Worked great. 

Hi there! I tried this cold but for some reason it's not working for me...any other ideas? Does it show up in this pale yellow for everyone? 

2 hours ago, leiraoakdesigns said:

Hi there! I tried this cold but for some reason it's not working for me...any other ideas? Does it show up in this pale yellow for everyone? 

Can you share link to product in screenshot? We can check easier

On 1/21/2022 at 6:06 PM, tuanphan said:

Can you share link to product in screenshot? We can check easier

On 1/24/2022 at 11:47 AM, Domenic said:

Hi can I please have a code to change my sale price to red as well please. As can be seen with attached image the sale price comes out as a faded grey. Website: adicovintage.com.au

 

•  
• Quote

I see you changed sale to red?

22 hours ago, tuanphan said:

I see you changed sale to red?

Correct, But I am having issues changing the dollar sale price i.e. it has $50 in grey as the sale price but I would like it to be in red. Would like to keep the original price showing in black and crossed out though next to the sale price.

Thank you 🙂

On 1/26/2022 at 1:51 PM, Domenic said:

Correct, But I am having issues changing the dollar sale price i.e. it has $50 in grey as the sale price but I would like it to be in red. Would like to keep the original price showing in black and crossed out though next to the sale price.

Thank you 🙂

Add this CSS

.on-sale .product-price>span:not(.original-price) {
    color: red !important;
}

1 hour ago, tuanphan said:

Add this CSS

.on-sale .product-price>span:not(.original-price) {
    color: red !important;
}

Worked perfect! Thank you!

Hi @tuanphan how do you change the color of the original price on the individual page? 

On 12/6/2022 at 5:20 AM, SoundsailAudio said:

Hi @tuanphan how do you change the color of the original price on the individual page? 

Hi,

Can you share link to a product? I can't find sale/original price

Is there a way to make only the sale price a different colour, but the normal non-sale price in black?

The CSS above, didn't work for me?

https://mutantmade.art/

On 3/16/2024 at 9:28 AM, JonoY said:

Is there a way to make only the sale price a different colour, but the normal non-sale price in black?

The CSS above, didn't work for me?

https://mutantmade.art/

 

You can use this code to Website > Website Tools > Custom CSS

/* Sale price color */
.on-sale .product-price {
    color: #f1f !important;
}
.original-price {
    color: black !important;
}