How to change font aspect on a discount price (compare at price), so it doesnt affect regular price?

[Christian_R]

My webpage: www.palmo.com.co

I added this clause to the product card custom CSS:

.price-item--regular {
color: rgb(194 37 37);
font-size: 13px !important;

}

But doing so, products that are not in discount, also show this variation. How can I make it only change the compare-at-price rule, and not the whole regular-price-item? I want discount (old) prices to look red and smaller, and current (after discount) prices to look as usual. This code changes also current prices with no discount.

Thanks!!!

Regular price in first image should look grey and bigger (as in second picture)

[Christian_R]

Thanks! Only thing is discount price have same size as regular price. I want discount price to be 13px and regular price to be 15px

[Made4uo-Ribe · Accepted solution]

Hi @Christian_R 

Can you take out the code, and check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.price__sale s.price-item.price-item--regular {
    color: rgb(194 37 37) !important;
    font-size: 13px;
}
.price__regular span.price-item.price-item--regular {
    color: black !important;
}

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!