Kodlo Product Gallery for Elementor

Kodlo Product Gallery for Elementor adds a WooCommerce-aware Elementor widget that can replace the standard WooCommerce product gallery inside product pages and product templates. Requires WooCommerce 9.0 or newer and Elementor 3.22 or newer. Elementor Free and Pro are supported; Elementor Pro is required only for Elementor features such as Theme Builder templates. Try the Complete Gallery Before Installing Select Live Preview on WordPress.org to launch a temporary WordPress Playground site with WooCommerce, Elementor, Kodlo Product Gallery, and a prepared demo product. The preview opens directly in Elementor, where you can change the desktop grid, switch to responsive mobile mode, inspect thumbnails and navigation, try the video poster, explore zoom and image behavior, and review the styling controls before adding the plugin to a real store. The preview runs in an isolated disposable browser environment. It does not connect to your production WordPress site, store, customers, orders, or administrator account, and its changes disappear when the Playground session is closed or reset. Create a structured multi-column desktop grid and switch to a touch-friendly mobile slider at the selected Elementor breakpoint. Product images, videos, variation-specific galleries, captions, links, lightboxes, sale badges, thumbnails, pagination, navigation, image effects, and optional image loading attributes are managed from one widget. Kodlo reads the current WooCommerce product context on the frontend and uses an editor preview fallback when editing in Elementor. Gallery interactions use lightweight Vanilla JavaScript, with jQuery retained only for WooCommerce variation events. Frontend assets load through the widget dependency system, so base assets are requested only where the widget is used and optional magnifier or edge-bleed assets load only when those features are active on the frontend. Built for Responsive Product Presentation

• Desktop Product Grid - Choose from 1 to 10 columns, control gaps and image limits, hide the featured image, randomize image order, or stretch the first or last unmatched grid item across all columns.
• Mobile Swiper Gallery - Use a main image slider, optional thumbnail carousel, infinite loop, configurable thumbnail count and gap, navigation arrows, and a limited sliding pagination window.
• Optional Swipe Edge Bleed - Preserve the mobile content gutter at rest, reveal slides through that gutter while dragging, and clip them at the screen edge. Configure the gutter and anchor navigation arrows to either the content edge or screen edge.
• Stable Thumbnail First Paint - The initial thumbnail row is laid out before Swiper initializes, reducing the full-width thumbnail flash and associated layout movement on mobile devices.

Product Media That Goes Beyond Images

• YouTube, Vimeo, and MP4 Video - Add a Video URL directly to an image in the WordPress Media Library. The image remains the poster and thumbnail while the gallery provides inline playback.
• Focused Video Playback - Configure desktop/mobile autoplay, mute and loop behavior while keeping playback centered on the custom Elementor Play button. Native and provider control bars stay hidden; non-loop videos restore the poster and Play button when playback ends.
• Zoom and Magnifier Effects - Select None, Zoom, or Magnifier independently for desktop and mobile. Configure zoom strength, lens size, border, radius, and the accessible mobile magnifier toggle.
• Captions, Links, and Lightbox - Display attachment captions, link images to media files or attachment pages, and use Elementor lightbox behavior.
• Sale Flash - Display the WooCommerce sale badge in a preset or custom-styled position, with an optional link.

Variation Galleries Inside WooCommerce Assign an ordered image gallery to each product variation from the standard WooCommerce variation editor. Images can be added, removed, reordered by drag and drop, or moved with accessible ordering controls. On the storefront, Kodlo supports both complete and partial variation matching. The gallery can respond as soon as a meaningful attribute such as color is selected. Payload fingerprints prevent unnecessary DOM and Swiper rebuilds when the effective visible gallery has not changed, reducing flicker between equivalent variations. Variation galleries can be enabled or disabled for the widget as a whole, while desktop and mobile views each keep their own maximum image limit. Styling in Elementor

