Return to previous page

How to customize the regular price and sale price

This topic has 2 replies, 2 voices, and was last updated 3 minutes ago ago by Rose Tyler

Leon

Participant

November 17, 2024 at 12:53

Hello

I would like the font color and font size of the regular selling price need to be as same as the font color and font size of the sale price when a product has only one regular price both in product category page and single product page.
Could you share with me the CSS code ?

My request as blow
product category page:
with-discount product-
Regular price font – font-family :poppins Size: 16px bold: 500 Color: #ADADAD
Sale price font: Size: 18px bold: 600 Color: #000000
without-discount product
Regular price font- font-family :poppins Size: 18px bold: 600 Color: #000000

single product page:
with-discount product-
Regular price font – font-family :poppins Size: 16px bold: 500 Color: #ADADAD
Sale price font: Size: 18px bold: 600 Color: #000000
without-discount product
Regular price font- font-family :poppins Size: 18px bold: 600 Color: #000000

Please find the details in attachment.

Thank you

Content is visible for topic creator and
support staff only.

Files is visible for topic creator and
support staff only.

#423866 Copied Theme version: 9.4.4

1 Answer
Rose Tyler

Support staff

November 17, 2024 at 15:33
Hello, Leon,

Thank you for reaching out to us with your request.

We understand that you would like the font color and size of the regular selling price to match the sale price when a product has only one regular price, both on the product category page and the single product page. Below is the CSS code that should help you achieve the desired styling:
```
/* Product Category Page */
/* With-discount product */
.etheme-product-grid .price del {
font-size: 16px;
font-weight: 500;
color: #ADADAD;
}
/* Without-discount product */
.etheme-product-grid .price {
color: #000000 !important;
}

/* Single Product Page */
/* With-discount product */
.single-product .price del {
    font-size: 16px;
    font-weight: 500;
    color: #ADADAD;
}
/* Without-discount product */
.single-product .price {
font-size: 18px !important;
font-weight: 600 !important;
color: #000000 !important;
}
```
https://www.8theme.com/documentation/xstore/additional-customisation/optimal-placement-for-custom-css-code/

Best Regards,
8Theme’s Team
#423884 Copied
Viewing 2 results - 1 through 2 (of 2 total)