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

[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!

[David]

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;
}

[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!

[David]

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.

[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).

[David]

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%;
}

[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?

[David]

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…..

[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.

[David]

You’re welcome Shaun. glad to be of help

[Author]

Posts