WP Manifestindependent plugin directory
manifest / media / woocommerce-product-gallery-grid

Product Mosaic Grid

Display WooCommerce product images in a dynamic mosaic/collage grid. Supports 2–5 images with adaptive layouts. Use [product_mosaic_grid] shortcode.

by Danish · github.com/danishsalute/woocommerce-product-gallery-grid

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/danishsalute/woocommerce-product-gallery-grid/archive/refs/heads/main.zip
Readme github.com/danishsalute/woocommerce-product-gallery-grid ↗

Product Mosaic Grid — WordPress Plugin v1.1.0

Display WooCommerce product images in a dynamic mosaic/collage grid. Supports 2–5 images with fully adaptive layouts.

Installation

  1. Upload the product-mosaic-grid/ folder to /wp-content/plugins/
  2. Activate via Plugins → Installed Plugins
  3. Requires WooCommerce to be active

Shortcode

[product_mosaic_grid]

No attributes needed! The plugin automatically detects the current product when placed on a product detail page.

Attributes

Attribute Default Description
product_ids auto Comma-separated WooCommerce product IDs. Leave blank to auto-detect.
category — Product category slug
limit 5 Max images to show: 2–5
size large WordPress image size (thumbnail, medium, large, full)
gap 6 Gap between grid cells in px
height 480 Grid height in px
link yes Wrap images in a link to the product page (only used when lightbox="no")
caption yes Show product name as a hover overlay caption
lightbox no Enable WooCommerce Photoswipe lightbox

Lightbox — how it works (v1.1.0)

The lightbox uses WooCommerce's native Photoswipe implementation — the same one that powers the built-in product gallery.

HTML structure emitted (lightbox="yes")

<!-- WooCommerce's JS targets .woocommerce-product-gallery -->
<div class="woocommerce-product-gallery woocommerce-product-gallery--with-images pmg-wc-gallery">

  <!-- pmg-grid drives the CSS mosaic layout -->
  <div class="pmg-grid pmg-count-5 pmg-lightbox-enabled">

    <!-- Each cell: div.woocommerce-product-gallery__image (WooCommerce hook)
         containing an <a> with the data attributes Photoswipe needs -->
    <div class="woocommerce-product-gallery__image pmg-item pmg-item-1">
      <a href="{full}" data-src="{full}"
         data-large_image="{full}"
         data-large_image_width="{w}" data-large_image_height="{h}"
         data-caption="{title}">
        <img src="{large}" alt="…" loading="lazy">
      </a>
    </div>
    <!-- … pmg-item-2 through pmg-item-5 … -->

  </div>
</div>

Why this works

Requirement How it's met
.woocommerce-product-gallery wrapper Emitted by the shortcode when lightbox="yes"
data-src + data-large_image + dimensions Set from wp_get_attachment_image_src( …, 'full' )
Photoswipe scripts + styles enqueued wp_enqueue_script('photoswipe') etc. in pmg_enqueue_assets()
wc-single-product.js enqueued Done unconditionally — it initialises Photoswipe on the gallery
wc_single_product_params config object Injected via wp_localize_script on non-product pages
.pswp DOM container Emitted inline on non-product pages via pmg_photoswipe_container()
Fallback click handler script.js manually binds Photoswipe if WooCommerce's own init missed the gallery

On a product page vs other pages

  • Product page: WooCommerce already outputs .pswp and wc_single_product_params. The plugin's JS detects the gallery and triggers init.
  • Other pages (page builder, custom template): The plugin emits .pswp inline and localises wc_single_product_params itself, then script.js fires the Photoswipe fallback handler.

Grid Layouts

Image count Layout
5 Large left panel + 2×2 right grid
4 2×2 equal grid
3 Large left panel + 2 stacked right
2 Side-by-side equal halves

Mobile (≤ 600 px): all layouts collapse to a single column.

Examples

[product_mosaic_grid]
[product_mosaic_grid lightbox="yes"]
[product_mosaic_grid product_ids="10,22,34" lightbox="yes" height="600"]
[product_mosaic_grid category="accessories" limit="3" lightbox="yes"]
[product_mosaic_grid limit="4" caption="no" link="no"]

Changelog

1.1.0

  • Fixed: Lightbox now correctly uses WooCommerce's native Photoswipe.
    • Emits .woocommerce-product-gallery + .woocommerce-product-gallery__image wrapper structure that WooCommerce's JS targets.
    • Added correct data-src, data-large_image, data-large_image_width/height attributes on every <a>.
    • Enqueues wc-single-product, photoswipe, and photoswipe-ui-default scripts.
    • Injects wc_single_product_params config and .pswp container on non-product pages.
    • script.js now contains a real Photoswipe fallback init handler.
  • Fixed: add_theme_support('wc-product-gallery-lightbox') moved to after_setup_theme (was in wrong hook).
  • Fixed: script.js dependency corrected to ['jquery'].

1.0.0

  • Initial release