Snippets: Apply Masonry Layout to WooCommerce Shop

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