Woocommerce Blocks – products not aligned on same row

[Louis Stanford]

I’ve added a Woocommerce Blocks Product grid on my home page. I’ve configured it as a 3-column block, but only two products appear on the first line, and the 3rd product is on the next line.

I’ve added the following custom CSS as per one of your other KB articles:

`li.wc-block-grid__product
{
padding: 20px;
background: #333333;
border-radius: 5px;
background-color: white;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
Margin: 10px;
flex: 1 0 calc(30% – 16px)

}’

I don’t know whether this is a theme flex issue, or a Woocommerce Blocks issue. Would appreciate a nudge in the right direction.

[David]

Hi there,

it is related to that CSS:

li.wc-block-grid__product {
    padding: 20px;
    background: #333333;
    border-radius: 5px;
    background-color: white;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    Margin: 10px;
    flex: 1 0 calc(30% - 16px) !important; /* Add !important here */
}

See the last line add the !important statement – looks like woo has made a few changes to the block plugin again.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Louis Stanford]

Spot on, worked first time! I’ll also log a ticket with the Woocommerce guys, this is not the first time this plugin has caused problems.

Thanks again!

[David]

To be fair its the custom styling that is causing the issue.
They have changed the specificity of their own CSS – which is fine – it just meant the custom CSS had to be bumped up another level.

Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts