Masonry layout for WooCommerce

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;
}

No, I don't use the site library

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

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

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

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

You’re welcome Sneaky!