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

<h3>Key Features</h3>
<ul>
<li data-start="128" data-end="181"><strong data-start="73" data-end="93">Gallery Layouts:</strong> Choose vertical, horizontal, or thumbnail gallery styles.</li>
<li data-start="184" data-end="243"><strong data-start="156" data-end="174">Apply Sliders:</strong> Show sliders for selected products, categories, or user roles.</li>
<li data-start="246" data-end="291"><strong data-start="242" data-end="259">Zoom Options:</strong> Enable lens, window, or inner zoom modes for detailed viewing.</li>
<li data-start="294" data-end="340"><strong data-start="327" data-end="350">Slideshow Features:</strong> Supports autoplay, pause on hover, and lazy load for smooth performance.</li>
<li data-start="343" data-end="390"><strong data-start="428" data-end="454">Customizable Lightbox:</strong> Display larger product images in a stylish, full-screen view.</li>
<li data-start="393" data-end="428"><strong data-start="521" data-end="544">Modern Transitions:</strong> Switch images with smooth slide or fade effects.</li>
<li data-start="431" data-end="481"><strong data-start="598" data-end="623">Thumbnail Navigation:</strong> Adjust thumbnail size, borders, and navigation style.</li>
<li data-start="484" data-end="555"><strong data-start="682" data-end="701">Social Sharing:</strong> Share products on Facebook, Twitter, Pinterest, Instagram, and WhatsApp.</li>
<li data-start="558" data-end="601"><strong data-start="779" data-end="803">Navigation Controls:</strong> Use customizable arrows and bullets for a modern gallery look.</li>
<li data-start="604" data-end="655"><strong data-start="871" data-end="886">Easy Setup:</strong> Configure everything from the admin panel—no coding needed.</li>
</ul>
<hr />
<p data-start="154" data-end="677">The <strong data-start="158" data-end="200">Product Gallery Slider for WooCommerce</strong> transforms your default product gallery into an engaging, interactive showcase that highlights every detail of your products. With flexible layouts, advanced zoom options, customizable thumbnails, and smooth navigation controls, this plugin gives your store a modern, professional look while making it easier for customers to explore your items. From lightbox viewing to stylish arrows, bullets, and transitions, every feature is designed to enhance the shopping experience.</p>
<p data-start="679" data-end="1196">Beyond stunning visuals, the plugin offers practical tools to boost sales and engagement. Customers can share products instantly across social media platforms, browse seamlessly with autoplay and lazy load, and enjoy distraction-free full-screen views. Store owners get complete control from the admin panel—no coding required. Whether you’re selling fashion, electronics, or handmade items, the <strong data-start="1075" data-end="1117">Product Gallery Slider for WooCommerce</strong> ensures your products look their best and stand out in a competitive market.</p>
<h3>5 Different Gallery Layouts</h3>
<p>WooCommerce Gallery Slider allows you to choose from 5 different gallery slider layouts like</p>
<ul>
<li>Horizontal Layout</li>
<li>Vertical Left Layout</li>
<li>Vertical Right Layout</li>
<li>Column Grid 1</li>
<li>Column Grid 2</li>
</ul>
<p><img class="alignnone wp-image-18734005659705" src="https://woocommerce.com/wp-content/uploads/2025/08/Frame-23.png" alt="Gallery Slider for WooCommerce Layouts" width="686" height="481" /></p>
<h3>Auto Gallery Slider with Speed Options</h3>
<p>Enable an auto-sliding gallery with customizable speed options, ensuring a smooth and engaging product viewing experience.</p>
<p><img class="alignnone size-full wp-image-18734005726301" src="https://woocommerce.com/wp-content/uploads/2025/08/image-29.png" alt="Gallery Slider for WooCommerce" width="980" height="513" /></p>
<h3>Display Videos in Slider</h3>
<p>Upload or embed videos from YouTube, Vimeo, or use self-hosted files, and display them directly in your product gallery alongside images for a richer, interactive shopping experience.</p>
<p><img class="alignnone size-full wp-image-18734005738806" src="https://woocommerce.com/wp-content/uploads/2025/08/Frame-34.png" alt="Upload or Embed Videos for WooCommerce" width="980" height="624" /></p>
<h3><strong data-start="47" data-end="88">Customizable Thumbnail Navigation</strong></h3>
<p>Show product previews with fully adjustable thumbnails. Control size, borders, and colors to match your store design and highlight active selections.</p>
<p><img class="alignnone size-full wp-image-18734005738424" src="https://woocommerce.com/wp-content/uploads/2025/08/Frame-28.png" alt="Customize Thumbnails for WooCommerce Gallery Slider" width="980" height="438" /></p>
<h3><strong data-start="42" data-end="71">Stylish Arrow Controls</strong></h3>
<p>Enhance gallery navigation with next and previous arrows. Customize shapes, sizes, colors, and hover effects to perfectly fit your store’s style.</p>
<p><img class="alignnone size-full wp-image-18734005738427" src="https://woocommerce.com/wp-content/uploads/2025/08/Frame-29.png" alt="Customize Arrows for WooCommerce Gallery Slider" width="980" height="622" /></p>
<h3><strong data-start="47" data-end="78">Bullet Navigation Options</strong></h3>
<p>Guide shoppers smoothly through your gallery with dot or number bullets. Customize size, color, spacing, and position for a seamless browsing experience.</p>
<p><img class="alignnone size-full wp-image-18734005738428" src="https://woocommerce.com/wp-content/uploads/2025/08/Frame-30.png" alt="Customize Bullets for WooCommerce Product Gallery Slider" width="980" height="624" /></p>
<h3><strong data-start="64" data-end="93">Lightbox Viewer Option</strong></h3>
<p>Let customers explore enlarged product images in a sleek lightbox. Enable zoom, slideshow, fullscreen, thumbnails, and close button for a rich viewing experience.</p>
<p><img class="alignnone size-full wp-image-18734005738430" src="https://woocommerce.com/wp-content/uploads/2025/08/Frame-31.png" alt="Lightbox Viewer option for WooCommerce Product Gallery Slider" width="980" height="529" /></p>
<h3><strong data-start="46" data-end="80">Advanced Zoom Functionality</strong></h3>
<p>Give shoppers a closer look with lens, window, or inner zoom options. Customize zoom level, box size, borders, and lens shape for detailed product viewing.</p>
<p><img class="alignnone size-full wp-image-18734005738433" src="https://woocommerce.com/wp-content/uploads/2025/08/Frame-32.png" alt="Zoom Functionaity for WooCommerce Gallery Slider" width="980" height="539" /></p>
<h3><strong data-start="43" data-end="73">Built-in Social Sharing</strong></h3>
<p>Boost product visibility by letting customers share directly from the gallery. Supports Facebook, Twitter, Pinterest, Instagram, and WhatsApp.</p>
<p><img class="alignnone size-full wp-image-18734005738434" src="https://woocommerce.com/wp-content/uploads/2025/08/Frame-33.png" alt="Product Gallery Slider for WooCommerce Social Sharing" width="980" height="356" /></p>
<h4>Getting Started</h4>
<ul>
<li data-start="60" data-end="197"><strong data-start="60" data-end="67">Buy</strong> <em data-start="68" data-end="106">Product Gallery Slider Pro for WooCommerce</em> directly from <a href="https://woocommerce.com/products/products-gallery-slider-pro/ ‎">WooCommerce.com</a>.</li>
<li data-start="201" data-end="272"><strong data-start="201" data-end="213">Download</strong> the plugin and <strong data-start="229" data-end="240">install</strong> it on your WooCommerce store.</li>
<li data-start="276" data-end="331"><strong data-start="276" data-end="288">Activate</strong> the plugin from the WordPress dashboard.</li>
<li data-start="335" data-end="443">Go to <strong data-start="341" data-end="381">WooCommerce > Gallery Slider </strong>to set up rules and enable file uploads for your customers.</li>
<li data-start="447" data-end="509"><strong>Need help?</strong> View the complete<strong data-start="458" data-end="508"> installation & Configuration guide <a href="https://woocommerce.com/document/products-gallery-slider-pro/">here</a></strong>.</li>
</ul>

Product Gallery Slider Pro

<p>Product Gallery Slider for WooCommerce allows you to create engaging galleries with zoom, transitions, lightbox, and custom layouts.</p>

Product Collection Masonry vs Product Gallery Slider Pro