PWD Masonry Gallery
Documentation

Introduction

PWD Masonry Gallery is a powerful, flexible WordPress plugin that transforms how you display content. Whether showcasing WooCommerce products, a stunning image portfolio, blog posts, or any custom post type — this plugin delivers a beautiful responsive masonry grid with advanced filtering and deep Elementor customization.

Requirements

Installation

Method 1 — WordPress Admin

Method 2 — FTP / File Manager

Quick Start

WooCommerce Products

Display your WooCommerce store products in a masonry grid with optional category filters, hover image swap, and complete styling control.

Content Settings

Secondary Image (Hover Swap)

When a WooCommerce product has gallery images, the second gallery image automatically fades in on hover. The plugin smartly detects whether a secondary image exists — if not, no hover effect is applied, avoiding empty blank space.

• Smooth CSS fade transition between primary and secondary images
• Automatically disabled on mobile/touch devices
• Controlled via the has-secondary-image CSS class

Style Options

• Image Size — width, height, max-width, padding, border-radius (responsive)
• Box Style — background, border, border-radius, shadow, padding
• Title Style — HTML tag (H1–H6), color, typography, margin
• Price Style — color and typography
• Button Style — Add to Cart colors (normal/hover/active), typography, padding, border, alignment
• Filter Style — container and item background, padding, border, hover states
• Badge Style — per-badge background color and custom label text; global text color, typography, padding and border-radius shared across all badges

Product Badges

Each badge can be independently toggled on or off in the Content tab. When a badge is enabled its styling controls appear in the Style → Badge Style section. Leave any color empty to inherit from your theme or plugin defaults.

• Sale — shown on products with an active sale price
• Out of Stock — shown when _stock_status is out of stock
• New — shown on products published within the configured day threshold
• Hot — shown on products marked as Featured in WooCommerce

Portfolio Gallery

Display images from your WordPress media library with GLightbox, hover effects, and JSON-based tag categories for instant client-side filtering.

Content Settings

Category Tags — JSON Format

Assign one or more category tags to each image using its WordPress attachment ID:

{
  "123": "landscape, nature, travel",
  "456": "food, lifestyle",
  "789": "architecture, urban"
}

Custom Links — JSON Format

Assign a custom URL to specific images. When a custom link is set, clicking that image opens the URL instead of the lightbox:

{
  "123": "https://example.com/project-alpha",
  "456": "https://example.com/project-beta"
}

Hover Effects

GLightbox

Since v5.5.0, portfolios use GLightbox — an independent, lightweight lightbox library that is completely decoupled from Elementor's JavaScript. This resolves all previously known compatibility issues with aggressive caching and optimization plugins.

• Works with WP Rocket, Seraphinite Accelerator, LiteSpeed Cache, and all similar plugins
• Displays image title and caption
• Touch swipe gestures on mobile
• No Elementor JavaScript dependency

Style Options

• Layout Mode — Grid (equal-height columns) or Masonry (natural height, CSS column-count)
• Image Style — border-radius, border, shadow, hover shadow, transition duration
• Caption Style — color, typography, margin
• Overlay Style — background color and opacity (for overlay hover effects)
• Hover State — hover background color and container padding

Blog Posts

Display WordPress blog posts in a masonry grid with featured images, excerpts, meta information, and AJAX category filtering.

Content Settings

Image Hover Effects

Style Options

• Layout Mode — Grid (standard columns) or Chess (full-width alternating image/text rows, stacks on mobile)
• Featured Image Style — padding, border-radius, border, shadow, hover effect, hover shadow
• Meta Style — color, typography, margin, individual date/author color overrides
• Excerpt Style — color, typography, margin
• Button Style — colors (normal/hover/active), typography, padding, border-radius, border, alignment

Custom Post Type

Display any publicly registered custom post type — Events, Projects, Services, Team Members, Properties, and more — in the masonry gallery with taxonomy-based AJAX filtering and configurable display options.

Content Settings

AJAX Filtering

When Show Category Filters is enabled and a taxonomy is selected, filter links appear above the gallery. Clicking a term fires an AJAX request to pwd_filter_custom_posts — a dedicated, nonce-validated handler that returns re-rendered items matching the selected term. All display settings (show/hide toggles, button text, excerpt length, hover effect) are stored as data-* attributes on the gallery wrapper and forwarded with every filter call, so the rendered output is always consistent with the widget configuration.

Image Hover Effects

Style Options

• CPT Image Style (Style tab) — border-radius (responsive), border, box-shadow, image bottom spacing
• Overlay Background — colour picker for the Info Overlay background (shown only when Info Overlay is selected)
• Overlay Title Colour — colour of the post title text inside the overlay
• Overlay Category Colour — colour of the taxonomy term text inside the overlay
• Overlay Title Typography — full typography control for the title inside the overlay
• Overlay Category Typography — full typography control for the category label inside the overlay
• Box Style — background, border, border-radius, box-shadow, padding (shared with all content types)
• Title Style — HTML tag, colour, typography, margin (shared)
• Button Style — colours (normal/hover), typography, padding, border-radius, border, alignment (shared with Blog)

Typical Use Cases

• Events — CPT: event / Taxonomy: event_category
• Projects / Portfolio posts — CPT: project / Taxonomy: project_type
• Services — CPT: service / Taxonomy: service_category
• Team Members — CPT: team_member / Taxonomy: department
• Properties — CPT: property / Taxonomy: property_type

[pwd_woocommerce_masonry 
  columns_desktop="4" 
  columns_notebook="3" 
  columns_tablet="2" 
  columns_phone="1" 
  products_per_page="6" 
  category="electronics" 
  sortable="true"]

https://cdn.jsdelivr.net/npm/glightbox@3/