change font price in woocommerce

digital-top · November 2020

Hi there

I don't know if there is a way to change font appearence in woocommerce products.

I would like to have them bigger and bold here (this is the home page)

Thanks a lot!

Phil · November 2020

Hello,

Please, try to use the following Custom CSS Code.

.woocommerce .product .desc .price{
   font-size: 35px!important;
 font-weight: 900!important;
}

Thanks

digital-top · November 2020

Super! Thanks a lot!

Also I noticed that in home page TITLES, PRICES AND CART BUTTON are CENTERED while in the shop page they are LEFT ALIGNED

SHOP PAGE

Can I have them always centered also in promotion and shop page?

Thank you!

Phil · November 2020

Please, try the following code.

.woocommerce .product .desc{
   text-align: center!important;
}

Thanks

digital-top · November 2020

Great!

Thanks a lot!

digital-top · November 2020

Hi again,

sorry I realized that the price font did not change inside the single product page

It should be like this

as it is in the shop page and in home page

Can you help?

Thanks a lot!

Phil · November 2020

Please, modify the first code I sent you to have this:

.woocommerce .product .desc .price,
.woocommerce .summary .price {
  font-size: 35px!important;
 font-weight: 700!important;
}

Thanks

digital-top · November 2020

Dear Phil

thank you very much!

digital-top · February 2021

Hi there,

I re-open this ticket to ask for something similar.

You helped me increasing the font size of the main price. Would it be possibile to increase also the font of the offer price?

Thanks a lot!

Phil · February 2021

Hi,

Do you want to change the font size and family only the circled price from your screenshot?

Because I could not find it on your website.

But if you want to change the font family of the whole price, you need to modify the previous code to have this:

.woocommerce .product .desc .price,
.woocommerce .summary .price {
 font-size: 35px!important;
 font-weight: 700!important;
 font-family: 'Times'!important;
}

Thanks

digital-top · February 2021

Hi Phil

the font for the product priced is fine.

I would like to increase the font size of the "crossed out" price, the promo price, the one circled in my image.

But the code you gave me is not working for that

Please let me know

Thank you

Phil · February 2021

Can you tell me on what page do you have this product?

Because I cannot see "crossed out" price anywhere on your website.

Thanks

digital-top · February 2021

Here it is https://www.italcomerce.com/prodotto/olio-extravergine-di-oliva-05l/

Thank you

Phil · February 2021

Please, try the following CSS Code:

.woocommerce del span.woocommerce-Price-amount.amount{
   font-size: 20px!important;
}

Thanks

digital-top · February 2021

Dear Phil

thansk a lot!

It works!

What if I would like to change also the font color only of the "crossed out" price ?

Thank you

Phil · February 2021

Please, try to use the following CSS Code instead:

.woocommerce .woocommerce-variation-price .price del{
  font-size: 20px!important;
  color: blue!important;
}

Thanks

digital-top · February 2021

Hi Phil,

the code is working but the problem is that the color is faded ... it's not the plain color.

Is there a way to make it full 100%?

Thank you

Phil · February 2021

To change that, please, add the opacity: 1!important; attribute a the end of the previous Code.

It should look like this:

.woocommerce .woocommerce-variation-price .price del{
 font-size: 22px!important;
 color: #ce2939!important;
  opacity: 1!important;
}

Thanks

digital-top · February 2021

Hi Phil

thank you

it looks like it's not working ...

it should work for all discounted price, not just in the case of product variations... maybe that's the problem now

thanks a lot

Phil · February 2021

Please, try this one now ?

.woocommerce .price del{
 font-size: 22px!important;
 color: #ce2939!important;
 opacity: 1!important;
}

Thanks

digital-top · February 2021

We got it!

thanks a lot!!! ?

change font price in woocommerce

Comments