Archived topic
Woocommerce single product block - styling niggles
5 replies · Started by Matt on June 23, 2020
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.
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 ?
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.
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%;
}Glorious! Thanks so much David - that set me on the right path and it now looks great.
You're welcome
