Jump to content

Customize On Sale Price Color

Recommended Posts

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"

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

@tuanphan

listing page! see screenshot with red circle

 

 

Screen Shot 2021-08-19 at 5.50.47 PM.png

Add to Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...
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? 

Screen Shot 2022-01-21 at 12.22.55 AM.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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

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

image.thumb.png.b0f8ffca9331093ae3aa54165493be95.png.dc81f473439ee9abfe2f439a59a17818.png

 
Link to comment
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

image.thumb.png.b0f8ffca9331093ae3aa54165493be95.png.dc81f473439ee9abfe2f439a59a17818.png

 

I see you changed sale to red?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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 🙂

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 10 months later...
  • 1 year later...
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/

 

Screenshot 2024-03-16 at 1.26.23 pm.png

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;
}

Change Sale Price Color 01 Min

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.