<h3>Turn Your Product Grid Into a Pinterest-Style Showcase</h3>
<p>Standard WooCommerce product grids force all your products into identical boxes. Tall products get cropped. Wide products look cramped. Your carefully shot product photos lose their impact, and your store looks like every other online shop.</p>
<p><strong>Product Collection Masonry</strong> changes that.</p>
<h3>What You Get</h3>
<ul>
<li><strong>Pinterest-style layouts</strong> that let products flow naturally at their true proportions</li>
<li><strong>Complete mobile control</strong> with independent settings for 6 screen sizes</li>
<li><strong>Featured product highlighting</strong> by spanning items across multiple columns</li>
<li><strong>Intelligent targeting</strong> with “in a Row” (column-based) or “in this Grid” (traditional) modes</li>
<li><strong>Zero risk</strong> because disabling the plugin leaves your store working normally</li>
</ul>
<hr />
<h3>How It Works</h3>
<p>This plugin extends the WooCommerce Product Collection block you already use. There is nothing new to learn.</p>
<ol>
<li>Select your Product Collection block in the editor</li>
<li>Turn on masonry in the sidebar</li>
<li>Choose your columns and aspect ratios</li>
<li>Publish</li>
</ol>
<p>Your products now display in a flowing, magazine-style layout that keeps customers browsing longer.</p>
<hr />
<figure id="attachment_18734006164541" aria-describedby="caption-attachment-18734006164541" style="width: 3610px" class="wp-caption aligncenter"><a href="https://woocommerce.com/wp-content/uploads/2025/12/befaf1_cbaf9f.jpg"><img class="wp-image-18734006164541 size-full" src="https://woocommerce.com/wp-content/uploads/2025/12/befaf1_cbaf9f.jpg" alt="Same products. Same block. Better presentation." width="3610" height="1270" /></a><figcaption id="caption-attachment-18734006164541" class="wp-caption-text">Same products. Same block. Better presentation.</figcaption></figure>
<hr />
<h3>Works With What You Already Have</h3>
<p>Product Collection Masonry is not a replacement. It enhances the native WooCommerce Product Collection block through standard WordPress controls.</p>
<p><strong>This means:</strong></p>
<ul>
<li>Your existing product pages work immediately</li>
<li>All WooCommerce features remain intact (filters, sorting, pagination)</li>
<li>Your theme compatibility stays the same</li>
<li>No shortcodes or custom post types to manage</li>
</ul>
<hr />
<figure id="attachment_18734006164396" aria-describedby="caption-attachment-18734006164396" style="width: 980px" class="wp-caption aligncenter"><a href="https://woocommerce.com/wp-content/uploads/2025/12/blockeditor1.jpg"><img class="size-full wp-image-18734006164396" src="https://woocommerce.com/wp-content/uploads/2025/12/blockeditor1.jpg" alt="Configure everything from the familiar block editor sidebar." width="980" height="618" /></a><figcaption id="caption-attachment-18734006164396" class="wp-caption-text">Configure everything from the familiar block editor sidebar.</figcaption></figure>
<hr />
<h3>Control Every Screen Size</h3>
<p>Your customers shop on phones, tablets, and desktops. One layout does not fit all.</p>
<p>Set different column counts for each device:</p>
<table>
<thead>
<tr>
<th>Device</th>
<th>Example Setup</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mobile phones</td>
<td>2 columns for larger product images</td>
</tr>
<tr>
<td>Tablets</td>
<td>3 columns balanced for touch browsing</td>
</tr>
<tr>
<td>Laptops</td>
<td>4 columns for comfortable viewing</td>
</tr>
<tr>
<td>Large monitors</td>
<td>5-6 columns to display more inventory</td>
</tr>
</tbody>
</table>
<p>Each breakpoint is independent. What works on desktop stays on desktop. What works on mobile stays on mobile.</p>
<hr />
<h3>Highlight What Matters</h3>
<p>Make specific products stand out by spanning multiple columns or using different aspect ratios.</p>
<p><strong>Use this for:</strong></p>
<ul>
<li>New arrivals that deserve extra attention</li>
<li>Sale items you want customers to notice</li>
<li>Bestsellers that drive conversions</li>
<li>Seasonal products during promotions</li>
</ul>
<p>Create rules like “only the 1st in a Row spans 2 columns” or “every 2nd in a Row uses portrait format” for consistent column-based patterns. Or use “in this Grid” for traditional targeting across the entire product list.</p>
<hr />
<figure id="attachment_18734006164440" aria-describedby="caption-attachment-18734006164440" style="width: 980px" class="wp-caption aligncenter"><a href="https://woocommerce.com/wp-content/uploads/2025/12/blockeditor2.jpg"><img class="size-full wp-image-18734006164440" src="https://woocommerce.com/wp-content/uploads/2025/12/blockeditor2.jpg" alt="Draw attention to featured products with column spanning." width="980" height="618" /></a><figcaption id="caption-attachment-18734006164440" class="wp-caption-text">Draw attention to featured products with column spanning.</figcaption></figure>
<hr />
<h3>Mix Portrait and Landscape Freely</h3>
<p>Not all products photograph the same way.</p>
<p>Jewelry looks best in portrait. Furniture needs landscape shots. Accessories work as squares. Now you can display each product in its natural proportion without forced cropping.</p>
<p><strong>Available aspect ratios:</strong></p>
<ul>
<li>Square (1:1)</li>
<li>Portrait (3:4, 2:3)</li>
<li>Landscape (4:3, 3:2, 16:9)</li>
<li>Ultra wide (21:9)</li>
</ul>
<p>Apply ratios to specific positions or create repeating patterns across your entire catalog.</p>
<hr />
<h3>No Lock-In. Ever.</h3>
<p>This is important: <strong>if you deactivate this plugin, your store keeps working.</strong></p>
<p>Product Collection Masonry uses only standard WooCommerce blocks. There are no proprietary shortcodes, no custom databases, and no special markup that breaks when the plugin is removed.</p>
<p>Deactivate it, and your Product Collection blocks simply display as standard WooCommerce grids. All your products, categories, and page layouts remain intact.</p>
<p>You are not locked into anything.</p>
<hr />
<h3>Lightweight and Fast</h3>
<p>Your store speed matters for sales and search rankings.</p>
<p><strong>Frontend footprint:</strong></p>
<ul>
<li>JavaScript: 10 KB (gzipped)</li>
<li>CSS: Under 1 KB (gzipped)</li>
</ul>
<p>For comparison, that is smaller than most product thumbnail images.</p>
<p>The plugin also uses progressive enhancement. Products display immediately in a CSS grid and get enhanced to masonry layout on page load. No layout jumping. No blank screens.</p>
<hr />
<h3>Perfect For</h3>
<ul>
<li>Fashion and apparel stores</li>
<li>Jewelry and accessories</li>
<li>Home decor and furniture</li>
<li>Handmade and craft items</li>
<li>Art prints and photography</li>
<li>Any store that wants to stand out</li>
</ul>
<hr />
<h2>Demo</h2>
<p>See Product Collection Masonry in action on a live store:</p>
<p><strong><a href="https://wpqueryloopmasonry.com/woocommerce" target="_blank" rel="noopener">View Live Demo</a></strong></p>

