Masonry not working on Woocommerce shop page - php

Question

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)
Now on adding masonry. I added a bit of code (a snippet from James Koster) to enqueue the WP build in Masonry script.
add_action( 'wp_enqueue_scripts', 'jk_masonry' );
function jk_masonry() {
wp_enqueue_script( 'jquery-masonry', array( 'jquery' ) );
}
I added the following code to my footer.php and I can see in the markup that it is loaded.
<script>
jQuery(document).ready(function($) {
$('#content').masonry({
itemSelector: 'products',
isAnimated: true;
});
});
</script>
No changes on my page.
I added this to my child theme styl.css:
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
#primary ul.products li.product{
margin-right: 3px;
margin-bottom: 3px;
}
Sadly, no effect on my page. No Masonry effects, no changes in the margins of the items. See screenshot.
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: lhotse masonry.
EDIT: html output
<div id="primary" class="site-content"><div id="content" role="main">
<div class="page-description"><div class="post-text"></div>
<p> </p>
</div>
<ul class="products">
<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">
<a href="http://localhost/shop/flying-ninja/">
<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" />
</a>
</li>
<!-- Following items-->
</ul>
END EDIT
EDIT NR. 2
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:
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 and masonry kickes in. See screenshot.
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.
I did expect a working masonry and responsive layout.
END EDIT 2
Im totally stucked here.
Any help is very, very much appreciated. Thanks in advance.

Answer 1

At first I needed to override the standard woocommerce css behavior. As mevius suggested in the comments above this was a possibility. So I dequeued the styles, copied the files into my /childtheme/woocommerce/css folder en enqueued them on this new location. This way when an update is coming out the css files are not overwritten. Here is the code for the functions.php of my child theme:
add_filter( 'woocommerce_enqueue_styles', 'jk_dequeue_styles' );
function jk_dequeue_styles( $enqueue_styles ) {
unset( $enqueue_styles['woocommerce-general'] ); // Remove the gloss
unset( $enqueue_styles['woocommerce-layout'] ); // Remove the layout
unset( $enqueue_styles['woocommerce-smallscreen'] ); // Remove the smallscreen optimisation
return $enqueue_styles;
}
function wp_enqueue_woocommerce_style(){
wp_register_style( 'woocommerce-layout', get_stylesheet_directory_uri() . '/woocommerce/css/woocommerce-layout.css' );
if ( class_exists( 'woocommerce' ) ) {
wp_enqueue_style( 'woocommerce-layout' );
}
wp_register_style( 'woocommerce-smallscreen', get_stylesheet_directory_uri() . '/woocommerce/css/woocommerce-smallscreen.css' ,array(),'4.0.1','only screen and (max-width: 768px)' );
if ( class_exists( 'woocommerce' ) ) {
wp_enqueue_style( 'woocommerce-smallscreen' );
}
wp_register_style( 'woocommerce-general', get_stylesheet_directory_uri() . '/woocommerce/css/woocommerce.css' );
if ( class_exists( 'woocommerce' ) ) {
wp_enqueue_style( 'woocommerce-general' );
}
}
To get masonry working I added the following to my functions.php just above the dequeueing and enqueuing of the woocommerce style sheets.
add_action( 'wp_enqueue_scripts', 'jk_masonry' );
function jk_masonry() {
wp_enqueue_script( 'jquery-masonry', array( 'jquery' ) );
}
and I put this code in my child themes footer.php:
<script>
jQuery(document).ready(function($) {
$('.products').masonry({
itemSelector: '.product',
isAnimated: true
});
});
</script>
Next I had to change some styles in the woocommerce css files.
I changed the rules below to: (just perform a search in your css files)
In woocommerce.css:
.woocommerce .products ul li,
.woocommerce ul.products li,
.woocommerce-page .products ul li,
.woocommerce-page ul.products li {
list-style: none;
width: 24.3%;
margin-right: 8px;
margin-bottom: 8px;
}
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
width: 100%;
height: auto;
display: block;
-webkit-transition: all ease-in-out .2s;
-moz-transition: all ease-in-out .2s;
-o-transition: all ease-in-out .2s;
transition: all ease-in-out .2s;
}
Some of the above ar just cosmetic.
In the woocommerce-layout.css file:
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
float: left;
margin: 0 8px 8px 0;
padding: 0;
position: relative;
width: 24.5%;
}
and in the woocommerce-smallscreen.css :
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
width: 48%;
float: left;
clear: both;
margin: 0 2px 2px 0;
}
#media screen and (max-width: 450px) {
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
width: 100%;
float: left;
clear: both;
margin: 0 0 2px 0;
}
}
As far as I can tell works this quite good. Responsivness is ok. Even the images are animating to their new positions when resizing the screen. Good luck with it.