Kodlo Product Gallery for Elementor

Deskripsi

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.

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.

Security

Kodlo welcomes responsible security reports. If you believe you have found a vulnerability, report it privately through the Contact button at kodlo.dev. Include every affected version you reproduced, WordPress/PHP/WooCommerce/Elementor and browser details, potential impact, reproducible steps, the required user role or privileges, and a minimal proof of concept. Do not send credentials, access tokens, customer data, or other personal data; redact sensitive values from logs and screenshots. Please avoid public disclosure until the report has been reviewed and coordinated disclosure can be arranged.

Security fixes target the latest published version, so keeping the plugin up to date is recommended.

Privacy

Kodlo Product Gallery for Elementor does not send gallery settings, product data, telemetry, or analytics to Kodlo. Attachment Video URLs and variation gallery image IDs are stored in WordPress post metadata, while Elementor stores the widget configuration in its normal document data.

The optional WooGallery compatibility workflow stores consent, progress, and temporary lock state in WordPress options. It reads only the documented legacy metadata keys and does not copy or delete legacy values without the administrator actions described above.

When a visitor starts a YouTube or Vimeo video, the browser loads the corresponding provider player. A direct MP4 URL is requested from the host named in that URL. Those external services may process visitor data under their own policies; site owners are responsible for selecting providers and configuring any required privacy notice or consent mechanism.