
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.