Masonry layout isn't supported by default on the WooCommerce shop because it could cause issues with 3rd party scripts but it's possible to enable this layout with a little code in your child theme's functions.php file.
Updated for Total v5.3+
// Load the isotope (masonry) scripts on the shop.
add_action( 'wp_footer', function() {
if ( function_exists( 'wpex_is_woo_shop' )
&& function_exists( 'wpex_is_woo_tax' )
&& ( wpex_is_woo_shop() || wpex_is_woo_tax() )
) {
wpex_enqueue_isotope_scripts();
}
} );
// Alter css grid classes and add new masonry grid class to the shop.
add_filter( 'wpex_woo_loop_wrap_classes', function( $classes ) {
if ( $classes && is_string( $classes ) ) {
$classes .= ' wpex-masonry-grid';
$classes = str_replace( 'wpex-grid', 'wpex-row', $classes );
$classes = str_replace( 'wpex-gap', 'gap', $classes );
}
return $classes;
} );
// Modify product entry class to add masonry columns and column width classes.
add_filter( 'post_class', function( $classes, $class = '', $post_id = '' ) {
if ( is_array( $classes )
&& function_exists( 'wpex_is_woo_shop' )
&& function_exists( 'wpex_is_woo_tax' )
&& ( wpex_is_woo_shop() || wpex_is_woo_tax() )
) {
$classes[] = 'col';
$classes[] = 'wpex-masonry-col';
if ( function_exists( 'wpex_row_column_width_class' ) ) {
$classes[] = wpex_row_column_width_class( get_theme_mod( 'woocommerce_shop_columns', '4' ) );
}
}
return $classes;
}, 60, 3 );