• Independent desktop, mobile, thumbnail, pagination, navigation, caption, sale badge, video, zoom, and magnifier controls.
• Aspect-ratio and object-fit presets for desktop images, mobile images, thumbnails, and stretched grid items.
• Normal, hover, and active states for borders, colors, backgrounds, opacity, and radius where applicable.
• Elementor icon library support for navigation, video, and mobile magnifier controls.
• Elementor Global Color-compatible color controls.

Performance and Accessibility Foundations

• Uses native image dimensions, srcset, and sizes attachment data to reserve media space.
• Includes an optional Image Loading Optimization control, disabled by default, for setting per-context priority image counts in the desktop grid, mobile slider, and mobile thumbnails.
• When enabled, priority images receive fetchpriority="high" and decoding="async"; remaining rendered images receive loading="lazy" and decoding="async".
• Skips variation gallery rebuilds when the visible image payload is unchanged.
• Deduplicates variation media metadata in the page payload and primes attachment caches before validation.
• Cleans up disconnected Swiper instances and scopes runtime state to each widget.
• Loads Swiper only when the mobile gallery is enabled and limits Media Views assets to relevant admin screens.
• Includes semantic buttons, localized keyboard-operable navigation controls, visible :focus-visible styles, descriptive video titles, active-thumbnail state, and hidden-state handling for limited pagination dots.
• Respects prefers-reduced-motion by disabling gallery transitions and automatic video playback where appropriate.

Accessibility depends on the complete page, theme, content, colors, and configuration. Kodlo provides accessibility-focused foundations but does not claim automatic compliance for every implementation. WooGallery Compatibility Kodlo includes an optional compatibility layer for WooGallery metadata. Activation safely revokes the previous notice generation, preserves any completed or interrupted progress, and checks only the exact wcgs_video and woo_gallery_slider keys on an authorized administrator request. If supported legacy data is available, Kodlo asks whether it should be migrated. Nothing is copied until a WooCommerce administrator explicitly selects Migrate legacy data. The migration freezes a per-key metadata snapshot and immediately processes protected 50-row AJAX batches on the current administration page while a progress notice remains visible. Public product views stay read-only. Every destination write is tied to the exact selected legacy row and shares an internal per-object lock with normal Kodlo metadata saves, so a newer or explicitly empty Kodlo value remains authoritative. During migration, the notice shows exact processed-row progress and asks the administrator not to reload or leave the page. Failed or repeatedly stalled batches stop automatic requests and expose a Retry button. When both jobs finish, the page automatically loads a completion notice with Keep legacy data as the safest default and Delete safely migrated legacy data as a separate explicit action. Both controls share one native WordPress action row. Safe cleanup uses the same visible protected batch runner, keeps an independent snapshot and cursor for each legacy key, and never crosses the corresponding completed migration boundary. It removes an unchanged legacy row only while its exact Kodlo destination still exists with the migrated value. Unsupported, unmatched, unmigrated, later-created, concurrently changed, or subsequently changed rows remain untouched. SVG Safety SVG attachments accepted by the standard WordPress and Elementor media workflow are supported like other image attachments, without an additional Kodlo-specific approval layer. Deactivation and Permanent Deletion Deactivation stops the widget and its frontend behavior without deleting Elementor widget settings, attachment Video URLs, variation gallery assignments, or migration progress. Reactivating the plugin restores the configured galleries. Permanent deletion through the WordPress Plugins screen removes Kodlo's internal migration state, temporary locks, and administrator failure notices. Authored gallery content remains in WordPress post metadata to prevent accidental product-data loss, so reinstalling the plugin can reuse it. Delete that product content separately only when you intentionally no longer need it.

1. Upload the plugin files to the /wp-content/plugins/kodlo-product-gallery-for-elementor directory, or install the plugin through the WordPress plugins screen.
2. Activate the plugin through the 'Plugins' screen in WordPress.
3. Ensure both WooCommerce and Elementor (Free or Pro) are installed and activated.
4. If Kodlo reports supported WooGallery metadata, review the detected data and select Migrate legacy data only when you want to copy it into Kodlo.
5. Open a WooCommerce product page or Elementor Single Product template, search for Kodlo Product Gallery in the widgets list, and drag it into your layout.

