[Resolved] Woocommerce single product block – styling niggles

[Matt]

I’ve recently moved to Woocommerce blocks and have a few styling issues I’d like some help with. The Customise > Layout options don’t seem to work on blocks. note: I’m using several different product category blocks on the custom shop page.

1. The vertical spacing of text under each product is off – there’s a Sale badge that’s way too tall and throws out formatting if the display row also contains non-sale items. Can the badge be moved above the image like the /prints/seascapes/ page?

2. The horizontal alignment of the last row is off if the last row contains only 1 or 2 products

There is a 3rd issue where vertical spacing is wildly inconsistent when different height product images are used – but I think it’s best I correct that with regenerating my images with consistent whitespace added.

[David]

Hi there,

the Theme doesn’t control the Woocommerce Blocks styles – for some reason the Woo developers decided to abandon the templates/HTML/CSS classes that they use in their theme templates and their shortcodes.

On your other product archives you’re using Elementor – would it not make sense to also use that here to achieve the same style ?

[Matt]

Oh, bummer! Does that mean the GP themes use the classic Woo implementation?

I recently recreated my elementor shop page in blocks because:
a) it did just as good a job for what I needed
b) significantly improved performance now elementor is disabled on that page

I could try the official Woo forum as they were v helpful with a recent blocks Q.

[David]

OK
Then try this;

1. Try this – adjust the top and right accordingly:

.wc-block-grid.has-3-columns .wc-block-grid__product {
    position: relative;
}
.wc-block-grid__product-onsale {
    position: absolute;
    top: 10px;
    right: 10px;
}

You have this CSS which is making the sale badge taller:

.wc-block-grid__product-onsale {
    font-family:Karla;
    font-size:15px;
    height:40px;
}

Remove the height property – instead use line-height: 1;

2. In this CSS you have added to your child theme – include the max-width property below:

.wc-block-grid.has-3-columns .wc-block-grid__product {
    flex: 1 0 31.33333%;
    padding: 20px 20px 10px;
    margin: 10px;
    max-width: 31.33333%;
}

[Matt]

Glorious! Thanks so much David – that set me on the right path and it now looks great.

[David]

You’re welcome

[Author]

Posts