<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>Works for simple and variable products</li>
<li>Easy to create and use the Product Specification Table</li>
<li>Multiple field types supported[i.e Text, Radio, Select-box, Image, Hyperlink & more] in the attribute creation</li>
<li>Create multiple Specification Tables for a single product</li>
<li>Table elements can combine into groups, and you can use them across multiple tables</li>
<li>Shortcode for displaying the Product Specification Table</li>
<li>An option to Hide the Product Specification Tab when the Shortcode is used to display the Specification Table</li>
<li>An option to hide certain attribute(s) of the respective Group(s) in the Product Specification Table while configuring it under the product</li>
<li>Sorting supported for the Attributes in the Group, Groups in the Table and Attributes of the respective Table under each product configuration</li>
<li>An option to bulk update to assign Specification Table with products</li>
<li>An option added to display the Specification Table when clicking the link</li>
<li>An option to Hide the WooCommerce Specification Table display when the plugin’s Specification Table is available in the Product</li>
<li>Highly customizable</li>
</ul>
<hr />
<h2>Display Product Details in a Table</h2>
<p><strong>Product Specification Table for WooCommerce</strong> allows you to create and display product details in tables on the product pages.</p>
<h2><strong>Benefits</strong></h2>
<p><strong>Reduces cart abandonment</strong></p>
<p>Customers can view all product details so they can complete their purchases without hesitation.</p>
<p><strong>Customer-friendly</strong></p>
<p>Your customers can easily view all product details and make their purchase decisions accordingly.</p>
<h2><strong>How does it work?</strong></h2>
<p><strong>Group configuration</strong></p>
<p>The first step in creating a Product Specification Table is making the Groups available. With Groups, you can bundle multiple table elements (attributes) in each Group. Use created groups later to create any number of tables.</p>
<figure style="width: 1080px" class="wp-caption alignnone"><img src="https://woocommerce.com/wp-content/uploads/2021/10/pst-group-configuration.png" alt="" width="1080" height="608" /><figcaption class="wp-caption-text"><strong>Group Configuration</strong></figcaption></figure>
<p><strong>Attribute configuration</strong></p>
<ul>
<li>Attributes are elements that display in the Table. One or more attributes can link to a Group.</li>
<li>The following type of fields supported in the attribute creation,
<ul>
<li>Text</li>
<li>Select</li>
<li>Radio</li>
<li>Text Area</li>
<li>Checkbox</li>
<li>Hyperlink</li>
<li>Image</li>
</ul>
</li>
</ul>
<figure id="attachment_18734004123490" aria-describedby="caption-attachment-18734004123490" style="width: 980px" class="wp-caption alignnone"><img class="wp-image-18734004123490 size-full" src="https://woocommerce.com/wp-content/uploads/2021/10/100_Attributes-with-types.png" alt="" width="980" height="536" /><figcaption id="caption-attachment-18734004123490" class="wp-caption-text"><strong>Attribute Configuration</strong></figcaption></figure>
<p><strong>Table configuration</strong></p>
<p>Within this section, you can create Tables by selecting the available Groups and its attributes. You can sort the selected Groups as per your preferences. This sorting is helps in the Table value display when it is selected under the respective product configuration.</p>
<figure style="width: 1080px" class="wp-caption alignnone"><img src="https://woocommerce.com/wp-content/uploads/2021/10/pst-table-configuration.png" alt="" width="1080" height="608" /><figcaption class="wp-caption-text"><strong>Table Configuration</strong></figcaption></figure>
<p><strong>Linking tables to products</strong></p>
<ul>
<li>Once you have created the Groups, Attributes and Tables, assign the tables to products.</li>
<li>Create a New Product or edit an existing product.</li>
<li>In the General section of the product configuration, select the Table you want to display for this product under the Select a Table option.</li>
<li>Once you select the Table, all the attributes linked to the Table will display in the same order you have configured.</li>
</ul>
<figure id="attachment_18734004123497" aria-describedby="caption-attachment-18734004123497" style="width: 980px" class="wp-caption alignnone"><img class="wp-image-18734004123497 size-full" src="https://woocommerce.com/wp-content/uploads/2021/10/101_Linking-Tables-to-Products.png" alt="" width="980" height="570" /><figcaption id="caption-attachment-18734004123497" class="wp-caption-text"><strong>Configuring Table on Product Page</strong></figcaption></figure>
<ul>
<li>You can change the Attribute Values as per your need for this product and Publish it.</li>
<li>You can hide the specific attributes as per your need for this product using the respective field which is available under the Hide Attribute column.</li>
<li>You can sort the attributes as per your need for this product using the sort field which is available in the respective attributes.</li>
<li>To create a second table, click on the Add Rule button and repeat the process.</li>
<li>Once the changes have been saved, the Product Specification Table will be displayed on the selected product page under the Product Specifications section.</li>
</ul>
<figure id="attachment_18734004123502" aria-describedby="caption-attachment-18734004123502" style="width: 980px" class="wp-caption alignnone"><img class="wp-image-18734004123502 size-full" src="https://woocommerce.com/wp-content/uploads/2021/10/102-Specification-Table-display_Product-Page.png" alt="" width="980" height="449" /><figcaption id="caption-attachment-18734004123502" class="wp-caption-text"><strong>Product Specification Table Visible on Product Page</strong></figcaption></figure>
<h2>Update the Specification Table in Bulk</h2>
<figure id="attachment_18734004123505" aria-describedby="caption-attachment-18734004123505" style="width: 980px" class="wp-caption alignnone"><img class="wp-image-18734004123505 size-full" src="https://woocommerce.com/wp-content/uploads/2021/10/103_Bulk-Update-Table_Settings.png" alt="" width="980" height="359" /><figcaption id="caption-attachment-18734004123505" class="wp-caption-text"><strong>Bulk Update Settings</strong></figcaption></figure>
<ul>
<li>If you want to update the same specification for more than one products or products of a specific categories, then you can achieve it using the Bulk Update settings.</li>
<li>Select the Eligible Products/Categories using the Product Filter & the respective specification Table under Bulk Update settings and click the Bulk Update button.</li>
</ul>
<h3>Requirements</h3>
<p>Minimum PHP version: 5.6</p>

Product Specification Table

<p>Create and display product details in tables on product pages with Product Specification Table for WooCommerce.</p>

Product Collection Masonry vs Product Specification Table