How to make a WooCommerce Masonry layout list shop page?

Config Thumbnails Ratio

The default Shop page layout is a standard grid. It forces all product images to stay the same size. How to make a WooCommerce masonry layout? The product images should be with the original ratio. Please go to Appearance>Customize>WooCommerce>Product Images, set “uncropped “. It would be like:

Set WooCommerce masonry layout by JS codes

Please add the JS codes into your WordPress theme :

jQuery(document).ready(function( $ ){ 
  if( $('body').hasClass('woocommerce') && $('body').hasClass('archive') ) {
  $('.main-list-inn').find('img').imagesLoaded(function(){ 
   $('.main-list-inn').isotope({ 
		itemSelector: '.main-list-item',
		layoutMode: 'packery' 
    }); 
   });
  }
}); 

To add JS codes into a WordPress theme, please refer to the tutorials( How to add custom JavaScript codes )

This codes is only for ART, Air, Arnold, and SEA WordPress themes. If you use another theme, please read the next section.

If you use another WordPress theme, please follow the 2 steps to add the JS codes:

1. import the isotope javascript files in your WordPress theme. Put isotope.pkgd.min.js in your theme folder. Add the PHP codes at end of functions.php (or by code snippets plugin):

function sea_frontend_styles() { 
    wp_register_script('sea-custom-js', 'https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js', array(), '1.0', true);
    wp_enqueue_script('sea-custom-js'); 
}
add_action('wp_enqueue_scripts', 'sea_frontend_styles',102); 

2. Find the HTML element selector name(class="selector name") on your shop page, open shop page(on your own website) by Chrome browser. Open the DevTools of Chrome: right-click on any the products list and click “Inspect”.

Here are instructions for finding the element selector in other browsers.

In the screenshot(it is a WordPress theme named Store), the parent selector is products, the itemSelector is product. If there are multiple names (separated by spaces), please enter anyone. Then the JS codes should be:

jQuery(document).ready(function( $ ){ 
  if( $('body').hasClass('woocommerce') && $('body').hasClass('archive') ) { 
   $('.products').isotope({ 
	itemSelector: '.product',
	layoutMode: 'packery' 
    }); 
   }
}); 

If the JS codes works, the gird list as masonry style should be:

Please notice: If all product original images are the same ratio, it is not fit this kind of layout.

If you still cannot solve it, please feel free to contact us.

WordPress Customization Service from $49 Only!
Save your expensive time!