Kodlo Product Gallery for Elementor

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 Elementor Lightbox – Display attachment captions and link images to media files or attachment pages. Media-file links support the standard Elementor lightbox; choose Default to follow the global Lightbox configuration in Elementor settings, or enable or disable it for the individual gallery widget.
• Sale Flash – Display the WooCommerce sale badge in a preset or custom-styled position, with an optional link.

Variation Galleries Inside WooCommerce

Build each variation gallery directly inside the familiar WooCommerce Product data panel. Select images through the standard WordPress Media Library, add or remove them, reorder them by drag and drop, or use the accessible ordering controls. The interface follows native WordPress and WooCommerce patterns, with no separate variation-gallery screen to manage.

Variation-specific galleries are commonly placed behind a paid upgrade in product gallery plugins. Kodlo includes this functionality at no cost.

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

Kodlo keeps product images in the native WordPress attachment flow, making its output straightforward for standard caching and image-optimization tools to process. Gallery interactions use lightweight Vanilla JavaScript, with jQuery retained only for WooCommerce variation events.

• 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" .
• 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 base assets through the Elementor widget dependency system only where the widget is used. Swiper loads only when the mobile gallery is enabled, magnifier and edge-bleed assets load only when their features are active on the frontend, and Media Views assets stay limited to relevant administration 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.

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 variable product. The preview opens directly on a polished responsive product page built with Elementor, with two variation-specific sets of five purpose-made product photographs plus a video item. Switch between Graphite and Field Sage to see the gallery update, then use Edit with Elementor to change the desktop grid, test desktop, tablet, and mobile modes, inspect thumbnails and navigation, explore zoom and video 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.

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,