<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>

<h2>Stop losing money on returns</h2>
<p>Resell returns that can’t be sold as new in your WooCommerce store. A link to the Open Box Deal is displayed directly on the original product page, so customers immediately see that a discounted option is available.</p>
<p>The Open Box Deal page automatically reuses all content from the original product, while giving you the option to add a product condition description and upload specific photos of the returned item. This way, customers know exactly what they are buying, and you can offer the product at a reduced price to boost sales and recover value from your returned inventory.</p>
<p><a href="https://slashdown.net/obd-demo/" target="_blank" rel="noopener">See the live demo</a></p>
<p>Not only does this help you increase revenue, it also reduces waste and supports more sustainable ecommerce.</p>
<h3>Key Features</h3>
<ul>
<li><strong>Automatic Open Box Deal link</strong> on the original product page</li>
<li><strong>Condition notes and custom photos</strong> for each returned item</li>
<li><strong>Automatic content inheritance</strong> from the original product (title, description, gallery)</li>
<li><strong>Dedicated Open Box Deal page</strong> with discount pricing</li>
<li><strong>Optional loop visibility</strong> (enable or exclude from shop, widgets, shortcodes)</li>
</ul>
<h3>Benefits for your store</h3>
<ul class="wccom-tick-list-primary">
<li><strong>Generate extra revenue</strong> from returned items that can’t be sold as new</li>
<li><strong>Save time</strong> with automatic content reuse and simple overrides</li>
<li><strong>Build trust</strong> with clear condition details and labeling</li>
<li><strong>Delight bargain-hunters</strong> with clear discounted deals</li>
<li><strong>Support sustainability</strong> by giving products a second life 🌱</li>
</ul>
<h3>Free vs Premium</h3>
<table style="width: 100%;border-collapse: collapse;font-size: 15px">
<thead>
<tr>
<th style="text-align: left;padding: 10px;border-bottom: 1px solid #ddd">Features</th>
<th style="text-align: center;width: 20%;padding: 10px;border-bottom: 1px solid #ddd">Free</th>
<th style="text-align: center;width: 20%;padding: 10px;border-bottom: 1px solid #ddd">Premium</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 10px;border-top: 1px solid #eee">Add an automatic “Open Box Deal” link on the original product page</td>
<td style="text-align: center;padding: 10px;border-top: 1px solid #eee" aria-label="Free: included">✅</td>
<td style="text-align: center;padding: 10px;border-top: 1px solid #eee" aria-label="Premium: included">✅</td>
</tr>
<tr>
<td style="padding: 10px;border-top: 1px solid #eee">Automatically inherit content from the original product</td>
<td style="text-align: center;padding: 10px;border-top: 1px solid #eee" aria-label="Free: included">✅</td>
<td style="text-align: center;padding: 10px;border-top: 1px solid #eee" aria-label="Premium: included">✅</td>
</tr>
<tr>
<td style="padding: 10px;border-top: 1px solid #eee">Support for Simple products</td>
<td style="text-align: center;padding: 10px;border-top: 1px solid #eee" aria-label="Free: included">✅</td>
<td style="text-align: center;padding: 10px;border-top: 1px solid #eee" aria-label="Premium: included">✅</td>
</tr>
<tr>
<td style="padding: 10px;border-top: 1px solid #eee">Support for Variable products (variations)</td>
<td style="text-align: center;padding: 10px;border-top: 1px solid #eee" aria-label="Free: not included">❌</td>
<td style="text-align: center;padding: 10px;border-top: 1px solid #eee" aria-label="Premium: included">✅</td>
</tr>
<tr>
<td style="padding: 10px;border-top: 1px solid #eee">Set custom product conditions (e.g. Refurbished, Demo, etc.)</td>
<td style="text-align: center;padding: 10px;border-top: 1px solid #eee" aria-label="Free: not included">❌</td>
<td style="text-align: center;padding: 10px;border-top: 1px solid #eee" aria-label="Premium: included">✅</td>
</tr>
<tr>
<td style="padding: 10px;border-top: 1px solid #eee">Show product preview image</td>
<td style="text-align: center;padding: 10px;border-top: 1px solid #eee" aria-label="Free: not included">❌</td>
<td style="text-align: center;padding: 10px;border-top: 1px solid #eee" aria-label="Premium: included">✅</td>
</tr>
<tr>
<td style="padding: 10px;border-top: 1px solid #eee">Add informational links (Return Policy, “What is Open Box Deal?”)</td>
<td style="text-align: center;padding: 10px;border-top: 1px solid #eee" aria-label="Free: not included">❌</td>
<td style="text-align: center;padding: 10px;border-top: 1px solid #eee" aria-label="Premium: included">✅</td>
</tr>
<tr>
<td style="padding: 10px;border-top: 1px solid #eee">Control visibility of Open Box Deal panel & internal links</td>
<td style="text-align: center;padding: 10px;border-top: 1px solid #eee" aria-label="Free: not included">❌</td>
<td style="text-align: center;padding: 10px;border-top: 1px solid #eee" aria-label="Premium: included">✅</td>
</tr>
<tr>
<td style="padding: 10px;border-top: 1px solid #eee">Control visibility of Open Box Deals in the shop catalog</td>
<td style="text-align: center;padding: 10px;border-top: 1px solid #eee" aria-label="Free: not included">❌</td>
<td style="text-align: center;padding: 10px;border-top: 1px solid #eee" aria-label="Premium: included">✅</td>
</tr>
<tr>
<td style="padding: 10px;border-top: 1px solid #eee">Display Open Box Deals in shop loops</td>
<td style="text-align: center;padding: 10px;border-top: 1px solid #eee" aria-label="Free: not included">❌</td>
<td style="text-align: center;padding: 10px;border-top: 1px solid #eee" aria-label="Premium: included">✅</td>
</tr>
<tr>
<td style="padding: 10px;border-top: 1px solid #eee">Priority Support & updates</td>
<td style="text-align: center;padding: 10px;border-top: 1px solid #eee" aria-label="Free: not included">❌</td>
<td style="text-align: center;padding: 10px;border-top: 1px solid #eee" aria-label="Premium: included">✅</td>
</tr>
</tbody>
</table>
<hr />
<h3>Did you know?</h3>
<p>Over 5 billion pounds of returned goods end up in landfills worldwide every year. <strong>By reselling returns, you’re helping to reduce waste related to returns, CO₂ emissions, and unnecessary production, while turning returns into a profit.</strong></p>
<hr />
<h3>How it works</h3>
<ol>
<li>Create a new Open Box Deal product.</li>
<li>Link it to an existing product.</li>
<li>Add a product condition and photos (optional) and expose returned stock at irresistible prices.</li>
</ol>
<p>Done! The deal automatically appears on the original product page. Because content is pulled directly from the original product, you save time and avoid duplicate uploads.</p>

Open Box Deal Premium

<p>Open Box Deal lets you sell returns that can’t be sold as new. Create deal pages with photos, condition details, and discounted pricing.</p>

Product Collection Masonry vs Open Box Deal Premium