Return to previous page

Change font size and - by nic_and_mel - on WordPress WooCommerce support

This topic has 13 replies, 2 voices, and was last updated 9 years, 7 months ago ago by Eva Kemp

nic_and_mel

Participant

April 16, 2015 at 17:16

Hello!

I would like to change the font size on som areas of my web (I have managed to change the default font from Raleway to Brandon Grotesque by making changes to the style.css and the custom.css). I know that I can change the font size, color and so on in the custom.css, and have managed this for the menu and a few other things. However, for some items, I do not really fint the tag I should use. I ty to use web-inspector to find the correct tag easily for the text I want to change, but for some items I do not seem to find the correct tag.

Some of the fonts I would like to change is the text in the footer, since it is to small now, both the headlines and the regular text.

I also want to change the size of the font under recent posts (the excerpt), both the headlines and the regular text.

There are also other texts I want to change, and I would like to know the easiest way to find the correct tags for each text element.

I think that changing the different font elements is a bit tricky in your theme, ans I have worked with others where it is easier in just the theme settings. Are you planning on updating the font-handling?

I also noticed that the arrows for the scrolling on recent posts and featured items looks wrong. What can have happened with those?

Thank you in advance.

Please, contact administrator
for this information.

#57527 Copied Theme version: 1.4 WooCommerce version: 2.3.7

12 Answers
Eva Kemp

Support staff

April 16, 2015 at 18:33
Hello,

To change font size in footer use this code in custom.css file:
```
.main-footer .textwidget p {
    font-size: 24px !important;
}
```
```
.main-footer .widget-title span {
    font-size: 20px;
}
```
For recent posts:
```
.recentCarousel .slide-item .caption p {font-size: 20px;}
.recentCarousel .slide-item .caption a {font-size: 25px;}
```
To fix slider arrows use this code:
```
.carousel-area .owl-controls .owl-next::before, .carousel-area .owl-controls .owl-prev.disabled::before, .carousel-area .owl-controls .owl-prev::before {
top: 10px !important;
}
```
Thank you.
Regards,
Eva Kemp.
#57542 Copied
nic_and_mel

Participant

April 16, 2015 at 20:26

Thank you for the info. It worked nicely.

Do you have any suggestion on what is the easiest way to find each tag for each element? Do I have to check the code for each item I want to change and then add it to custom.css. Its bit tricky sometimes.

If I just know this, I have no problem changing the size, font and so on.

I have one additional question: On the single product page, There is no product name visible. It is visible on the category-pages, on the quick view, but not on the product page. Please let me know how to solve this so the product name headline is visible on the product page as well.

Thank you in advance.
Best regards
Daniel

#57557 Copied
Eva Kemp

Support staff

April 16, 2015 at 20:46
Hello,

You can find what element to customize via “Inspect Element” with right mouse click in a browser.
To display product title add this code in custom.css file:
```
.product-information .product_title {
    display: block !important;
}
```
Regards,
Eva Kemp.
#57563 Copied
nic_and_mel

Participant

April 17, 2015 at 08:21

Hello, and thank you for the information.

Just a qusetion: How come I need to add the code to show the title? Should this not show automatically as part of the theme?

Also, I have used inspect element to find out what element to customise. Sometimes it id hard to know exactly what element is the correct one. Is it an easy way?

/D

#57629 Copied

nic_and_mel

Participant

April 17, 2015 at 08:26

And one more thing regarding the placement of the arrows for scrolling left/right, they now look correct for the slider on the start-page (for featured products/new products tab and recent posts). However now the arrows for next/prev product on single product page look wrong.

How come I need to add a code for this at all to fix it, since it was correct before?

Best regards
Daniel

#57631 Copied

Eva Kemp

Support staff

April 17, 2015 at 09:22

Hello,

Unfortunately there is no easier way to find what element to customize.
Concerning the product title, it is removed by default in the theme. So to get it back you need add that code.
Please provide us with a page link where you see problems with arrows.

Thank you.
Regards,
Eva Kemp.

#57640 Copied

nic_and_mel

Participant

April 17, 2015 at 16:26

Hello!

Here is a page where the arrows are wrong (they are wrong on all other single product pages as well).

http://www.nicandfriends.com/?product=bracelet-test-03

You need to log in using the provided creditiials in the private content, since the page is under construction.

Please, contact administrator
for this information.

#57769 Copied

Eva Kemp

Support staff

April 17, 2015 at 16:49

Hello,

Please add this code in custom.css file:
.product-navigation .prev-product::before, .product-navigation .next-product::before { top: 5px !important; }

Thank you.
Regards,
Eva Kemp.

#57773 Copied

nic_and_mel

Participant

April 20, 2015 at 06:58

Thank you, it worked.

However I am curious why I have to add this, since it used to be correct, and there should not be the need for a custom css to have the arrows correct. They must be correct using the default theme, no?

Why have they become wrong?

Best regards
Daniel

#57961 Copied

Eva Kemp

Support staff

April 20, 2015 at 10:05

Hello,

To get the answer requires long-time investigation. Perhaps some plugin is causing the conflict or other custom style changes.
Is your issue resolved now?

Thank you.
Regards,
Eva Kemp.

#57999 Copied

nic_and_mel

Participant

April 20, 2015 at 20:15

Yes, thank you 🙂

One last question regarding this: If I would like to remove prev/next arrows for the products, how do I do this?

Best regards
Daniel

#58190 Copied
Eva Kemp

Support staff

April 20, 2015 at 20:39
Hello,

You need add this code in custom.css file:
```
.product-navigation .product-arrows {
    display: none;
}
```
Regards,
Eva Kemp.
#58204 Copied
Tagged: change, customize, font, size, themes, woocommerce, wordpress
Viewing 13 results - 1 through 13 (of 13 total)