Sale price colour

Hi

how can I change font colour for sale price in grid view and single product view?

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

/* STYLE OF FIRST PRICE */
.product-grid-item .price .amount:first-of-type {
    color: red; /* COLOR */
    font-weight: 600; /* FONT WEIGT */
}
/* STYLE OF SECOND PRICE */
.product-grid-item .price .amount {
    color: blue; /* COLOR */
    font-size: 16px; /* SIZE */
    font-weight: 600; /* FONT WEIGT */
}

Best Regards

Thank you for your swift response. However, the code you suggested changed price colour for grid view only, when I’d like to change price colour for the single item view as well.

Also, I presume that there is an error in the presented CSS, as your code sets both prices into the same colour – please see attached screenshot

Attachments:

You must be logged in to view attached files.

Hello,

Try this code:

/* STYLE OF FIRST PRICE */
.product-grid-item .price .amount:first-child {
    color: red; /* COLOR */
    font-weight: 600; /* FONT WEIGT */
}
/* STYLE OF SECOND PRICE */
.product-grid-item .price .amount:last-child {
    color: blue; /* COLOR */
    font-size: 16px; /* SIZE */
    font-weight: 600; /* FONT WEIGT */
}
body .single-product-content p.price .amount:first-child  {
     color: red; /* COLOR */
}
body .single-product-content p.price .amount:last-child {
     color: blue; /* COLOR */
}

If it does not work, please provide your site URL

Best Regards

Unfortunately, no luck

Attachments:

You must be logged in to view attached files.

Link to the site attached

Hello,

Please replace the code and change the color as per your needs:

body .price ins .amount {
color: red;
}

body .single-product-page .price ins .amount {
color: red;
}

Best Regards

Thanks, works like charm now

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts