Any way to make the price bigger on the product page?

Sure. Try adding some custom css to your theme;

.single-product .summary .price {
font-size:3em;
}

That should make it plenty big.

That did not work. Where does it go? in my theme CSS in the editor? Or do I have to go into the CSS outside of WordPress?

Added it like this in the style.css ..nothing

/* 7.2.1 Single Product */
.product {
position: relative;
font size: 20em;
}
.onsale {
position: absolute;
top: 0;

..wow just changing that line and then changing back has messed up the mobile theme. As usual random kinks even when the code is changed back..

Have to delete and re-upload , which whenever I do, all settings must be redone..

(free woo theme )

@thabto it goes in your themes style.css file.

@stacy your code will have made _all_ the product content huge as you applied it to the .product class. You need to apply it to .price class as depicted in my original snippet ??

Thanks

That’s not how I did it. I went into the woo css and revised two files.

wp-content/plugins/woocommerce/assets/css

Make your revisions to the woocommerce.css and woocommerce.less files.

/* Price */
span.price, p.price {
color: @highlight;
font-size: 1.4em;
font-weight: bold;

Boom. It works.

Found the solution. I’m posting my code below that worked for me. I had to go into my wp-content/plugins/woocommerce/assets/css/woocommerce.css to do it.

.woocommerce div.product span.price,.woocommerce div.product p.price,.woocommerce #content div.product span.price,.woocommerce #content div.product p.price,.woocommerce-page div.product span.price,.woocommerce-page div.product p.price,.woocommerce-page #content div.product span.price,.woocommerce-page #content div.product p.price{color:#85ad74;; padding-top: 10px; padding-bottom: 10px;}

Be sure to add some padding to it as it will overlap the title when you increase the font size.

@moondog, your suggestion made the prices bigger in the store listings grid. I needed to change that as well so thanks. But above is the code that made the price bigger in the individual product listing.

Thanks to all who have helped.

James’s solution worked fine for me in the custom.css (actually wanted the price smaller) but I had to add !important:

.single-product .summary .price {
font-size: 1em !important;
}

Hi Folks,

I’ve been trying to figure things out with the font size and I must say that it’s a struggle. I’m not a coder, but I’m the kind of person who dares to fool around with the .css files by opening them and looking for ‘font-size’, and I try to experiment and see if things work. However, I’ve spent a long time doing this to no avail.

Please look at this link:
https://gharfurnish.com/shop/

How can I fix the font sizes on the prices in green font? (I did manage to do something to the other ones in grey font).

Thanks in advance.

PS: I need specific instructions, as I’m kind of a newbie to this. All the help appreciated.

@recessionwhackers –
put this line at the bottom of your theme css file, should do the trick:
ul.products li .price ins span {font-size: 1.4em;}

Hi Varktech,

I’m using Headway 2.14.

How do I do that? Should I edit the .css file there?

Thanks.

Hi Varktech,

Thanks. I used your code in the Visual Editor in Headway as “Live CSS” and it worked perfectly!

Thanks again. Problem solved.

Hi folks,

I’ve made a bit of progress.

I’ve got one more problem:

How do I change this font size?

https://gharfurnish.com/shop/black-poly-magnum/

Please look at the description font towards the bottom. That’s really small.

Thanks again.

I also need the tabs at the bottom to look slightly bigger – description and reviews.

Thanks.