[Support request] Masonry layout for WooCommerce

[Sneaky]

I know there is an old 2020 post, but I was hoping for an update.

Is there a way I can add a masonry layout to WooCommerce showing products?

If not, this would be a great addition for a future release.

[Fernando]

Are you referring to something like the Imprint template from the site library? If so, you’ll still need custom CSS for that. Here’s something you may try:

/* Staggered 3 and 4 column grid */
@media (min-width: 1024px) {

    .woocommerce ul.columns-3 li.product:nth-child(3n), .woocommerce ul.columns-3 li.product:nth-child(3n+1) {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }
    .woocommerce ul.columns-4 li.product:nth-child(2n), .woocommerce ul.columns-4 li.product:nth-child(2n+1) {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }
}

.woocommerce ul.products {
    margin-bottom: 150px;
}

/* Image border radius */
.woocommerce ul.products li.product a img {
    border-radius: 5px;
}

[Sneaky]

No, I don’t use the site library

[Fernando]

I see. The CSS should still work with no template used.

[Sneaky]

Nope 🙁

This is what I want it to look like

But even with the css you provided, it looks like (see the white space)

Thanks

[Fernando]

Sorry, forgot to mention that you’ll need to set the column number in Appearance > Customize > Layout > WooCommerce to 3.

However, for the type of masonry grid you’re aiming for, GP still doesn’t have such a functionality.

You can raise a feature request here: https://github.com/tomusborne/generatepress/issues

[Sneaky]

Thanks for trying to help.

I have submitted the feature request. I now have to see if I can use a third-party solution as I know it takes some considerable time to get new features added to GP/GP Premium.

Cheers

[Fernando]

You’re welcome Sneaky!

[Author]

Posts