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

<ul class="wccom-tick-list-primary">
<li>Easily reorder products with drag & drop or select from 18 built-in sorting rules.</li>
<li><strong data-start="214" data-end="238">Drag & Drop Sorting:</strong> Quickly rearrange products in any category, subcategory, or tag.</li>
<li><strong data-start="308" data-end="331">18 Sorting Options:</strong> Sort by name, date, price, sales, reviews, stock, and more.</li>
<li><strong data-start="396" data-end="423">Category-Based Sorting:</strong> Set unique sort orders for each category, subcategory, or tag.</li>
<li><strong data-start="491" data-end="510">Global Sorting:</strong> Apply a single sort order across your entire store in one step.</li>
<li><strong data-start="917" data-end="944">Schedule-Based Sorting:</strong> Set time-based sorting rules that auto-activate/deactivate. <strong><em>(New)</em></strong></li>
<li><strong data-start="1015" data-end="1038">Role-Based Sorting:</strong> Display different product orders based on user roles. <em><strong>(New)</strong></em></li>
<li><strong data-start="729" data-end="752">Sort by Attributes:</strong> Sort products by size, color, brand, or custom attributes in the dropdown. <strong><em>(New)</em></strong></li>
<li><strong data-start="822" data-end="848">Sale Products Sorting:</strong> Show “Sale First” or “Sale Last” in the sorting dropdown. <em><strong>(New)</strong></em></li>
<li><strong data-start="645" data-end="671">Set Products Per Page:</strong> Control how many products appear on each page. <em><strong>(New)</strong></em></li>
<li><strong data-start="579" data-end="599">One-Click Reset:</strong> Restore default sorting instantly.<em><strong> (New)</strong></em></li>
<li><strong data-start="1103" data-end="1129">Hide Sorting Dropdown:</strong> Remove the default sorting menu from the frontend.</li>
<li><strong data-start="1185" data-end="1215">Elementor Loop Compatible:</strong> Fully supports Elementor Loop Grid, ensuring your custom layouts follow the selected sorting rules.</li>
</ul>
<hr />
<p>Want full control over how products appear in your WooCommerce store? <strong data-start="136" data-end="172">Reorder Products for WooCommerce</strong> lets you sort items for your entire shop or for specific categories, subcategories, and tags. Easily arrange products using drag & drop or choose from 18 built-in sorting options like price, popularity, date, stock, and more.</p>
<p>You can also sort by attributes, highlight sale products, set time-based or role-based sorting rules, control products per page, and restore defaults with just one click. It’s the easiest way to organize your store exactly the way you want.</p>
<h3>Sort products for</h3>
<ul class="wccom-tick-list-secondary">
<li>Whole Shop</li>
<li>Each <strong>Category</strong></li>
<li>Each <strong>Subcategory</strong></li>
<li>Each <strong>Tag</strong></li>
</ul>
<div class="woo-sc-box normal  success ">This plugin is fully compatible with Elementor Loop Grid.</div>
<h3>Two sorting options:</h3>
<p>Sort products within categories, subcategories, and tags using:</p>
<ol>
<li data-start="102" data-end="148"><strong data-start="102" data-end="117">Drag & Drop</strong> <strong>Sorting:</strong> Reorder products using drag & drop interface.</li>
<li data-start="152" data-end="231"><strong data-start="152" data-end="177">18 Predefined Options:</strong> Sort products by price, popularity, date, stock and more.</li>
</ol>
<h3>Drag-and-drop Sorting Products</h3>
<p>Easily rearrange products within WooCommerce categories, subcategories, and tags via a simplified drag-and-drop functionality.</p>
<h4>Grid View</h4>
<p><img class="alignnone size-full wp-image-18734005354201" src="https://woocommerce.com/wp-content/uploads/2024/11/Custom-Sorting-Gif-2.gif" alt="Drag and Drop Sorting Products WooCommerce" width="980" height="551" /></p>
<h4>Table View</h4>
<p><img class="alignnone size-full wp-image-18734006006301" src="https://woocommerce.com/wp-content/uploads/2024/11/Frame-34.png" alt="Drag & Drop in Table View" width="980" height="545" /></p>
<h3>Sort Products Using 18 Pre-defined Options</h3>
<p>Product Sorting WooCommerce allows you to choose from an array of sorting options to reorder products for each category, subcategory, and tag using</p>
<ul>
<li><b>ID </b>– Ascending</li>
<li><b>ID </b>– Descending</li>
<li><b>Name </b>– Ascending (A to Z)</li>
<li><b>Name </b>– Descending (Z to A)</li>
<li><b>Date </b>– Ascending</li>
<li><b>Date </b>– Descending</li>
<li><b>Price </b>– Ascending</li>
<li><b>Price </b>– Descending</li>
<li><b>Product Rating </b>– Ascending</li>
<li><b>Product Rating</b> – Descending</li>
<li><b>Number of Reviews </b>– Ascending</li>
<li><b>Number of Reviews </b>– Descending</li>
<li><b>Most Viewed Products</b> – Ascending</li>
<li><b>Most Viewed Products</b> – Descending</li>
<li><b>Number of Sales </b>– Ascending</li>
<li><b>Number of Sales </b>– Descending</li>
<li><b>Stock Quantity </b>– Ascending</li>
<li><b>Stock Quantity </b>– Descending</li>
</ul>
<h4>Global Sorting</h4>
<p>Sort all products in your store at once. This single setting will organize everything – products in categories, subcategories, and even those with specific tags – all in the same way.</p>
<p><img class="alignnone size-full wp-image-18734006474011" src="https://woocommerce.com/wp-content/uploads/2024/11/Frame-35.png" alt="Sort Products for WooCommerce Whole Shop" width="980" height="661" /></p>
<h4>Sort products within categories/subcategories</h4>
<p>Select to rearrange products in your desired category or subcategory and choose your preferred sorting order — ascending or descending.</p>
<p><img class="alignnone size-full wp-image-18734006474014" src="https://woocommerce.com/wp-content/uploads/2024/11/Frame-36.png" alt="Sort Products for WooCommerce Categories" width="980" height="856" /></p>
<h4>Sort products within tags</h4>
<p>Just like sorting products in categories, you can also simply select your desired tag and choose your preferred sorting order in ascending or descending order.</p>
<p><img class="alignnone size-full wp-image-18734006474017" src="https://woocommerce.com/wp-content/uploads/2024/11/Frame-37.png" alt="Sort Products for WooCommerce Tags" width="980" height="688" /></p>
<h3>Schedule-Based Product Sorting</h3>
<p>Automatically change product order based on time. Set start and end times, and let your sorting rules activate and deactivate on schedule.</p>
<p><img class="alignnone size-full wp-image-18734006474047" src="https://woocommerce.com/wp-content/uploads/2024/11/Frame-38-1.png" alt="Schedule-Based Product Sorting for WooCommerce" width="980" height="316" /></p>
<h3>Role-Based Product Sorting</h3>
<p>Show different product orders for different user roles, giving each customer a personalized shopping experience.</p>
<p><img class="alignnone size-full wp-image-18734006474021" src="https://woocommerce.com/wp-content/uploads/2024/11/Frame-39.png" alt="Role-Based Product Sorting for WooCommerce" width="980" height="305" /></p>
<h3>Automatic detection</h3>
<p>Sort Products for WooCommerce automatically detects your categories, subcategories, and tags, enabling you to set a unique sorting order for each page. Each page can feature its own customized sorting order!</p>
<h3>Restore Default Sorting</h3>
<p>One-click ‘Restore Default Sorting’ feature allows you to instantly revert your product display order back to its original state.</p>
<h3>Number of Products Per Page</h3>
<p>Precisely configure the number of products displayed on each page to enhance the customer browsing experience.</p>
<h3>Sort by Attributes (Set by Customers)</h3>
<p>Let customers sort products by attributes like color, size, or brand directly from the frontend dropdown.</p>
<h3>Sale Products Sorting (Set by Customers)</h3>
<p>Highlight discounted items by showing “Sale First” or “Sale Last” in the frontend sorting dropdown. Automatically reverts to default sorting if no sale products exist.</p>
<p><img class="alignnone size-full wp-image-18734006474704" src="https://woocommerce.com/wp-content/uploads/2024/11/Frame-52.png" alt="Rearrange Products for WooCommerce" width="980" height="393" /></p>
<h3>Hide the WooCommerce sorting dropdown</h3>
<p>Hide the WooCommerce default sorting dropdown to display products in your selected display order only.</p>
<p><img class="alignnone wp-image-18734005354093" src="https://woocommerce.com/wp-content/uploads/2024/11/Frame-22.png" alt="Hide WooCommerce Dropdown menu for sorting" width="811" height="541" /></p>
<p data-start="52" data-end="125"><strong data-start="52" data-end="76">Seamless Integration</strong><br data-start="76" data-end="79" />Easily works with your existing store setup:</p>
<ul data-start="127" data-end="423">
<li data-section-id="tmmoi8" data-start="127" data-end="206"><strong data-start="129" data-end="150">WooCommerce HPOS:</strong> Fully compatible with High-Performance Order Storage.</li>
<li data-section-id="1q2ql9n" data-start="207" data-end="283"><strong data-start="209" data-end="232">WooCommerce Blocks:</strong> Supports block-based shop and archive templates.</li>
<li data-section-id="3lmad8" data-start="284" data-end="350"><strong data-start="286" data-end="300">Elementor:</strong> Works with Elementor product widgets and loops.</li>
<li data-section-id="sqn684" data-start="351" data-end="423"><strong data-start="353" data-end="367">Any Theme:</strong> Compatible with any properly coded WooCommerce theme.</li>
</ul>
<hr />
<h2>Benefits of Sort Products for WooCommerce</h2>
<ol>
<li><b>Enhanced product visibility:</b> Highlight specific products or new arrivals by customizing their display order.</li>
<li><b>Improved customer experience:</b> Offer a more intuitive and personalized shopping experience by organizing products in a logical and relevant way.</li>
<li><b>Increased sales:</b> Drive more sales by strategically positioning high-performing products and promotions.</li>
<li><b>Simplified product management:</b> Easily manage and organize your product catalog with a user-friendly drag-and-drop interface.</li>
<li><b>Complete customization:</b> Tailor your product display to your specific needs by choosing from 18 sorting options or creating custom sorting rules.</li>
</ol>

Sort Products

<p><b>Sort Products for WooCommerce</b> allows you to <b>reorder</b> <strong>products</strong> with drag & drop and 18 powerful sorting options for categories, subcategories, and tags.</p>

Product Collection Masonry vs Sort Products