[Resolved] Merch Best Sellers block displaying 2 products in one column instead of 3

[Alan]

Hello,

I have imported the Merch template and the Best Sellers/Top Rated or whatever I choose only shows 2 producs in one column and the third one gets moved to a row below.

Even if I set to 4 columns, there are 3 products and the 4th is in another row.

Row settings are always set to 1.

Any help?

[FunkyCss]

I have the same issue

[Alan]

Seems to be a general problem then, hopefully just a small fix.

[Leo]

Hi there,

Give this CSS a shot:

.wc-block-grid.has-3-columns .wc-block-grid__product {
    flex: 1 0 calc(33% - 16px);
}

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

The percentage depends on the column number.

Let me know if this helps 🙂

[Alan]

Works well with 3 columns, haven’t tried more but will report back if any issues occur.

EDIT: Only works with 3 columns, but thanks. Any general fix for more than 3?

Thanks!

[Leo]

Did you change the percentage number as suggested above?

For 4 columns it would be 25%. 5 columns would be 20%.

[Alan]

Actually even if you change the percentage it doesn’t work properly for 4 columns.

EDIT:

This works, you gotta fix the class name aswell.

.wc-block-grid.has-4-columns .wc-block-grid__product {
    flex: 1 0 calc(25% - 16px);
}

[Leo]

Ahh right sorry forgot to mention that part.

Glad you figured out 🙂

[Author]

Posts