Different price font size for catalogue page and product page

[LeeSanders]

Hi Guys,

Can you help with changing the font so that it appears one size on the catalogue page, and another on the actual product page?
Currently the font is fine on the catalogue page, but is replicated on the product page and is too small. If I change the font size using CSS it replicates across both pages…

Can you advise?

[LeeSanders]

..Just to also point out that this is then reflected on all other pages.

For example, I’ve managed to add the following:

ul.products .amount {
font-size: 15px;
}

.woocommerce-Price-amount {
font-size: 18px;
color: #808080;
padding-bottom: 0;
}

– – – –

So that creates a difference between the font sizes on the shop page and product page. However, now when I go to View Cart / Checkout etc, the prices also reflect that of the product page. So where the big text is suitable for the product page, it’s way too big for the other pages. Can you advise how I change the font depending on the page it is shown i.e. Product page / view cart / checkout / shop?

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

td.product-price .woocommerce-Price-amount {
    font-size: 15px !important;
}

Thanks
Mohammad

[LeeSanders]

Hi Mohammad,

Thanks for sharing, although it doesn’t appear to solve the issue.

So as mentioned, I’ve used this code to help differentiate sizes between the shop page and product page:

ul.products .amount {
font-size: 15px;
}

.woocommerce-Price-amount {
font-size: 18px;
color: #808080;
padding-bottom: 0;
}

And that works ok. However, when you add a product and go to Cart, the sizes are all over the place, one subtitle appears to follow the shop font size, whereas the total mirrors the size from the product page – Same with the shipping options. Does that make sense? How do I make sure that the view cart / cart / checkout pages follow a different font size rule for the amounts?

[David Martin – Support]

Hi,

To change the price on just a single product page use this:

.single-product.woocommerce div.product .summary h3.price span {
  font-size: 22px!important;
}

For the shop page you can then simply use:

ul.products .amount {
    font-size: 12px;
}