Woocommerce Product Title

Activello
1

Hello
I would like to change the font of my product titles on the shop page and on the individual product page. Do you have css for this that will enforce the change on desktop and mobile devices?
Thank you,
Lucy

2

Hi there

Hope you are having a good day and thank you for your question :slight_smile:
I need a link to your shop page and one of the single product page

Thanks!
Colorlib Support Team

3

Ok, found link to your website in other ticket,

this is css to change font for shop page and for single page product title, please note this is original css, you have to change font family in the css code

#main .product .product_title,
.woocommerce ul.products li.product a h2 {
font-family: guess sans light !important;
}
4

Thank you, Noda, this works fine on the desktop but not on mobile devices.

5

Good evening Lucy

The exact same code is applied to mobile screens as well, and I can’t see any visual differences, can you tell me more?

6

Hi Noda

Please see attached screenshots from mobile which show the title in the regular website font rather than Guess Sans Light.

Thank you,
Lucy

7

Lucy, the font is absolutely same on the mobile devices and for desktop devices, only difference what i see is font size and color, there is no other CSS code that might because this problem,

8

Noda the mobile screenshots show a different font completely…

9

Hi there,
Thanks for keeping in touch.

I have counter-checked your site both on mobile and desktop and the font seems to be the same. Could you try clearing your browser history and cache and check whether the font is applied.

I hope this helps.
Best Regards,
Support.

10

I cleared the history and the issue remains. Please see the attached images. Discovery Sessions in the font I am trying to apply to the shop product title, Discover. I hope you can see the difference.

11

Hi there,
Thanks for connecting back.
If I fully understand you on this, is it that you want to apply the font within the discovery sessions to the product title? If so, you can just use the following CSS code:

.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: ‘guess-regular’ !important;
}

Please let us know if this helps.
Best Regards,
Support.

12

No. I have applied css that was supplied above to set my product titles in my shop to Guess Sans Light. The issue is this css does not make the title show in this font on mobiles just desktops.

To highlight the issue I have sent two screenshots - the one that shows the font NOT applied to the shop product title and one that shows the font that should be applied.

I hope that’s clear. Thank you.

13

Hi there,
Thanks for keeping in touch.
In this case, could you give a try to this code and check whether the issue is resolved:

#main .product .product_title{
font-family: ‘guesssans-light’ !important;
font-style: normal;
}

I hope this helps.
Best Regards,
Support.

14

Thank you, unfortunately it still doesn’t show on a mobile device.

15

try this css:

#main .product .product_title, .woocommerce ul.products li.product a h2 {
font-family: ‘guesssans-light’ !important;
}

16

Nope! Still doesn’t make it work on a mobile.

17

Hi there,
Thanks for keeping in touch.

Could you possibly try out this code:

@media only screen and (max-width:768px){
h2.woocommerce-loop-product__title {
font-family: guess sans light !important;
}
}

I hope this helps.
Best Regards,
Support.

18

Thank you for trying but this doesn’t work either. It is a mystery!

19

Hello there,

This is strange.

Can you please add a link to the site?

Best Regards,
Support

20

Hello

https://www.theloveplace.co.uk/shop/

https://www.theloveplace.co.uk/shop/discover/

The product title shows in Guess Sans Light on all desktop devices but on no mobile devices.

Thank you,
Lucy