Return to previous page

Change the size of the typography - by Sonsoles

This topic has 6 replies, 2 voices, and was last updated 2 years, 9 months ago ago by Olga Barlow

Sonsoles

Participant

April 3, 2019 at 17:10

Hello good afternoon
I would like to know if there is any way to change the size of the typography that appears on the buttons to make it bigger (for example, the text of the “add to cart” button). I would also like to know if the size of the cart icon can be increased in any way.
A greeting and thanks a lot

#211955 Copied Theme version: XSTORE 5.1.6.1.

5 Answers

Olga Barlow

Support staff

April 3, 2019 at 17:39

Hello,

There is no special option for this but we can help you to implement it by custom CSS. Could you, please, provide screenshot of the page with the button where you want to do this (because we have different types of add to cart button on shop and single product) or maybe provide link to page. Tell us what size you want and we’ll send you code to change it.

Regards

#211957 Copied

Sonsoles

Participant

April 3, 2019 at 18:03

Thank you!
I send you the links:
1. Here I would like to increase the size of the letter of the “add to cart” button (it is in Spanish, where it says ¡Para mi!) https://princesasconarmadura.com/product/bolso-violeta/
2. Here I would like to change the font size of the “Finish Purchase” button. https://princesasconarmadura.com/carrito/
3. Here the size of the “Finish order” button. https://princesasconarmadura.com/finalizar-compra/
4. I would also like to increase the size of the cart icon that appears in the header

I would like the font size to be 20px

A greeting and thanks a lot!

#211958 Copied
Rose Tyler

Support staff

April 4, 2019 at 08:04
Hello,

1) Add this code in Theme Options > Custom CSS > Global custom CSS of in style.css file of child-theme:
```
.single_add_to_cart_button {
    font-size:  1rem !important;
}
```
2, 3)
```
.checkout-button,
.empty-cart-block .btn,
.btn, .form-row.place-order .button {
    font-size: 1rem;
}
```
4) You can use such screenshot maker as Lightshot https://prnt.sc/
```
.navbar-header .cart-bag:before {
    font-size: 20px;
}
.navbar-header .cart-bag .badge-number {
    font-size: 12px;
}
```
Regards
#211969 Copied
KKA

Participant

February 8, 2022 at 10:03

Hi guys!
I bought the template: XStore – Multipurpose WooCommerce Theme

I would like to configure all font styles (h1, h2, h3, h4, h5, h6 and paragraph) from the backend I can’t or can’t find how to do it.

where I find how to customize the dimensions for mobile and responsive.

#316498 Copied
Olga Barlow

Support staff

February 8, 2022 at 16:46
Hello, @KKA

You can just manage the font-family for the headings from Theme Options > Typography. We did not add option to manage font-size for the headings because the general option for every heading is not suitable for design in some cases.
You can change the size of the headings using custom CSS (Theme Options > Custom CSS)
```
body {
    --h1-size-proportion: 2.5714;
    --h2-size-proportion: 1.7142;
    --h3-size-proportion: 1.7142;
    --h4-size-proportion: 1.2857;
    --h5-size-proportion: 1;
    --h6-size-proportion: 0.8571;
}
```
Increase the value of the size-proportion according to your needs. h tags size is the calculation of the 1rem* size-proportion variable.

If you want to change the size just for some element (for example only for the widget titles or for the product titles) then let me know and I’ll give you a custom code to do that.

Or use the Yellow Pencil plugin to edit the styles (XStore > Plugin installer).

Regards
#316561 Copied
Viewing 6 results - 1 through 6 (of 6 total)