Change color – price tag

[Jan Gundersen]

Can I change the color of the price tag without having to change color elsewhere?

[Jan Gundersen]

[Yazmin]

Hello Jan

Yes, with a small piece of ‘Additional CSS’ in the customizer

For the single product page in your screenshot

.woocommerce div.product p.price:before,
.woocommerce div.product p.price {
    background: #00bc96;
    color: #fff;
}

And, also for the product archives, categories etc.

.woocommerce ul.products li.product .price:before,
.woocommerce ul.products li.product .price {
    background: #00bc96;
    color: #fff;
}

change the background and the text color to any color you like

[Jan Gundersen]

Hi Yazmin

Thanks a lot!! Can I allso change the font size on price?

[Yazmin]

Yes, absolutely. The single product uses the default WooCommerce font size:

.woocommerce div.product p.price {
    font-size: 1.25em;
}

simply change 1.25em to any size you wish.

can use % or px also. e.g. font-size: 1.25em; is the same as font-size: 125%; (125% of the body font size)

font-size: 20px; if you prefer to use pixel size

[Jan Gundersen]

Yazmin

Thank you for fast and good feedback!!

[Author]

Posts