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.

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.
• Video Playback Controls – Configure desktop/mobile autoplay, mute and loop behavior, choose an Elementor play icon, and style its position, size, colors, hover animation, transition, and thumbnail indicator.
• 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.
• Cleans up disconnected Swiper instances and scopes runtime state to each widget.
• Includes semantic buttons, localized labels, keyboard-enabled Swiper navigation, visible :focus-visible styles, descriptive video titles, and hidden-state handling for limited pagination dots.
• Respects prefers-reduced-motion by disabling gallery transitions 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, non-destructive compatibility layer for WooGallery metadata. It can read and lazily migrate video URLs stored in wcgs_video and variation image lists stored in woo_gallery_slider without deleting the original values.