Move the category title below the category img & change font of product title

This topic has 6 replies, 2 voices, and was last updated 6 years, 1 months ago ago by Rose Tyler

  • Avatar: strangehaven
    strangehaven
    Participant
    November 4, 2018 at 18:55

    Two Questions/Issues:

    #1 On the home page – I want to move the title of the category that by default shows up in a white block on the category image – and move it to the bottom of the category image.

    I tried the following code found in another post

    .products-grid .product-category .categories-mask {
        bottom: -75px;
    }
    .products-grid .product-category {
        margin-bottom: 60px;
    }

    But this made no changes. =/

    #2
    Also I want to change the product title to the font Im using on my site “Trebuchet MS” with the H4 font size.

    Thanks much for your help!

    5 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    November 5, 2018 at 10:48

    Hello,

    Please provide us with your site URL so we can take a closer look.

    Regards

    Avatar: strangehaven
    strangehaven
    Participant
    November 5, 2018 at 20:30

    http://www.thestrangehaven.com

    The fonts that I want to change are on the home page where you see it says “Featured Products, Popular Products, New Arrivals, Last Minute” and then the product title themselves are in a different font than the ones selected in the theme.

    On the shop page I want to change the product title to the font “Trebuchet MS” with the H4 font size.

    #2 – the categories on the home page title to show on the bottom of the product image instead of in a white box on top of the image.

    Thanks again!

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    November 6, 2018 at 10:46

    Hello,

    1) Add this code in Custom css for page

    .product-category .categories-mask {
        bottom: -80px;
        padding: 0;
    }
    .product-category {
        margin-bottom: 60px;
    }

    http://prntscr.com/ley4lw
    2) Theme Options > Styling > Custom css > Global custom css:

    .product .product-details .product-title a {
        font-family: 'Trebuchet MS', Helvetica, sans-serif;
        font-size: 16px;
    }

    Regards

    Avatar: strangehaven
    strangehaven
    Participant
    November 8, 2018 at 18:31

    Thanks! The fix to move the text below the product image worked, as well as the font on the product titles, however the text on the home page that says ““Featured Products, Popular Products, New Arrivals, Last Minute” still is in a different font.

    See my homepage http://www.thestrangehaven.com

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    November 9, 2018 at 10:19

    You’re welcome!

    .products-tabs .wpb_tabs_nav li > a {
        font-family: 'Trebuchet MS', Helvetica, sans-serif;
    }
    

    Regards

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

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

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