Product Collection Masonry

<p>Transform your WooCommerce Product Collection blocks into stunning Pinterest-style masonry layouts. No coding required. Zero lock-in.</p>

<div class="twocol-one" style="margin-bottom: 0">
<h2 style="color: #f5247d;margin-bottom: 1em">Add like buttons to products within your store, like on social networks</h2>
<p>We are all familiar with liking content on social networks so why not add likes functionality to your store, this allows a customer to like products and they can keep a list of their liked products for future reference and/or purchase via their account, increasing sales and repeat customers.</p>
<p>This extension also includes it’s own dashboard listing all products and the amount of likes, you can also view which products customers liked. Customers can like products from product pages, category pages, search pages and other areas. You can even allow non-logged in users to like products too.</p>
<p style="color: #999999;font-style: italic">Read on to find out why you should use Product Likes and the great features included…</p>
</div>
<div class="twocol-one last" style="margin-bottom: 0">
<p><a href="https://woocommerce.com/wp-content/uploads/2020/04/product-likes-screenshot-like-buttons.jpg" target="_blank" rel="noopener"><img style="border: 1px solid #dedee0;border-radius: 5px" src="https://woocommerce.com/wp-content/uploads/2020/04/product-likes-screenshot-like-buttons.jpg" /></a></p>
<div class="woocommerce-message">
<div><strong>Peter, an eCommerce store owner said:</strong></div>
<div style="margin-top: 0.5em"><i>“Lets our customers like products and allows us to see which products customers like most. 💖”</i></div>
</div>
</div>
<hr style="clear: both" />
<div class="woo-sc-box">
<h2>Features</h2>
<ul class="wccom-tick-list-secondary" style="line-height: 1.8em;margin-bottom: 18px">
<li><strong>Allow your customers to like/unlike products in your store</strong></li>
<li><strong>Likes button shown in majority of pages/areas where products are shown</strong></li>
<li><strong>Customers can see a list of previously liked products in their account and add to cart from it</strong></li>
<li><strong>Can be used with the standard WooCommerce products shortcode to display most liked products</strong></li>
<li>See total number of likes on every product</li>
<li>See which customers liked a product</li>
<li>See total number of likes by customer</li>
<li>See which products a specific customer has liked</li>
<li>Search, sort, export and print product likes data</li>
<li>Enable liking for non-logged in users</li>
<li>Heart, star, thumb icons or none</li>
<li>Disable styling so you can use custom CSS</li>
<li>Data tools for resyncing and deleting likes</li>
</ul>
<p><a class="wccom-button is-primary" style="font-weight: 400;text-decoration: none;width: 130px" href="https://woocommerce.com/?add-to-cart=5742633" target="_blank" rel="noopener"><span class="wccom-button__text">Buy Now</span></a></p>
</div>
<hr style="clear: both" />
<h2>Highlights</h2>
<p style="color: #999999;font-style: italic">Get these great features for your store…</p>
<div class="twocol-one" style="margin-bottom: 0">
<h3>Like buttons</h3>
<p>Like buttons are shown on products throughout your store, a likes total can also be displayed. Choose to display on product pages, product archive pages like shop, categories, search, etc and product blocks.</p>
<p><a href="https://woocommerce.com/wp-content/uploads/2020/04/product-likes-screenshot-like-buttons.jpg" target="_blank" rel="noopener"><img style="border: 1px solid #dedee0;border-radius: 5px" src="https://woocommerce.com/wp-content/uploads/2020/04/product-likes-screenshot-like-buttons.jpg" /></a></p>
</div>
<div class="twocol-one last" style="margin-bottom: 0">
<h3>Most liked</h3>
<p>Can be used with the standard WooCommerce products shortcode to display a list of the most liked products from your store, add the shortcode to pages, posts, templates, or another location in your store.</p>
<p><a href="https://woocommerce.com/wp-content/uploads/2020/04/most-liked-products-1.jpg" target="_blank" rel="noopener"><img style="border: 1px solid #dedee0;border-radius: 5px" src="https://woocommerce.com/wp-content/uploads/2020/04/most-liked-products-1.jpg" /></a></p>
</div>
<div class="twocol-one" style="margin-bottom: 0">
<h3>My account</h3>
<p>The my account page gets a likes tab which allows customers to view a paginated list of products they have previously liked, they can even add products to cart directly from here for quick purchases.</p>
<p><a href="https://woocommerce.com/wp-content/uploads/2020/04/likes-my-account.jpg" target="_blank" rel="noopener"><img style="border: 1px solid #dedee0;border-radius: 5px" src="https://woocommerce.com/wp-content/uploads/2020/04/likes-my-account.jpg" /></a></p>
</div>
<div class="twocol-one last" style="margin-bottom: 0">
<h3>Product totals</h3>
<p>Within the dashboard you can review the total number likes on every product across your store, you can click the likes total to see which customers have liked the product. Also includes search, sort, export and print functionality.</p>
<p><a href="https://woocommerce.com/wp-content/uploads/2020/04/product-likes-product-totals.jpg" target="_blank" rel="noopener"><img style="border: 1px solid #dedee0;border-radius: 5px" src="https://woocommerce.com/wp-content/uploads/2020/04/product-likes-product-totals.jpg" /></a></p>
</div>
<div class="twocol-one" style="margin-bottom: 0">
<h3>Customer totals</h3>
<p>Within the dashboard you can review the total number of likes by customers, you can click the likes total to see which products a specific customer has liked. Also includes search, sort, export and print functionality.</p>
<p><a href="https://woocommerce.com/wp-content/uploads/2020/04/product-likes-customer-totals.jpg" target="_blank" rel="noopener"><img style="border: 1px solid #dedee0;border-radius: 5px" src="https://woocommerce.com/wp-content/uploads/2020/04/product-likes-customer-totals.jpg" /></a></p>
</div>
<div class="twocol-one last" style="margin-bottom: 0">
<h3>Guest likes</h3>
<p>Allows likes of products for customers who are not logged in. In this scenario the non-logged in customer has a cookie set to record their likes as they browse your store. Guest likes count towards the overall total likes count.</p>
<p><a href="https://woocommerce.com/wp-content/uploads/2020/04/product-likes-screenshot-not-logged-in.jpg" target="_blank" rel="noopener"><img style="border: 1px solid #dedee0;border-radius: 5px" src="https://woocommerce.com/wp-content/uploads/2020/04/product-likes-screenshot-not-logged-in.jpg" /></a></p>
</div>
<div class="twocol-one" style="margin-bottom: 0">
<h3>Like icons</h3>
<p>You can display the likes button as a heart, star or thumb icon. There is also a none option for a text based link. To use your own custom icon you can disable all the styling with the included option and use your own custom CSS.</p>
<p><a href="https://woocommerce.com/wp-content/uploads/2020/04/product-likes-screenshot-like-icon-types.jpg" target="_blank" rel="noopener"><img style="border: 1px solid #dedee0;border-radius: 5px" src="https://woocommerce.com/wp-content/uploads/2020/04/product-likes-screenshot-like-icon-types.jpg" /></a></p>
</div>
<div class="twocol-one last" style="margin-bottom: 0">
<h3>Settings</h3>
<p>This extension includes a dedicated settings area within WooCommerce settings, from here you can configure several settings, allowing to customize product likes to the requirements of your store.</p>
<p><a href="https://woocommerce.com/wp-content/uploads/2020/04/likes-settings.jpg" target="_blank" rel="noopener"><img style="border: 1px solid #dedee0;border-radius: 5px" src="https://woocommerce.com/wp-content/uploads/2020/04/likes-settings.jpg" /></a></p>
</div>
<hr style="clear: both" />
<h2>Screenshots</h2>
<p style="color: #999999;font-style: italic">See the extension in action…</p>
<p class="jetpack-slideshow-noscript robots-nocontent">This slideshow requires JavaScript.</p><div id="gallery-0-7-slideshow" class="jetpack-slideshow-window jetpack-slideshow jetpack-slideshow-black" data-trans="fade" data-autostart="1" data-gallery="[{"src":"https:\/\/woocommerce.com\/wp-content\/uploads\/2020\/04\/product-likes-screenshot-like-buttons.jpg","id":"18734000553655","title":"product-likes-screenshot-like-buttons","alt":"","caption":"","itemprop":"image"},{"src":"https:\/\/woocommerce.com\/wp-content\/uploads\/2020\/04\/most-liked-products-1.jpg","id":"18734004104857","title":"most-liked-products","alt":"","caption":"","itemprop":"image"},{"src":"https:\/\/woocommerce.com\/wp-content\/uploads\/2020\/04\/likes-my-account.jpg","id":"18734004104388","title":"likes-my-account","alt":"","caption":"","itemprop":"image"},{"src":"https:\/\/woocommerce.com\/wp-content\/uploads\/2020\/04\/product-likes-product-totals.jpg","id":"18734003886967","title":"product-likes-product-totals","alt":"","caption":"","itemprop":"image"},{"src":"https:\/\/woocommerce.com\/wp-content\/uploads\/2020\/04\/product-likes-customer-totals.jpg","id":"18734003886973","title":"product-likes-customer-totals","alt":"","caption":"","itemprop":"image"},{"src":"https:\/\/woocommerce.com\/wp-content\/uploads\/2020\/04\/product-likes-screenshot-not-logged-in.jpg","id":"18734000553709","title":"product-likes-screenshot-not-logged-in","alt":"","caption":"","itemprop":"image"},{"src":"https:\/\/woocommerce.com\/wp-content\/uploads\/2020\/04\/product-likes-screenshot-like-icon-types.jpg","id":"18734000553715","title":"product-likes-screenshot-like-icon-types","alt":"","caption":"","itemprop":"image"},{"src":"https:\/\/woocommerce.com\/wp-content\/uploads\/2020\/04\/likes-settings.jpg","id":"18734004104623","title":"likes-settings","alt":"","caption":"","itemprop":"image"}]"></div>
<hr style="clear: both" />
<div class="woocommerce-message">
<h2>Example usage</h2>
<p>Michael manages a WooCommerce store selling womenswear, with Product Likes he can enable liking of products on his store. This allows his customers to like products and keep a list of previously liked products in their accounts. These customers can then view their list of liked products later and add to cart directly from the likes tab in their account. Michael can see which products are the most liked and export this data to use when deciding on new products to add to his product range. If a customer calls him he can quickly find out which products the customer has previously liked and make recommendations on similar new products for purchase.</p>
</div>
<hr style="clear: both" />
<h2>More information</h2>
<ul style="line-height: 1.8em">
<li><a href="https://woocommerce.com/document/product-likes/" target="_blank" rel="noopener">Read documentation</a> for an overview of the settings, options, frequently asked questions and more</li>
<li><a href="https://woocommerce.com/contact-us/" target="_blank" rel="noopener">Contact us</a> if you have any questions and we’ll be happy to help</li>
</ul>
<hr style="clear: both" />
<p><a class="wccom-button is-primary" style="font-weight: 400;text-decoration: none;width: 130px" href="https://woocommerce.com/?add-to-cart=5742633" target="_blank" rel="noopener"><span class="wccom-button__text">Buy Now</span></a></p>

Product Likes

<p>Add social-style like buttons to products, let shoppers save favorites, and track what customers love most.</p>

Product Collection Masonry vs Product Likes