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, 10 months ago ago by Eva Kemp

  • Avatar: nic_and_mel
    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
    Avatar: Eva
    Eva Kemp
    Participant
    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
    Avatar: nic_and_mel
    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
    Avatar: Eva
    Eva Kemp
    Participant
    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
    Avatar: nic_and_mel
    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
    Avatar: nic_and_mel
    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
    Avatar: Eva
    Eva Kemp
    Participant
    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
    Avatar: nic_and_mel
    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
    Avatar: Eva
    Eva Kemp
    Participant
    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
    Avatar: nic_and_mel
    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
    Avatar: Eva
    Eva Kemp
    Participant
    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
    Avatar: nic_and_mel
    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
    Avatar: Eva
    Eva Kemp
    Participant
    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: , , , , , ,

  • Viewing 13 results - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.Log in/Sign up

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Corporate – WordPress WooCommerce Theme
lazy-placeholder
Interior Store – WooCommerce Theme
lazy-placeholder
Bike Store – WordPress WooCommerce Theme
lazy-placeholder
Organic Cosmetics Store – WordPress WooCommerce Theme
lazy-placeholder
Minimal Store – WordPress WooCommerce Theme
lazy-placeholder
Minimal Fashion Store – WordPress WooCommerce Theme
lazy-placeholder
Glasses Store – WordPress WooCommerce Theme
lazy-placeholder
Cocktails Store – WordPress WooCommerce Theme
lazy-placeholder
Car Parts Store – WordPress WooCommerce Theme
lazy-placeholder
Interior – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.