Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] Styling Woocommerce's product page (e.g. headings and fonts)

Home Forums Support [Resolved] Styling Woocommerce's product page (e.g. headings and fonts)

Home Forums Support Styling Woocommerce's product page (e.g. headings and fonts)

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #588034
    Shaun

    Hi again David, apologies for so many support requests. Right now I’m trying to style my product page, like so: https://swordsandstationery.com/product/codenames/

    There are a few things I’m unsure of:
    1a) I want to change the size of ‘Related Products’, but I don’t know how to do so. Tried mucking around with Customizer, but to no avail.
    1b) I would like to change ‘Related Products’ to ‘You may also like…’ if that’s possible.
    2a) I want to get rid of the gigantic ‘Description’ and ‘Additional Information’ texts. They are redundant given that the tabs already point that out.
    2b) Is it possible to shift the tabs to the left, instead of having them be in the centre?

    Thanks again for your help, David!

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #588044
    David
    Staff
    Customer Support

    Hi Shaun, we’re here to help (where possible):

    1a. This defaults to 4 columns, so how many columns would you require?
    1b. If you use the Linked Product Upsells – then this will be displayed as ‘You may also like…’. Let me know if not ill see if the text Related Products can be filtered.
    2a. and 2b. Use this CSS:

    .woocommerce-Tabs-panel h2 {
    display: none;
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs {
    text-align: left;
    }
    #588047
    Shaun

    Hey David,

    1a. Not the columns, sorry. I meant the text itself. I believe it takes after the H2 font property, which is fine if it’s a blog post, but here it’s too huge 😐
    1b. Where can I find ‘Linked Product Upsells’?

    2a/2b. The CSS code works beautifully, thank you!

    #588053
    David
    Staff
    Customer Support

    OK. so change the headings like so:

     .upsells h2,
     .related h2 {
         font-size: 16px;
     }

    Edit the product and in Product data meta > Linked Products you can set Upsells and Cross Sells.

    #588071
    Shaun

    Nice! It’s working out well so far. Another question: how can I style the columns in Related Products? I would like to increase the gap between each column (and thus make each image smaller, I’m guessing).

    #588081
    David
    Staff
    Customer Support

    The easiest way would be to make it 5 columns wide (the default / fixed is 4):

    .woocommerce .wc-related-upsell-columns-4 .related ul.products li.product, 
    .woocommerce .wc-related-upsell-columns-4 .up-sells ul.products li.product {
        width: 16.2%;
    }
    #588108
    Shaun

    Woohoo! Got the width just right after playing around with it a bit. One last question: how do I increase the top padding of the Related Products box?

    #588113
    David
    Staff
    Customer Support

    Hi Shaun, you can target the related container like so:

    .related {
    padding-top: 10px;
    }

    The width i provided above was an exact number, as woo add’s 3.8% right margin so the two combined add up to 20% which creates an equal 5 columns. So be careful adjusting that figure without adjusting margins or you may end up with some unsightly gaps…..

    #588148
    Shaun

    And with that, I have solved the last of my product page issues. Thanks again David, really appreciate your patience in helping me through the process.

    #588220
    David
    Staff
    Customer Support

    You’re welcome Shaun. glad to be of help

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.