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.

// Load isotope scripts on the shop pages
add_action( 'wp_footer', function() {
	if ( wpex_is_woo_shop() || wpex_is_woo_tax() ) {
		wpex_enqueue_isotope_scripts();
	}
} );

// Add masonry classname to WooCommerce grid
add_filter( 'wpex_woo_loop_wrap_classes', function( $classes ) {
	if ( is_array( $classes ) ) {
		$classes[] = 'wpex-masonry-grid';
	} else {
		$classes .= ' wpex-masonry-grid';
	}
	return $classes;
} );

// Add masonry class to woo entries
add_filter( 'post_class', function( $classes, $class = '', $post_id = '' ) {
	if ( wpex_is_woo_shop() || wpex_is_woo_tax() ) {
		$classes[] = 'isotope-entry';
	}
	return $classes;
}, 60, 3 );