Kodlo Product Gallery for Elementor

Mô tả

Build the product gallery your store needs with one Elementor widget.

Kodlo Product Gallery for Elementor replaces the standard WooCommerce product gallery on product pages and in product templates. It brings the controls that are often split across separate gallery widgets into one coherent, responsive gallery that you can shape around each product and breakpoint.

The plugin was created for a practical reason: a clean desktop product grid, a flexible mobile slider, variation-specific media, video, image effects, and loading priorities should work together without forcing you to combine multiple widgets, maintain duplicate responsive layouts, or learn another settings screen.

Why Use Kodlo Product Gallery for Elementor?

• Design each breakpoint intentionally – Present products as a structured desktop grid and turn the same media into a touch-friendly mobile slider at the Elementor breakpoint you choose.
• Keep the workflow familiar – Configure and style the widget through native Elementor panels, icons, responsive controls, and Global Colors, with no standalone Kodlo settings page.
• Avoid duplicate responsive downloads – One rendered media set powers both desktop and mobile behavior instead of asking visitors to download separate image collections.
• Build with performance in mind – Keep images in the native WordPress attachment flow and control priority loading for the media that can affect LCP.
• Use the complete gallery for free – The full feature set is included without advertisements, in-plugin upsells, or a separate premium gallery tier.

Built for Responsive Product Presentation

Kodlo reads the current WooCommerce product on the frontend and provides a product fallback inside the Elementor editor, so the gallery remains visible and configurable while you build the layout.

• 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.
• Choose Where Each View Applies – Keep the Grid on every screen by disabling Mobile View, keep the Slider on every screen by disabling Desktop View, or enable both and switch between them at any active Elementor breakpoint. Breakpoint values remain under your control in Elementor, so you decide exactly where the layout changes or whether it changes at all.
• 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 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, 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.

Security

Security Contact: https://kodlo.dev/

Report a suspected vulnerability privately through the Contact button at that address. Please include every affected plugin version you reproduced, WordPress, PHP, WooCommerce, Elementor and browser details, observed and potential impact, reproducible steps, the required user role or capabilities, and a minimal proof of concept.

Do not include passwords, API keys, access tokens, customer data, or other personal data. Redact sensitive values from logs and screenshots. Do not publish exploit details in a support topic before the report can be assessed and coordinated disclosure arranged. Use the public support forum only for non-sensitive support questions.

The packaged SECURITY.md documents supported versions, coordinated disclosure, and an expected initial response within five business days.

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

PHP 8.2 or newer is recommended for production because it remains supported by the PHP project. PHP 8.1 is the plugin’s minimum compatibility requirement, not a recommendation to operate an unsupported PHP branch.

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.

Permanent plugin deletion removes that operational state and temporary administrator notices. Gallery content stored in attachment and variation post metadata is preserved to prevent accidental product-data loss.

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.