Snippet: Apply Masonry Layout to WooCommerce Shop

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