How to make a masonry product items list for the WooCommerce shop page?

This article fits the Air, Arnold, Za,  ART and SEA theme.

The default Shop page layout is a standard grid. It forces all product images to stay the same size. But if you want to show the product images with the original ratio. Please go to Appearance>Customize>WooCommerce>Product Images, set “uncropped “. It would be like:

If you want to create a masonry style list, please refer to the tutorials( How to add custom JavaScript codes ) to add the JS codes:

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

The JS codes will make the gird list as masonry style:

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

Was this article helpful?

Yes No

Related Articles