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

Product Mosaic Grid

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

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/danishsalute/woocommerce-product-gallery-grid/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
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