[RVgeeksParticipant]

Hi,

Just thought of another question (while I’m at it, LOL!): Is it possible to have the WooCommerce Product Pages (the main SHOP page and all the category/tag archive pages) display the products using the same Isotope/Mosaic grid that’s available for the blog posts?

Several of my products have taller product images than the rest… so the rows have lots of blank space beneath the products with smaller images. So the Isotope/Mosaic grid would close those gaps up… PLUS it would have a more consistent look/feel to make it more cohesive with my blog home page (which is using the grid).

Thanks!

[ChristianModerator]

Hey there,

Please try adding the CSS below in the Apperance > Customize > Custom > Javascript.

jQuery( function() {
  
  jQuery('.products').isotope({
    itemSelector: '.product',
    masonry: {
	  columnWidth: 1
	}
  });

});

Thanks.

[RVgeeksParticipant]

Works a treat! Thanks!

One other question (gosh… I’m just FULL of ’em , ain’t I?!?!)… the Isotope layout doesn’t seem to be re-laying itself out when the window gets resized. Is there an option that I can add to the code you provided to get the layout to re-adjust when the browser window is resized?

Thanks so much! You guys ROCK!

[RadModerator]

Hi there,

To assist you with this issue, we’ll first need you to provide us with your URL as stated on the forum entrance page. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[RVgeeksParticipant]

Hmmmm… there’s only one problem… I’m working on this on a local install (MAMP) and don’t have a URL to provide. If that’s a complete obstacle, I may have to wait until I take some of these changes live on my production site so that I can provide a URL… although I would love to be able to have this resolved BEFORE then.

Thanks!

[ChristianModerator]

Hey there,

This is because Woocommerce has its own responsive style. To make it work with isotope, you need to modify those styles. Regretfully, that would fall beyond the scope of our support because that would require custom development.

Thank you for understanding.

[RVgeeksParticipant]

No problem… I understand. Thanks for pointing me in the right direction! I’ll see what I can find out from the Woocommerce team.

Appreciate the help!

[ZeshanMember]

You’re most welcome! 🙂

[Matt BParticipant]

Thank you for the Product Masonry grid code! It works great and would be a nice option in the WooCommerce Customizer settings. 🙂

– Matt

[Paul RModerator]

Hi Matt,

We certainly appreciate the feedback! This is something we can add to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive. Thanks!

[Author]

Posts