WooCommerce Product Thumbnails Stack to Masonry Format

Support
#1

Greetings from Pixel Boss Stock Photography!

We are running the current version of X-Theme and we are having trouble getting our Woocommerce product thumbnails to stack in masonry format.

Every time a vertical image appears in the layout, a huge gap is created with lots of empty space. This definitely looks really tacky.

We are looking for some custom CSS which will help us stack our images in a nice looking masonry format, where all thumbnail images float to the top and no vertical gaps are created.

Any help will be most appreciated. Many thanks!

#2

Hi there,

Thanks for writing in.

Masonry layout is only applicable in blog and portfolio. It’s not applicable for Woocommerce since it has its own template structure. As much as possible, we’re trying to retain Woocommerce standard so we only style it based on theme/stack but the Wocommerce structure is still there.

Here is the code for masonry


  jQuery(document).ready(function($) {


    var $container = $('.products.cols-3');

    $container.before('<span id="x-isotope-loading"><span>');

    $(window).load(function() {
      $container.isotope({
        itemSelector   : '.products.cols-3 > li',
        resizable      : true,
        filter         : '*',
        containerStyle : {
          overflow : 'hidden',
          position : 'relative'
        }
      });
      $('#x-isotope-loading').stop(true,true).fadeOut(300);
      $('.products.cols-3 > li').each(function(i) {
        $(this).delay(i * 150).animate({'opacity' : 1}, 500);
      });
    });

    $(window).smartresize(function() {
      $container.isotope({  });
    });

  });

But this isn’t gonna work since there styling and structure that against the structure. How about uploading uniform images?

Thanks!

#3

Hi there and thanks for your help. I’ve implemented the code and you’re right, it doesn’t work. Is there anything more we can do? We have a large portfolio of images already on our site and there’s no way we can go back and redo every single image in a uniform size. Certainly Woocommerce has some sort of provision for different image sizes? Virtually every image-based platform out there (flickr, istock, 500px) is adapted to the myriad image sizes of the photography world. . . Stuffing everything into the same square doesn’t make sense for so many reasons. Any other bits of code that can get this masonry format up and running would be most appreciated. Cheers!

#4

Hi again,

This can be done via CSS, just add the following CSS code in the Theme Options > Global CSS or in the Customizer via Appearance > Customize > Custom > Edit GLOBAL CSS

.woocommerce .products.cols-3 {
  -moz-column-width: 20em !important;
  -webkit-column-width: 20em !important;
  -moz-column-gap: 1em !important;
  -webkit-column-gap: 1em !important;
  margin: 0 !important;
}

.woocommerce .products.cols-3 li.product {
  float: none !important;
  display: inline-block !important;
  margin: 0.25rem !important;
  padding: 1rem !important;
  width: 100% !important;
  background: #efefef !important;
}

Hope this helps. Cheers!