ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Uplift
• July 21, 2016 at 10:55 pm #283085
  LeeSanders

  Member

  Post count: 10

  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?

  July 21, 2016 at 11:07 pm #283086
  LeeSanders

  Member

  Post count: 10

  ..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?

  July 22, 2016 at 5:53 am #283098
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please use this custom css code:-

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

  Thanks
  Mohammad

  July 22, 2016 at 12:54 pm #283264
  LeeSanders

  Member

  Post count: 10

  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?

  July 25, 2016 at 10:55 am #283582
  David Martin – Support

  Moderator

  Post count: 20834

  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;
  }

• Back to forum

  Posted in: Uplift