Kodlo Product Gallery For Elementor Wordpress Plugin - Rating, Reviews, Demo & Download
Plugin Description
Kodlo Product Gallery for Elementor replaces the standard WooCommerce product gallery with a flexible Elementor widget designed for modern product pages.
Create a structured multi-column desktop grid and switch to a touch-friendly mobile slider at an active Elementor breakpoint. Product images, videos, variation-specific galleries, captions, links, lightboxes, sale badges, thumbnails, pagination, and navigation are managed from one widget.
Kodlo uses lightweight Vanilla JavaScript for gallery interactions and retains jQuery only for WooCommerce variation events. Frontend assets load through the widget dependency system, so they are requested only on pages where the gallery is used.
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, spacing, border, and hover state.
- 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.
Desktop and mobile variation galleries can be enabled independently, and each view has its 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 and responsive attachment data to reserve media space.
- Leaves
loadingandfetchprioritydecisions to the standard Elementor and WordPress image optimization pipeline. - 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-visiblestyles, descriptive video titles, and hidden-state handling for limited pagination dots. - Respects
prefers-reduced-motionby 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.
Screenshots
Desktop Product Grid – Multi-column product gallery with aspect ratios, image effects, captions, sale badge, and optional stretched grid items.
Mobile Slider and Thumbnails – Touch slider with stable thumbnail layout, pagination, navigation, loop, and optional swipe edge bleed.