To evaluate the plugin first, use Live Preview on its WordPress.org page. The Playground setup installs the required free dependencies, creates disposable demo media and a product, signs you into the temporary site, and opens the configured gallery in Elementor.

2.9.2

• Live Preview: Added a WordPress Playground Blueprint that installs WooCommerce and Elementor, creates a prepared demo product and local gallery media, and opens the Kodlo widget directly in Elementor.
• Lifecycle: Removes internal migration state, temporary locks, and administrator failure notices on uninstall while preserving authored gallery content.
• Security: Added a packaged vulnerability disclosure policy and documented the isolated Live Preview data boundary.
• Documentation: Expanded feature guidance, pre-install testing, dependency setup, privacy, deactivation, and permanent deletion behavior.

2.9.1

• Fix: Prevents Elementor saves from rendering the product gallery without a WooCommerce product context and triggering a server error.
• Fix: Scoped the mobile Aspect Ratio to the configured breakpoint so desktop and mobile values update their matching Elementor editor previews independently.
• Usability: Runs WooGallery migration and optional safe cleanup immediately through visible protected AJAX batches with exact progress, leave-page protection, stalled-batch recovery, and a single-row Keep/Delete decision.
• Reliability: Adds bounded request timeouts, preserves server error messages, reloads stale migration generations, and stops forbidden requests without a misleading Retry loop.
• Data integrity: Keeps migration and cleanup resumable through immutable boundaries, generation-bound locks, exact-state persistence, and atomic source/destination checks.
• Compliance: Applies final constrained CSS handling, verifies migration nonces before form-data reads, uses the scanner-supported GPL-2.0+ identifier, relies on WordPress just-in-time translation loading, and keeps public release notes within parser limits.
• Maintainability: Removes unreachable migration branches, unused localized or persisted state, repeated batch counts, and false-positive generic metadata array keys while making zero-argument hook contracts explicit.
• Security: Hardened dynamic HTML values, attachment Video URL saves, legacy metadata decoding, nonce validation, and private vulnerability reporting.
• Reliability: Isolated repeated Elementor instances, popup/AJAX initialization, detached-gallery cleanup, video loading, and administrator write-failure feedback.
• Data control: Added explicit activation-scoped WooGallery migration consent, resumable 50-row snapshots, a safe Keep default, and separately confirmed cleanup.
• Data integrity: Added exact-source create-only migration, shared object locks, generation fencing, compare-and-swap progress, and concurrent-edit-safe cleanup.
• Performance: Primed migration and attachment caches, paginated Multisite activation discovery, removed repeated variation work, deduplicated media JSON, and kept exact-key queries index-eligible.
• Video: Uses a custom Play-only flow with hidden native/provider control bars, opt-in looping, and automatic poster restoration after non-loop playback.
• Accessibility: Respected reduced motion, localized Swiper messages, improved thumbnails, pagination targets, and admin alternative text.
• Compatibility: Declared PHP 8.1, WordPress 6.6, WooCommerce 9.0, Elementor 3.22, HPOS compatibility, testing through WordPress 7.1, WooCommerce 11.0.1, Elementor 4.2.3, and Elementor Pro 4.2.2, conditional Swiper, and standard Elementor SVG handling.
• Maintainability: Split frontend and migration responsibilities, normalized project formatting, regenerated translations, and expanded native regression contracts.

2.9.0

• Compliance: Documented the approved synchronous per-widget dynamic CSS exception and fixed pre-initialization mobile slide spacing.

2.8.1

• Fix: Prevented pagination and grid-gap layout shifts and verified independent device image-effect settings.

2.8.0

• Optimization: Unified desktop and mobile gallery markup, generated breakpoint styles from Elementor settings, restored Edge Bleed behavior, and synchronized the corrected text domain and translations. Earlier detailed release notes are preserved in the project documentation archive.