<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">
<h1>Enhance your online store’s performance and skyrocket sales</h1>
<p><strong>Sparks for WooCommerce</strong> is a conversion-focused extension designed to extend the functionality of your online store. It introduces eight performance-enhancing features that significantly improve the user experience and increase sales potential.</p>
<div class="woo-sc-box">
<p>🚀 <em><u><strong>Quick tip</strong></u></em>: By focusing on enhancing <strong>user experience</strong>, you can increase customer<br />
loyalty and the likelihood of <strong>repeat purchases</strong>.</p>
</div>
</div>
<div class="twocol-one last"><img class="alignnone size-medium wp-image-18734002068714" src="https://woocommerce.com/wp-content/uploads/2023/05/sparks-header-w-features-1.2-2x.png? w=620" alt="" width="620" height="567" /></div>
<hr style="clear: both" />
<h2><strong>Features:</strong></h2>
<div class="twocol-one">
<p><strong>1. Product Comparison Tables:</strong> Empower your customers with the ability to compare various products based on their specifications, helping them make informed purchase decisions. Additionally, our feature allows you to easily create product comparison sections on your site, enabling seamless integration and maximizing sales.</p>
<p><img class="alignnone size-medium wp-image-18734002068713" src="https://woocommerce.com/wp-content/uploads/2023/05/sparks-compare-table-02-2x.png?w=620" alt="" width="620" height="463" /></p>
</div>
<div class="twocol-one last">
<p><strong>2. Wishlist:</strong> Enable users to effortlessly save their favourite products, guaranteeing seamless access when they’re ready to make a purchase. By simplifying the process and ensuring their cherished items are readily available, you can foster enduring customer loyalty and maximize sales opportunities.</p>
<p><img class="alignnone size-medium wp-image-18734002100750" src="https://woocommerce.com/wp-content/uploads/2023/05/wishlist.png?w=620" alt="" width="620" height="384" /></p>
</div>
<div class="twocol-one">
<p><strong>3. Variation Swatches:</strong> Enhance customers’ shopping experience with our feature visually presenting product variations. Simplify the decision-making process by showcasing availability in different shapes, colors, and prices using clear and concise visuals. Speed up their buying journey and increase conversions.</p>
<p><img class="alignnone size-medium wp-image-18734002100976" src="https://woocommerce.com/wp-content/uploads/2023/05/variation-swatches-1.png?w=620" alt="" width="620" height="482" /></p>
</div>
<div class="twocol-one last">
<p><strong>4. Quick View:</strong> Take your product catalog to the next level with our feature that introduces a quick view button. Empower customers to view product details instantly, eliminating the need for multiple page loads. Accelerate their shopping experience and boost conversions with this seamless and efficient browsing feature.</p>
<p><img class="alignnone size-medium wp-image-18734002100747" src="https://woocommerce.com/wp-content/uploads/2023/05/quick-view.png?w=620" alt="" width="620" height="413" /></p>
</div>
<div class="twocol-one">
<p><strong>5. Advanced Product Review:</strong> Elevate review options with our powerful feature set, empowering users to attach images, vote on reviews, display verified ownership and more. Unlock the potential of customer feedback for a dynamic, trusted, and satisfying review experience.</p>
<p><img class="alignnone size-medium wp-image-18734002100987" src="https://woocommerce.com/wp-content/uploads/2023/05/advance-review-1.png?w=620" alt="" width="620" height="439" /></p>
</div>
<div class="twocol-one last">
<p><strong>6. Multi-Announcement Bars:</strong> Delight your customers with personalized offers using Multi-Announcement Bars. Tailor promotions based on specific customer actions, ensuring they receive relevant and timely incentives. Create a memorable shopping experience that increases engagement and drives conversions.</p>
<p><img class="alignnone size-medium wp-image-18734002100988" src="https://woocommerce.com/wp-content/uploads/2023/05/multi-announcement-bars-1.png?w=620" alt="" width="620" height="412" /></p>
</div>
<div class="twocol-one">
<p><strong>7. Product Tabs Manager:</strong> Customize and organize the tabs on your shop’s product page according to your preferences. Add new tabs, reorder them, and tailor the layout to showcase the most relevant information. Whether it’s Global tabs, Custom tabs, or any other type, you have the flexibility to fine-tune the visibility and arrangement of tabs, ensuring a seamless browsing experience for your customers.</p>
<p><img class="alignnone size-medium wp-image-18734002100744" src="https://woocommerce.com/wp-content/uploads/2023/05/custom-tab.png?w=620" alt="" width="620" height="411" /></p>
</div>
<div class="twocol-one last">
<p><strong>8. Custom Thank You Pages:</strong> Level up your post-purchase process with Custom Thank You Pages. Tailor the Thank You Page experience based on the product customers purchased, redirecting them to a customized page that reinforces their choice and provides additional information or special offers.</p>
<p><img class="alignnone size-medium wp-image-18734002068716" src="https://woocommerce.com/wp-content/uploads/2023/05/sparks-woocommerce-07-2x.png?w=620" alt="" width="620" height="601" /></p>
</div>
<hr style="clear: both" />
<h2><strong>Use Cases</strong></h2>
<div class="woo-sc-box">💍 A first-time visitor, Lisa falls in love with a stunning necklace in the e-commerce store. She adds it to her <strong>wishlist, ensuring she doesn’t forget it</strong>. When she returns to make a purchase, Lisa easily finds the necklace on her wishlist, <strong>streamlining her shopping experience</strong> and securing her desired item.</div>
<div class="woo-sc-box">💫 Sarah, a busy shopper, saves time with <strong>Quick View</strong>. She effortlessly views product details, prices, and availability by hovering over the quick view buttons. This seamless browsing experience empowers Sarah to <strong>compare options, find deals, and make confident purchase decisions</strong>, ensuring a convenient and satisfying shopping journey.</div>
<hr style="clear: both" />
<h2><strong>Support</strong></h2>
<p><strong>Themeisle</strong> is the developer of <strong>Sparks for WooCommerce</strong>. We are a global team of passionate WordPress developers. Hundreds of thousands of satisfied site owners use our awesome themes and plugins.</p>
<p>Our commitment to excellence has earned us a remarkable <strong>4.8 rating on Trustpilot</strong>, backed by 340+ reviews. join the growing community of <strong>happy e-commerce store owners.</strong></p>
<p>You can count on our <strong>years</strong> of experience and our dedication to providing <strong>exceptional support.</strong></p>

Sparks

<p>Add 8 conversion-boosting features: product comparisons, variation swatches, wishlists, tabs manager, advanced product reviews, quick view, custom thank you pages, and multi-announcement bars to enhance the user’s shopping experience.</p>

Product Collection Masonry vs Sparks