title: Masonry not working on Woocommerce shop page
body: <p>I'm building a stock photo site and it is (I think) good to show only pictures on the shops home page.
  I figured out how to hide the Titles, Prices and Buttons (with remove_action) in my twentytwelve child theme (functions.php)</p>
  
  <p>Now on adding masonry. I added a bit of code (a snippet from James Koster) to enqueue the WP build in Masonry script.</p>
  
  <pre><code>add_action( 'wp_enqueue_scripts', 'jk_masonry' );
       function jk_masonry() {
       wp_enqueue_script( 'jquery-masonry', array( 'jquery' ) );
  }
  </code></pre>
  
  <p>I added the following code to my footer.php and I can see in the markup that it is loaded.</p>
  
  <pre><code>&lt;script&gt; 
      jQuery(document).ready(function($) {
           $('#content').masonry({
               itemSelector: 'products',
               isAnimated: true;
           }); 
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>No changes on my page.</p>
  
  <p>I added this to my child theme styl.css:</p>
  
  <pre><code>.woocommerce ul.products li.product, 
  .woocommerce-page ul.products li.product,
  #primary ul.products li.product{
      margin-right: 3px;
      margin-bottom: 3px;
  }
  </code></pre>
  
  <p>Sadly, no effect on my page. No Masonry effects, no changes in the margins of the items. See screenshot.
  <img src="https://i.stack.imgur.com/cSqIN.png" alt="enter image description here"></p>
  
  <p>The question is: were to go from here. I've searched the internet, found several possibilities but it seems to be that I don't understand it. (newbie) I'm looking for a result as shown here: <a href="http://www.masonrylayout.com/masonry-theme-demo/lhotse/" rel="nofollow noreferrer">lhotse masonry</a>.</p>
  
  <p><strong>EDIT: html output</strong></p>
  
  <pre><code>&lt;div id="primary" class="site-content"&gt;&lt;div id="content" role="main"&gt;
  
      &lt;div class="page-description"&gt;&lt;div class="post-text"&gt;&lt;/div&gt;
          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;ul class="products"&gt;
          &lt;li class="post-70 product type-product status-publish has-post-thumbnail first sale taxable shipping-taxable purchasable product-type-simple product-cat-posters product-tag-adri instock"&gt;
              &lt;a href="http://localhost/shop/flying-ninja/"&gt;
                  &lt;img width="600" height="600" src="http://localhost/wp-content/uploads/2013/06/poster_2_up-600x600.jpg" class="attachment-shop_catalog wp-post-image" alt="poster_2_up" /&gt;
      &lt;/a&gt;
          &lt;/li&gt;
  
  &lt;!-- Following items--&gt;
  
      &lt;/ul&gt;
  </code></pre>
  
  <p><strong>END EDIT</strong></p>
  
  <p><strong>EDIT NR. 2</strong></p>
  
  <p>Yesterday I learned a method to override the standard woocommerce css files. If curious... throw me a line. However in the case of my problem it is only a bit of the solution. As formerly stated I want to use masonry on my woocommerce shoppage. The way it works looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/H3JG8.png" alt="enter image description here"></p>
  
  <p>As you can see there are 4 columns to fill the total widht of the surrounding div. However Masonry did not kicked in. When I resize my browser window to a smaller size the images are not resizing. (responsive) till a certain screen width. Then suddenly the layout changes to a 3 column layout <strong>and masonry kickes in.</strong> See screenshot.
  <img src="https://i.stack.imgur.com/vsvS7.png" alt="enter image description here">
  The change to 3-columns must have something to do with css.... however I can't figure out what. Silly me.
  Then when resizing the screen further (smaller) The layout went to two columns (that's understandable) but masonry stops working. See screenshot.
  <img src="https://i.stack.imgur.com/1Qqdq.png" alt="enter image description here"></p>
  
  <p>I did expect a working masonry and responsive layout.</p>
  
  <p><strong>END EDIT 2</strong></p>
  
  <p>Im totally stucked here.</p>
  
  <p>Any help is very, very much appreciated. Thanks in advance.</p>