Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • January 13, 2014 at 1:20 pm #208910
    eric_peeters

    Hello sweet support guru’s,

    Would it be possible to change the font size of the category names in Woocommerce? Also, we would like the names to be in the same style as one of the titles on our homepage, (it’s called ‘special title’ in WordPress, which adds a horizontal line) See: https://www.peetersduurzaam.nl/ , “Waarom Peeters Duurzaam?”

    The category names are under the category-images, could we put the names above the images?

    Thank you so much in advance!

    Kindest regards, Pim and Gonneke

    January 13, 2014 at 2:52 pm #208952
    Ismael

    Hey eric_peeters!

    I’m a bit confused about the category names. Is this the category inside the single product view or the title of the category page? Can you please post a a link to the actual page or category names?

    Best regards,
    Ismael

    January 13, 2014 at 2:58 pm #208957
    eric_peeters

    Dear Ismael,

    https://www.peetersduurzaam.nl/webshop-2/ The category names on this page are Warmtepompen, Zonnestroom and Zonnewarmte. For every category or subcategory (all listed in the sidebar) the names are shown this way. We would like the font size to be bigger, and the font style to be as “Waarom Peeters Duurzaam?” on our homepage, with the horizontal line behind te words.

    Also, the names are below the thumbnails, could we put the thumbnails below the names?

    Kind regards,

    Pim and Gonneke

    January 13, 2014 at 3:09 pm #208964
    Ismael

    Hi!

    Please add this on your custom.css or Quick CSS to change the category names:

    .products .product h3 {
padding-top: 5px;
font-size: 15px;
line-height: 18px;
font-weight: normal;
margin: 0;
font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif;
font-weight: 600;
text-transform: uppercase;
}

    You can move the category title using this:

    .product-category a h3 {
position: absolute;
top: 0;
}

.product-category a img {
position: relative;
top: 30px;
}

    Regards,
    Ismael

    January 13, 2014 at 3:20 pm #208972
    eric_peeters

    Hi Ismael,

    Thank you for your response, we have added the line to the quick CSS and the font size is bigger now. However, the font size of the single product names has changed too, and we only want the category- and subcategory names to be bigger. Also, would it be possible to add the horizontal line as shown on our homepage https://www.peetersduurzaam.nl/ in “Waarom Peeters Duurzaam?”

    Kind regards,

    Pim and Gonneke

    January 14, 2014 at 5:30 pm #209546
    Devin

    Hi!

    You can tweak the css a bit to only target your archive pages like this:

    
#top.archive .products .product h3 {
padding-top: 5px;
font-size: 15px;
line-height: 18px;
font-weight: normal;
margin: 0;
font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif;
font-weight: 600;
text-transform: uppercase;
}

    The horizontal line however isn’t doable through support as you would need to add a custom function to filter the category name output to add the additional html needed to get the same effect.

    Cheers!
    Devin

    January 14, 2014 at 8:46 pm #209661
    eric_peeters

    Great, thank you!

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Change Woocommerce category name font size and style’ is closed to new replies.