Changing font size in woocommerce

Support
#1

Dear team
The font size of the product title, related products and cart are way too big. How do I change their size?
Site: shadoart.com
Thank you
Yinon

#2

Hi @yinon2b,

Thanks for writing in.

To change your font size of your product title, add this in your custom CSS:

.woocommerce div.product .summary .product_title{
font-size:10px;
}

Related product:

.woocommerce .related h2{
font-size:100%;
}

Cart font-size:

.woocommerce .button.product_type_simple:before, .woocommerce .button.single_add_to_cart_button:before{
font-size:10px;
}

Let us know how it goes.

Thanks.

#3

Thank you.
it helped indeed. Now I’m left with the cart with huge fonts. Even the “update button” is not the global size.

How can I make it look more gentle? Is there a page where I can find all the css, so I can try find the answers there, as the questions keep comming?
Thank you
Yinon

#4

Hi Yinon,

Would you mind clarifying what do you mean by making a text look more gentle?

#5

Sorry for being unclear. Simply meant adjusting the size of all font and the “update cart” button, which is bigger than the other button of the site
Thanks

#6

Hi There,

Please try adding the following CSS:

.woocommerce-cart form.woocommerce-cart-form {
    font-size: 24px;
}
#7

Thank you.
It helped partially. The upper part of the form is better now, controllable, But the lower part “cart totals” and under, as well as the “Update cart” button are still uncontrollable and big in size. How can that be fixed?
Thank you
Yinon

#8

Hi there,

Your site is inaccessible on my end, I use VPN and Proxy and still the same. But it appears to be up on this http://www.isitdownrightnow.com/shadoart.com.html

Maybe you have security firewall that blocks specific country/IP? Could you disable it this time while checking?

For the meantime, you can add this CSS as well,

.cart-collaterals, .woocommerce .cart .actions>input {
font-size: 24px;
}

Thanks!

#9

Hi
This CSS didn’t do anything.
The only I unchecked the option that makes the site invisible to search engines, hope it helps. I don’t know what else can I do to make it accessible.
If it still isn’t please send me an idiot proof instruction how to make it accessible from my end
Thank you
Yinon

#10

Hi there,

It’s best if I can directly check it, but how about this

.woocommerce-cart form.woocommerce-cart-form, .woocommerce-cart form.woocommerce-cart-form * {
font-size: 24px;
}

Thanks!

#11

It works!!
Thank you

#12

You’re welcome!

#13

Hi, I followed the same procedure and everything worked except the title of the product on the shop page. Its too big, can you let me know how to change it? thanks

#14

Hi,

You can try this code instead.

/* Shop Index Page */
.woocommerce li.product .entry-header h3 {
   font-size:20px !important;
}
/* Single Product Page */
.woocommerce div.product .summary .product_title {
   font-size:20px !important;
}

Feel free to change the font size as you wish.

Thanks

#15

This worked. thanks.
I dint see your reply so i have created a new thread, can you please closed it or delete it? Thanks a lot.
and one more. Can you help me make the Archive title make smaller in category section or no display of it.
and also i dont want to display pages name on the top of the pages i created.
TIA.

#16

Hey There,

Since this is not your own thread and this one is getting too long. I have answered your questions on your own thread. Let’s take it there.

Thanks,