<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>Features</h2>
<ul class="wccom-tick-list-primary">
<li style="font-weight: 400"><b>Sort Products:</b><span style="font-weight: 400"> Custom sorting order of products by category or tags.</span></li>
<li style="font-weight: 400"><b>Global Sorting Option</b><span style="font-weight: 400">: Create custom sorting options globally for all products on the shop page level.</span></li>
<li style="font-weight: 400"><b>Drag-and-Drop Re-Order</b><span style="font-weight: 400">: Use a simple drag-and-drop interface to change the order of the products.</span></li>
<li style="font-weight: 400"><b>Multiple Sorting Options</b><span style="font-weight: 400">: Choose from different sorting options such as Name, ID, Price, or Reviews.</span></li>
<li><b>Sort Direction</b><span style="font-weight: 400">: Set sorting direction as ascending or descending based on your preference.</span></li>
<li><b>Sort by Attributes:</b> Add the option for sorting products based on attributes, so customers can make a better decision.</li>
<li style="font-weight: 400"><b>Products per Page</b><span style="font-weight: 400">: Set how many products to show on a page – shop/category/tag pages.</span></li>
<li style="font-weight: 400"><b style="letter-spacing: -0.011em">Hide Sorting Dropdown</b><span style="font-weight: 400">: Hide the default sorting dropdown from the frontend.</span></li>
</ul>
<p><span style="font-weight: 400">Want complete control over how your products are displayed in your WooCommerce store? With this plugin, you can easily sort and reorder products across your entire shop or within specific categories, attributes, and tags. The intuitive drag-and-drop interface lets you rearrange products in seconds, while flexible sorting options like Name, Price, ID, or Reviews help you organize your catalog exactly the way you want.<br />
</span></p>
<p><span style="font-weight: 400">You can also choose how many products appear per page and simplify the shopping experience by hiding the default sorting dropdown. It’s a simple yet powerful way to create a cleaner, more personalized storefront that puts your best products in the spotlight.</span></p>
<h2>Custom product sorting</h2>
<p><span style="font-weight: 400">Take full control over how your products are displayed by sorting them within specific categories or tags. Whether you’re showcasing seasonal items, bestsellers, or new arrivals, you can arrange your products in a way that highlights what matters most to your customers.</span></p>
<h2>Re-order products using drag-and-drop</h2>
<h3>Grid view</h3>
<p><img class="alignnone size-medium wp-image-18734005914977" src="https://woocommerce.com/wp-content/uploads/2025/10/Grid-View.gif?w=896" alt="Grid View" width="896" height="380" /></p>
<h3>Tabular view</h3>
<p><img class="alignnone size-medium wp-image-18734005914982" src="https://woocommerce.com/wp-content/uploads/2025/10/Tabular-View.gif?w=896" alt="Tabular View" width="896" height="376" /></p>
<p><span style="font-weight: 400">Easily rearrange the order of the products with a simple drag-and-drop interface. Change the order of products on the shop (global) page, or based on category or tags. Arrange products in tabular or grid view to easily sort products.</span></p>
<h2>Multiple sorting options</h2>
<p><img class="alignnone size-medium wp-image-18734005914980" src="https://woocommerce.com/wp-content/uploads/2025/10/Sorting-Options.png?w=896" alt="Sorting Options" width="896" height="257" /></p>
<p><span style="font-weight: 400">Enhance your product organization by selecting from multiple sorting options. You can select between multiple sorting options:</span></p>
<ul>
<li style="font-weight: 400"><span style="font-weight: 400">Name</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Price</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Sales</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Stock Quantity</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Date</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Rating</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Reviews Count</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Product ID</span></li>
</ul>
<h2>Sort products on a global level</h2>
<p><img class="alignnone size-medium wp-image-18734005914975" src="https://woocommerce.com/wp-content/uploads/2025/10/Category-Page-Sorting.png?w=896" alt="Category Page Sorting" width="896" height="527" /></p>
<p><span style="font-weight: 400">Set a global sorting order for your entire shop. Choose from various criteria such as Name, Price, ID, or Reviews to ensure a consistent and organized shopping experience across all product pages.</span></p>
<h2>Sort products by category</h2>
<p><img class="alignnone size-medium wp-image-18734005914974" src="https://woocommerce.com/wp-content/uploads/2025/10/Category-Based-Sorting.png?w=896" alt="Category Based Sorting" width="896" height="582" /></p>
<p><span style="font-weight: 400">Organize your products within specific categories to make it easier for customers to find what they are looking for. Choose a different sorting criterion for each category, such as price or ID, and set sorting order as ascending or descending.</span></p>
<h2>Sort products within tags</h2>
<p><img class="alignnone size-medium wp-image-18734005914983" src="https://woocommerce.com/wp-content/uploads/2025/10/Tag-Based-Sorting.png?w=896" alt="Tag Based Sorting" width="896" height="539" /></p>
<p><span style="font-weight: 400">Organize your products within specific tags to help customers find what they are looking for more easily. Select a different sorting criterion for each tag, such as Price or ID, and specify the sorting order as either ascending or descending.</span></p>
<h2><b>Sort Products by Attributes</b></h2>
<p><img class="alignnone size-medium wp-image-18734006308670" src="https://woocommerce.com/wp-content/uploads/2025/11/Sort-Products-by-Attributes.png?w=896" alt="Sort Products by Attributes" width="896" height="406" /></p>
<p>The WooCommerce sort products plugin allows store owners to add attributes as a sorting option in the sorting dropdown menu. This allows customers to easily sort products based on different attributes, such as color, material, or size, making it easier for customers to make an informed decision.</p>
<h2>Control the number of products per page</h2>
<p><img class="alignnone size-medium wp-image-18734005914979" src="https://woocommerce.com/wp-content/uploads/2025/10/Number-of-Products.png?w=896" alt="Number of Products" width="896" height="93" /></p>
<p><span style="font-weight: 400">Control the number of products displayed on each page of your shop, category, or tag pages. This feature helps optimize page load times and enhance the overall shopping experience for your customers.</span></p>
<h2>Hide the default sorting dropdown</h2>
<p><img class="alignnone size-medium wp-image-18734005914978" src="https://woocommerce.com/wp-content/uploads/2025/10/Hide-Default-Dropdown.png?w=896" alt="Hide Default Dropdown" width="896" height="126" /></p>
<p><span style="font-weight: 400">Streamline your store’s interface by hiding the default sorting dropdown. This option provides a cleaner look and can be particularly useful if you’re implementing custom sorting methods or wish to simplify the user interface.</span></p>
<h2>Benefits</h2>
<ul>
<li style="font-weight: 400"><b>Full Control</b><span style="font-weight: 400">: Decide exactly how your products appear across your shop.</span></li>
<li style="font-weight: 400"><b>Boost Visibility</b><span style="font-weight: 400">: Highlight bestsellers, new arrivals, or high-margin items.</span></li>
<li style="font-weight: 400"><b>Easy Management</b><span style="font-weight: 400">: Quickly reorder products using a drag-and-drop interface.</span></li>
<li style="font-weight: 400"><b>Flexible Sorting</b><span style="font-weight: 400">: Organize products by Name, Price, ID, Reviews, or more.</span></li>
<li style="font-weight: 400"><b>Increase Sales</b><span style="font-weight: 400">: Strategically display products to drive more conversions.</span></li>
</ul>

Sort Products and Rearrange

<p>Sort Products by Category, Attributes, and Tags or the Entire Catalog on the Shop Page. Re-order products manually by using a simple drag-and-drop interface.</p>

Product Collection Masonry vs Sort Products and Rearrange