change font price in woocommerce

digital-top

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

Hello,

Please, try to use the following Custom CSS Code.

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

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

digital-top

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

Please, try the following code.

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

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

digital-top

Great!

Thanks a lot!

digital-top

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

digital-top

Dear Phil

thank you very much!

digital-top

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

digital-top

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

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

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

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

digital-top

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

Thank you

Phil

Please, try the following CSS Code:

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

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

digital-top

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

Please, try to use the following CSS Code instead:

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

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

digital-top

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

digital-top

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

Please, try this one now ?

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

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

digital-top

We got it!

thanks a lot!!! ?