<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>Display Product Gallery Images With a Slider</h2>
<p><b>WooCommerce product gallery slider plugin</b><span style="font-weight: 400"> adds a slider of gallery images to product pages. Customers can easily browse through all images with the slider—no need to press pictures one by one.</span></p>
<p><span style="font-weight: 400">Admin has the option to display auto-sliding images. With auto-sliding images, store owners control the images their customers see. Showing customers more images leads to improved user engagement and conversions.</span></p>
<p><b>The product gallery slider for WooCommerce</b><span style="font-weight: 400"> allows you to customize the image sliders to match each store. You can also set the position of the slider in various layouts, including horizontal, vertical left, and vertical right. Customers can also see all images or videos in a lightbox and zoom image sizes.</span></p>
<div class="woo-sc-box normal">If you want to add product featured videos in place of product thumbnails, checkout the <a href="https://woocommerce.com/products/add-featured-videos-in-product-gallery/">WooCommerce product video gallery plugin</a>.</div>
<p><span style="font-weight: 400">The WooCommerce Product Gallery Slider plugin enhances product galleries with a sleek slider interface, improving user experience and potentially boosting sales. With customization options and mobile responsiveness, it’s a valuable tool for any e-commerce store.</span></p>
<h3>Features List</h3>
<ul>
<li style="font-weight: 400"><span style="font-weight: 400">Add Gallery Slider to specific products or categories</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Upload or embed videos to the product gallery</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Multiple Bullet, Arrow, & Lightbox Styles</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Use a lightbox to exhibit images and videos</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Autoplay Image Gallery in a Slider</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Customers can zoom in on product images</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Set a layout for the gallery slider</span></li>
</ul>
<div class="woo-sc-box normal" style="background-color: #beecba">This Plugin is fully compatible with HPOS(High-Performance Order Storage) and Multisite.</div>
<h3><b>Display Product Images in a Gallery Slider</b></h3>
<p><span style="font-weight: 400">Do you have too many images of your products? The wooCommerce product gallery slider plugin helps you transform the default WooCommerce product gallery into a user-friendly product gallery slider. This allows your customers to compare products and make better purchase decisions by browsing and sliding images.</span></p>
<p><img class="aligncenter wp-image-7778155 size-full" src="https://woocommerce.com/wp-content/uploads/2021/03/Untitled-Project.gif" alt="Display Product Images in a Gallery Slider" width="908" height="540" /></p>
<h3>Unlimited Additional Variation Images</h3>
<p>WooCommerce normally lets you add just one image per product variation. But with the Product Gallery Slider plugin, you can assign unlimited images to each variation. When customers switch between options—like color, size, or style—they’ll see a dedicated set of images for their selection. This helps display your products in more detail, improving the shopping experience and boosting sales.</p>
<h3><b><img class="aligncenter wp-image-18734005362791 size-full" src="https://woocommerce.com/wp-content/uploads/2021/03/image-7.png" alt="" width="1197" height="875" /><br />
Grow Product Gallery with Videos & improve Landing page visibility!</b></h3>
<p><span style="font-weight: 400">Easily embed videos in your WooCommerce product gallery along with images. The plugin helps you improve the visibility of landing pages with captivating and explanatory videos. The admin can easily add videos from the backend. Go to the products tab and click on the “Product Videos” tab. You can add videos by URL or upload them from your computer and add multiple videos by clicking the “Add New URL” button.</span></p>
<p><img class="aligncenter wp-image-7778156 size-full" src="https://woocommerce.com/wp-content/uploads/2021/03/Grow-Product-Gallery-with-Videos.png" alt="Grow Product Gallery with Videos & improve Landing page visibility!" width="752" height="542" /></p>
<h3><b>Enable Fullscreen Lightbox View</b></h3>
<p><span style="font-weight: 400">WooCommerce product gallery slider enables customers to use a lightbox view for displaying product images and videos to users. The lightbox functionality enables users to open the full-size image in a modal window, to look closely, zoom in on images, show thumbnails, and more to attract clients and increase sales.</span></p>
<p><img class="aligncenter wp-image-7778144 size-full" src="https://woocommerce.com/wp-content/uploads/2021/03/Display-Gallery-Items-in-Lightbox.png" alt="Enable Fullscreen Lightbox View" width="886" height="598" /></p>
<h3><b>Display Bullets for Slider</b></h3>
<p><span style="font-weight: 400">You can display bullets with multiple shapes. Choose the position of bullets on the image i.e. Top, Bottom, Right, Left, etc.</span></p>
<h4><strong>Inside Image</strong></h4>
<p><img class="aligncenter wp-image-8605771 size-full" src="https://woocommerce.com/wp-content/uploads/2021/03/Bullets.png" alt="WooCommerce Image Gallery Slider - Display Bullets for Slider" width="802" height="489" /></p>
<h4><strong>Below Image</strong></h4>
<p><img class="aligncenter wp-image-8605796 size-full" src="https://woocommerce.com/wp-content/uploads/2021/03/below-image.png" alt="WooCommerce Image Gallery Slider - Display Bullets for Slider" width="796" height="475" /></p>
<h3><strong>Allow Customers to zoom in on images</strong></h3>
<p><span style="font-weight: 400">The WooCommerce product gallery slider allows your customers to zoom in on product images for a clear view. By configuring zoom options, your users can view the fabric, make, model, design, and style of the catalog items.</span></p>
<p><img class="aligncenter wp-image-7778145 size-full" src="https://woocommerce.com/wp-content/uploads/2021/03/Allow-Customers-to-zoom-in-images.png" alt="Allow Customers to zoom in on images" width="752" height="512" /></p>
<h3><b>Choose the Product Gallery Layouts To Display</b></h3>
<p><span style="font-weight: 400">The Woo Gallery Slider plugin offers different engaging layouts to display your product, variation images, and videos. Each slider layout provides a different navigation style and visual depiction. Select a gallery slider layout that best suits your product display requirements and design goals.</span></p>
<ul>
<li style="font-weight: 400"><span style="font-weight: 400">Horizontal</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Vertical left </span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Vertical right</span></li>
</ul>
<p><img class="aligncenter wp-image-7778149 size-full" src="https://woocommerce.com/wp-content/uploads/2021/03/Choose-a-slider-layout.png" alt="Choose the Product Gallery Layouts To Display" width="782" height="1178" /></p>
<h3><b>Benefits of Adding Product Gallery Slider for WooCommerce</b></h3>
<ul>
<li style="font-weight: 400"><span style="font-weight: 400">Improves the user’s experience with product pages</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Attract customers with auto-sliding gallery images</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Ideal for merchants with large portfolios of product images</span></li>
</ul>
<h2>Compatibility</h2>
<p>Our plugins are designed to be highly versatile and also compatible with the most commonly used themes, browsers, builders, and mobile views. We understand the importance of flexibility and integration when it comes to enhancing your website’s functionality. Our plugins can effortlessly integrate with the following:</p>
<h3>Themes Compatibility</h3>
<ul>
<li>Store Front</li>
<li>Avada</li>
<li>Flatsome</li>
<li>Porto</li>
<li>Woodmart</li>
<li>Divi</li>
</ul>
<h3>Builders</h3>
<ul>
<li>Elementor</li>
<li>Bakery</li>
<li>Divi</li>
<li>Page Layer</li>
</ul>
<h3>Also Compatible with</h3>
<ul>
<li>Multi-Site</li>
<li>Mobile Layouts</li>
</ul>
<h3>Get Started</h3>
<ol>
<li>Purchase <strong>Product Gallery Slider for WooCommerce</strong> from <strong>WooCommerce.com</strong></li>
<li>Download and install the extension</li>
<li>Activate the extension</li>
<li>Go to the <strong>WooCommerce > Settings></strong> <strong>Gallery Slider</strong> tab to enable and configure the settings</li>
<li>Read the full installation guide <strong><a href="https://woocommerce.com/document/product-gallery-slider-for-woocommerce/">here</a></strong></li>
</ol>
<h3>Requirements</h3>
<p>Minimum PHP version: 5.2</p>
<table class="borderless">
<tbody>
<tr>
<td><img class="alignnone wp-image-18734002262567" src="https://woocommerce.com/wp-content/uploads/2014/08/unnamed-1.png?w=320" alt="WooCommerce Product Gallery Slider - documentation" width="120" height="105" /></td>
<td>
<h2>Documentation</h2>
<p>Looking for assistance? Check out the extensive documentation for a complete understanding of the WooCommerce Product Gallery Slider plugin.</p>
<h4><a href="https://woocommerce.com/document/product-gallery-slider-for-woocommerce/" target="_blank" rel="noopener">View documentation</a></h4>
</td>
</tr>
</tbody>
</table>
<table class="borderless">
<tbody>
<tr>
<td><img class="alignnone wp-image-18734002262567" src="https://fmablog.fmeaddons.com/wp-content/uploads/2023/10/Questions-and-Support.png" alt="woocommerce FmeAddons Support" width="120" height="105" /></td>
<td>
<h2>Questions and Support</h2>
<p>For Questions and Support: If you have inquiries before making a purchase or require assistance, don’t hesitate to contact our support team.</p>
<p><a href="mailto:support@fmeaddons.com">Send email</a></td>
</tr>
</tbody>
</table>

Product Gallery Slider

<p>Add a customizable image gallery slider to the product page and allow customers to make informed purchase decisions.</p>

Product Collection Masonry vs Product Gallery Slider