[Chantal]

How can I change the font of headers on product pages? Ashe shows a different font for H2 headers on woocommerce product pages then other (blog) pages. See example: https://www.chelise.nl/webshop/winter-speurtocht/.

I don’t like this font because it’s hard to read. I would like it to be the same as the headers on my other pages. For example: https://www.chelise.nl/doelen-bereiken/. What is also weird, is that H3 headers look different then H2 headers. It’s not uniform (much bigger, different font). It doesn’t look good on a product page.

But I can’t find a way to change the font. There’s no option in the customizer menu. Please advice.

 

[vako]

Hi Chantal,

 

Sorry for the late reply we have been on holidays

To be honest we cant find the differences when we load your website, as you can see from this screenshot: https://prnt.sc/1BWgMxgQPlio all heading fonts have the same Font Family there is only a difference in font size.

Kind Regards

[Chantal]

Hi Vako,

I think there´s a misunderstanding. I mean the H2 header on a product page. See screenshot:

[vako]

Hi Chantal,

 

Now we see it more clearly! There is 1 major difference the h2 title on the product page is uppercase and on the post page is capitalized, so this difference makes feeling that they are different fonts when they are the same. In the screenshot below, we will remove an uppercase style from the h2 title on the product page and you can see they are the same: https://prnt.sc/Ufmmkz5xGGkE

Kind Regards

[Chantal]

Hi Vako,

Yes I understand it is uppercase, but how do I change this? In the backend there is no uppercase. The theme automatically displays an uppercase “font”. I don’t like it. Is there a way to change the settings?

[vako]

Hi Chantal,

 

Please navigate to Dashboard > Appearance > Customize > Additional CSS and add the CSS snippet below:

.woocommerce div.product .woocommerce-tabs .panel > h2 {

text-transform: capitalize !important;

}

Kind Regards

[Chantal]

Hi Vako

Thank you. The uppercase is now gone, but still the headers don´t look the same. They are much smaller. And also every word starts with a capital now. For example: https://www.chelise.nl/webshop/babyshower-invulkaarten-blauw/?

[Chantal]

Here´s an example: https://www.chelise.nl/wp-content/uploads/2025/01/H2-header-woocommerce-0901.png

[vako]

Hi Chantal,

 

Please navigate to Dashboard > Appearance > Customize > Additional CSS and add the CSS snippet below:

h2 {

text-transform: capitalize !important;

font-size: 36px !important;

}

Kind Regards

[Chantal]

Hi Vako,

Unfortunately, using this code doesn’t give the desired result. From a readability perspective, I do not understand the choice for uppercase titles. What can be done? Is it possible to report this to the development team? For a permanent solution :-)?

[vako]

Hi Chantal,

 

This thread is already redirected to the dev team, they will contact you with the best possible solutions to this case.

Kind Regards

[George]

Hi again,

Can you provide temporary access to your site ?
I’ll try to apply all the styles myself, it’ll make the process easier.

Please don’t forget to mark your reply as private where login details will be shared

Kind regards,
George

[Author]

Posts