Damit die Produktauflistung in einem Woocommerce Shop im Masonry Layout dargestellt wird, wird folgender Code in die funstions.php des Childthemes oder in ein Code Snippet Plugin eingefügt.

function mein_masonry_laden() {
    wp_enqueue_script( 'masonry' );

    static $inline_done = false;
    if ( $inline_done ) return;
    $inline_done = true;

    wp_add_inline_script( 'masonry', "
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('ul.products').forEach(function (grid) {
                imagesLoaded(grid, function () {
                    new Masonry(grid, {
                        itemSelector: 'li.product',
                        percentPosition: true
                    });
                });
            });
        });
    " );
}

// Shop- und Archivseiten
add_action( 'wp_enqueue_scripts', function () {
    if ( is_shop() || is_product_category() || is_product_tag() ) {
        mein_masonry_laden();
    }
} );

// Überall, wo der [products]-Shortcode ausgegeben wird
add_action( 'woocommerce_shortcode_before_products_loop', 'mein_masonry_laden' );

Beim Astra Theme muss noch das CSS Grid überschrieben werden

.woocommerce ul.products,
.woocommerce-page ul.products {
    display: block !important;
    margin: 0 -10px;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none !important;
}
.woocommerce ul.products li.product {
    width: 33.333% !important;   /* 3 Spalten */
    float: none;
    margin: 0 0 20px !important;
    padding: 0 10px;
    box-sizing: border-box;
}
@media (max-width: 921px) {
    .woocommerce ul.products li.product { width: 50% !important; }
}
@media (max-width: 544px) {
    .woocommerce ul.products li.product { width: 100% !important; }
}

Es giibt auch eine reine CSS Lösung, allerdings laufen dann die Produkte spaltenweise von oben nach unten statt zeilenweise. Die Sortierung kann daher verwirrend wirken.

ul.products { display:block; columns: 3; column-gap: 20px; } 
li.product { width:100% !important; break-inside: avoid; }