Title: Kodlo Product Gallery for Elementor
Author: Kodlo
Published: <strong>July 10, 2026</strong>
Last modified: July 10, 2026

---

Search plugins

![](https://s.w.org/plugins/geopattern-icon/kodlo-product-gallery-for-elementor.
svg)

# Kodlo Product Gallery for Elementor

 By [Kodlo](https://profiles.wordpress.org/kodlo/)

[Download](https://downloads.wordpress.org/plugin/kodlo-product-gallery-for-elementor.2.9.0.zip)

 * [Details](https://wordpress.org/plugins/kodlo-product-gallery-for-elementor/#description)
 * [Reviews](https://wordpress.org/plugins/kodlo-product-gallery-for-elementor/#reviews)
 *  [Installation](https://wordpress.org/plugins/kodlo-product-gallery-for-elementor/#installation)
 * [Development](https://wordpress.org/plugins/kodlo-product-gallery-for-elementor/#developers)

 [Support](https://wordpress.org/support/plugin/kodlo-product-gallery-for-elementor/)

## Description

**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.

## Installation

 1. Upload the plugin files to the `/wp-content/plugins/kodlo-product-gallery-for-elementor`
    directory, or install the plugin through the WordPress plugins screen.
 2. Activate the plugin through the ‘Plugins’ screen in WordPress.
 3. Ensure both WooCommerce and Elementor (Free or Pro) are installed and activated.
 4. Open a WooCommerce product page or Elementor Single Product template, search for**
    Kodlo Product Gallery** in the widgets list, and drag it into your layout.

## FAQ

### Does it require Elementor Pro?

The widget itself works with Elementor Free or Pro, but it needs a WooCommerce product
context on the frontend. Place it on a product page or inside a Single Product template.
Building Single Product templates with Elementor Theme Builder requires the relevant
Elementor Pro functionality.

### Can I use it on a normal non-product page?

Only when that page has a valid WooCommerce product context. The frontend renderer
looks for the current WooCommerce product and does not output a gallery when no 
product can be resolved. In the Elementor editor, the preview can fall back to the
first product so the widget remains editable.

### Does it support variable WooCommerce products?

Yes. Assign galleries in the WooCommerce variation editor. Kodlo supports complete
variation events and partial matching while attributes are being selected.

### How do I attach videos to my gallery?

Open an image in the WordPress Media Library, enter a YouTube, Vimeo, or direct 
MP4 URL in the Video URL field, and save the attachment. The image becomes the video
poster and gallery thumbnail.

### How does Mobile Swipe Edge Bleed work?

Enable Swipe Edge Bleed in the widget’s General settings section. Match Mobile Side
Gutter to the horizontal mobile padding around the gallery. Slides remain inside
the content gutter at rest, can travel through it while swiping, and are clipped
again after the slider snaps. Navigation Arrows Edge applies the same content-edge
or screen-edge anchor to both main and thumbnail arrows.

### Does the plugin include accessibility support?

Yes. Kodlo includes keyboard-enabled navigation, semantic buttons, localized labels,
visible focus states, descriptive embedded-video titles, reduced-motion support,
and pagination visibility management. Final accessibility still depends on the surrounding
page, theme, content, colors, and widget configuration.

### How is image loading optimized?

Kodlo always outputs attachment dimensions and responsive image data. By default
it does not add custom `loading`, `fetchpriority`, or `decoding` attributes. If 
Image Loading Optimization is enabled, the configured first images in the desktop
grid, mobile slider, and mobile thumbnails receive `fetchpriority="high"` and `decoding
="async"`, while the remaining rendered images receive `loading="lazy"` and `decoding
="async"`.

### Does it import data from WooGallery?

Yes. The optional compatibility layer checks WooGallery video URLs (`wcgs_video`)
and variation gallery image lists (`woo_gallery_slider`). It can migrate values 
to Kodlo metadata without deleting the original data.

## Reviews

There are no reviews for this plugin.

## Contributors & Developers

“Kodlo Product Gallery for Elementor” is open source software. The following people
have contributed to this plugin.

Contributors

 *   [ Kodlo ](https://profiles.wordpress.org/kodlo/)
 *   [ Anatoliy ](https://profiles.wordpress.org/imaginary222/)

[Translate “Kodlo Product Gallery for Elementor” into your language.](https://translate.wordpress.org/projects/wp-plugins/kodlo-product-gallery-for-elementor)

### Interested in development?

[Browse the code](https://plugins.trac.wordpress.org/browser/kodlo-product-gallery-for-elementor/),
check out the [SVN repository](https://plugins.svn.wordpress.org/kodlo-product-gallery-for-elementor/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/kodlo-product-gallery-for-elementor/)
by [RSS](https://plugins.trac.wordpress.org/log/kodlo-product-gallery-for-elementor/?limit=100&mode=stop_on_copy&format=rss).

## Changelog

#### 2.9.0

 * Feature: Fully documented inline style usage with robust justification comments
   and PHPCS ignores to comply with WordPress.org guidelines.
 * Fix: Added pre-initialisation slide margin rule to match Swiper’s default gap
   on mobile, preventing adjacent slide slivers from peeking through due to subpixel
   rendering before Swiper boots.

#### 2.8.1

 * Fix: Fixed pagination pre-initialisation height rule to prevent double-spacing
   margin layout shifts when Swiper loads.
 * Fix: Neutralised CSS grid gap on mobile flex wrapper to prevent cumulative Swiper
   slide offset during swiping.
 * Verification: Confirmed independent device settings for image zoom/magnifier,
   and validated grid layout locking (disabling swiping gestures) on desktop viewports.

#### 2.8.0

 * Optimization: Unified the desktop grid and mobile slider into a single Swiper
   HTML container structure to prevent grid flashing (FOUC) on mobile devices, eliminate
   duplicate DOM nodes, and support dynamic custom breakpoints.
 * Fix: Restored clean, standard inline dynamic CSS tag rendering inside widget 
   markup for instant layout parsing and FOUC prevention.
 * Fix: Generated visibility and layout rules dynamically using configured Elementor
   breakpoints instead of static media queries.
 * Fix: Neutralised CSS grid gap on mobile flex wrapper to prevent cumulative Swiper
   slide offset during swiping.
 * Fix: Added pre-initialisation full-width slide rule to prevent adjacent slide
   slivers from peeking through before Swiper loads.
 * Fix: Restored original mobile edge-bleed CSS with clip-path idle/active transitions
   and wrapper stretching, fully compatible with the unified structure.
 * Fix: Removed static slide display/width overrides from the global stylesheet 
   and moved them into desktop-only dynamic CSS.
 * Fix: Removed inline display grid style override from JavaScript boot and simplified
   device-range detection.
 * Fix: Updated hover magnifier script selectors and device checking to support 
   the unified slider container.
 * Fix: Solved JavaScript syntax error (unexpected token ‘)’) in frontend widget
   script.
 * Compatibility: Updated Elementor desktop style controls to map gap, border-radius,
   lens, and border settings to the new unified classes.
 * Compliance: Replaced fallback dynamic CSS output in wp_footer with a fully-compliant
   enqueued virtual stylesheet using wp_add_inline_style.
 * Maintenance: Renamed translation files (uk, de_DE) to match the correct text 
   domain `kodlo-product-gallery-for-elementor`.
 * Fix: Added missing resource version parameter to virtual stylesheet registration
   to prevent caching warnings.
 * Clean: Reviewed stylesheet for dead code or duplicates.

#### 2.7.9

 * Feature: Added “View details” link in the plugin row meta on the Plugins list
   page.
 * Compliance: Replaced inline `<style>` tag with `wp_add_inline_style()` + `wp_footer`
   fallback for per-widget dynamic CSS – addresses WordPress.org enqueue guidelines.
 * Compliance: Added `esc_attr()` escaping to all boolean ternary outputs in HTML
   attributes and class values.
 * Fix: Removed UTF-8 BOM from all PHP files – fixes “15 characters of unexpected
   output during activation” error and stray  characters in rendered HTML.
 * Compliance: Added `woocommerce` to the `Requires Plugins` header so WordPress
   6.5+ enforces both Elementor and WooCommerce as required dependencies before 
   activation.
 * Maintenance: Renamed plugin folder and main file to `kodlo-product-gallery-for-
   elementor` to match the WordPress.org plugin slug.
 * Maintenance: Updated translation files (uk, de_DE) to version 2.7.9 with new “
   View details” strings.

#### 2.7.8

 * Maintenance: Unified ABSPATH security guard to `defined( 'ABSPATH' ) || exit;`
   across all PHP files, replacing the multi-line `if`-block form used in include
   files.
 * Maintenance: Renamed all PHP include files to carry the `kodlo-elementor-gallery-`
   prefix, consistent with WordPress plugin naming conventions and easier to identify
   during profiling.
 * Maintenance: Renamed all JS and CSS asset files to include the `kodlo-elementor-
   gallery-` prefix for easier identification in browser developer tools.
 * Fix: Removed duplicate Ukrainian translation files (`uk_UA.po` / `uk_UA.mo`) –
   the correct WordPress locale for Ukrainian is `uk`, not `uk_UA`; the files were
   never loaded by WordPress.
 * Maintenance: Added missing POT translation template file (`kodlo-elementor-gallery.
   pot`).
 * Cleanup: Removed orphaned `mobile-edge-bleed.php` controls file – its controls
   had been merged into General settings in a previous release but the file was 
   not removed.

#### 2.7.6

 * Fix: Merged separate Product Variations toggles (desktop/mobile) into a single
   control in General settings – the setting was split but both desktop and mobile
   always mirrored the same intent; the unified control removes the redundancy and
   the two orphaned description strings from translations.

#### 2.7.5

 * Cleanup: Normalized boolean data attributes – show_pagination, mute_videos, loop_videos,
   loop_mobile now use yes/no strings consistent with all other boolean attributes;
   removed the dataBool() helper that existed solely for the old true/false format.
 * Fix: Moved Featured Image toggle from Desktop view settings to General settings–
   the control was conditioned on desktop view being enabled but its logic applied
   to both desktop grid and mobile slider; it is now always visible and correctly
   reflects its global scope.

#### 2.7.4

 * Feature: Added Image Loading Optimization setting in General settings – disabled
   by default. When enabled, exposes configurable per-context priority image counts:
   desktop grid, mobile slider, and mobile thumbnails separately. First N images
   receive fetchpriority=”high” decoding=”async” (LCP), remaining images receive
   loading=”lazy” decoding=”async”. When disabled, no loading attributes are added.

#### 2.7.3

 * Perf: Gallery images now carry correct loading optimization attributes – the 
   first image in the desktop grid and mobile slider each receive fetchpriority=”
   high” and decoding=”async” (no lazy loading) to support LCP, while all remaining
   gallery images and all thumbnail images receive loading=”lazy” and decoding=”
   async”. Attributes are set explicitly rather than relying on WordPress or Elementor
   counters, which may already be consumed by other page elements before the gallery
   renders.

#### 2.7.2

 * Fix: Mobile slider slides are no longer clipped in the Elementor editor – Elementor
   Pro’s widget-nested-carousel.min.css applies overflow:hidden via .swiper-container:
   not(.swiper-container-initialized), but Swiper 8 only adds swiper-initialized(
   not the Swiper 6 legacy class). After Swiper initializes, the legacy class is
   now added to both the main and thumbnails slider elements to neutralize the conflicting
   rule.

#### 2.7.0

 * Fix: Added missing translators comments for esc_html__() calls with %d placeholder
   in widget-render.php – split ternary into if/else so each comment sits immediately
   above its translation call.

#### 2.6.9

 * Fix: Pagination dots and magnifier button now reinitialize correctly after changing
   widget settings in the Elementor editor – moved elementorFrontend.hooks.addAction
   registration inside jQuery(window).on(‘elementor/frontend/init’) so it runs after
   elementorFrontend.init() completes and hooks are guaranteed to be available. 
   The previous synchronous check ran before init() and silently skipped registration.
 * Cleanup: Removed orphaned var renderedMaxImages declaration left over from the
   2.6.8 dead-code removal.

#### 2.6.8

 * Cleanup: Removed no-op on.init Swiper callback for updateLimitedPagination – 
   the call fired synchronously before browser paint so getBoundingClientRect always
   returned 0; the requestAnimationFrame call below it is the sole effective path.
 * Cleanup: Removed dead code branch in initializeGallery – currentMaxImages and
   renderedMaxImages both read from the same PHP data attributes so the condition
   was always false.

#### 2.6.7

 * Fix: Pagination dots and magnifier button now appear immediately after changing
   widget settings in the Elementor editor – added elementorFrontend.hooks.addAction
   for frontend/element_ready directly in frontend.js (inside the preview iframe
   context) so the hook registration and dispatch share the same hooks object. Registration
   is guarded with isEditMode() so production frontend is unaffected.

#### 2.6.6

 * Fix: Resolved Swiper instance leak in the Elementor editor – getInstanceKey now
   uses the stable widget data-gallery-id so destroyMobileSwiper correctly cleans
   up the previous instance on every re-render instead of accumulating orphaned 
   Swiper objects with live window/document listeners.
 * Fix: Corrected the editor reinit debounce – the timer is now stored on the stable
   scope element rather than the replacement wrapper element, so rapid setting changes
   are properly debounced and the wrapper lookup is deferred until the timer fires
   to always target the current DOM node.
 * Fix: Replaced the window load wrapper for element_ready hook registration with
   a DOMContentLoaded + load dual listener and a registered guard, ensuring the 
   hook is always registered at the earliest safe moment.

#### 2.6.5

 * Fix: Pagination dots now appear immediately after widget re-init – deferred the
   initial updateLimitedPagination call to requestAnimationFrame so bullet dimensions
   are measured after browser paint rather than synchronously during Swiper construction.

#### 2.6.4

 * Fix: Pagination dots no longer disappear after changing Thumbnails Per View or
   other settings in the Elementor editor – stale bullet DOM is now cleared before
   re-initializing Swiper (editor only).
 * Fix: Magnifier now activates immediately after widget settings change in the 
   editor without requiring a viewport switch – refresh is called after Swiper finishes
   creating its slides (editor only).
 * Fix: All mobile slider images now load reliably after a settings change in the
   editor – Swiper preloadImages and updateOnImagesReady options are enabled on 
   reinit (editor only).
 * Fix: Rapid successive widget setting changes in the editor now trigger only a
   single gallery reinit – a 150 ms debounce prevents redundant reinit calls from
   the Elementor element_ready hook (editor only).

#### 2.6.3

 * Performance: Magnifier CSS and JS (magnifier.css ~4.5 KB, magnifier.js ~9.5 KB)
   are now loaded only when the Magnifier image effect is selected for desktop or
   mobile view – saving ~14 KB on every gallery instance that does not use magnifier.
 * Performance: Edge Bleed CSS and JS (edge-bleed.css ~1.2 KB, edge-bleed.js ~1.6
   KB) are now loaded only when Mobile Edge Bleed is enabled – saving ~2.8 KB on
   instances that do not use the feature.
 * Performance: Removed magnifier.css and edge-bleed.js from the hard dependency
   chains of frontend.css and frontend.js so that the base styles and scripts no
   longer pull in feature-specific assets unconditionally.
 * Maintenance: In the Elementor editor and preview context all assets are still
   loaded unconditionally so that live setting changes take effect immediately without
   a page reload.

#### 2.6.2

 * Fix: Resolved horizontal page scroll caused by overflowing adjacent Swiper slides
   in Edge Bleed mode. The wrapper now expands into the gutter (overflow-x:clip 
   prevents scroll) while slider-wraps are pulled back to content column width via
   compensating margins, so images do not stretch and screen-edge nav arrows remain
   within the clipping boundary.

#### 2.6.1

 * Fix: Replaced the wrapper-expansion Edge Bleed layout with a clip-path-only approach–
   the gallery wrapper stays at content column width, and adjacent Swiper slides
   bleed through via overflow:visible and a negative-inset clip-path transition,
   eliminating the image and thumbnail stretching introduced in 2.6.0.

#### 2.6.0

 * Fix: Replaced the Edge Bleed margin/padding layout technique with a position-
   relative offset and explicit width calculation, eliminating the visible right-
   side gap that appeared on width:100% elements inside Elementor columns.
 * Fix: Edge Bleed structural CSS now applies only when mobile view is enabled; 
   the media query is omitted when desktop view is disabled so Edge Bleed works 
   correctly in mobile-only mode at all widths.
 * Fix: Mute Videos control now hides only when Autoplay is set to Both; the control
   remains visible for Desktop-only or Mobile-only autoplay so the manual mute setting
   can apply to the view without autoplay.
 * Fix: Corrected the mute render logic so autoplay forces mute only when set to
   Both, matching the updated control visibility behavior.
 * Enhancement: Moved the Navigation Arrows Padding control outside the Normal/Hover
   tabs and placed it directly after Icon Size for both Main Slider and Thumbnails
   arrow groups.
 * Change: Desktop View Settings is now the first section in the Content tab; General
   Settings moved to the end.
 * Change: Desktop Style Settings is now the first section in the Style tab (no 
   top separator); General Style Settings moved to the end.
 * Maintenance: Removed columnar alignment spaces from variable assignments across
   all plugin PHP files.
 * Maintenance: Simplified the mobile breakpoint fallback from a multi-line Elementor
   API block to a single null-coalescing expression with a 768px default.

#### 2.5.6

 * Fix: Corrected the Normal, Hover, and Active pagination dot color variables so
   widget colors and Elementor Global Colors reach the frontend styles.
 * Fix: Routed pagination dot colors exclusively through widget-scoped CSS variables
   while retaining theme-resistant frontend priority.
 * Maintenance: Removed unused maximum-dot and positive Edge Bleed gutter CSS variables.

#### 2.5.5

 * Change: Replaced the Navigation Style and Video Style tabs with conditionally
   displayed labeled control groups.
 * Change: Moved Video Icon on Thumbnails from Mobile View Options to Video Options.
 * Fix: Strengthened pagination dot styles against theme overrides and prevented
   hover styles from overriding the active dot.
 * Translation: Removed obsolete tab labels and synchronized German and Ukrainian
   catalogs.

#### 2.5.4

 * Enhancement: Reorganized Video Style settings into conditionally displayed Gallery
   and Thumbnail tabs while preserving existing control values.
 * Change: Updated mobile magnifier button defaults to an 18px icon, top-right position,
   10px padding, zero margin, and a 20px bottom-left radius.
 * Enhancement: Moved mobile pagination dot styles into Navigation Style and separated
   image, thumbnail, and dot navigation controls.
 * Enhancement: Moved mobile navigation content controls into a dedicated Navigation
   section and control file.
 * Change: Consolidated main and thumbnail Edge Bleed arrow anchoring into one Navigation
   Arrows Edge setting.
 * Translation: Synchronized German and Ukrainian catalogs with all current plugin
   strings and rebuilt the MO files.
 * Maintenance: Completed a release audit of controls, runtime attributes, metadata
   keys, translations, and packaged assets.

#### 2.5.3

 * Change: Removed the Edge Bleed Exit Direction option and its outward mask animation,
   retaining the standard reverse animation.
 * Change: Removed the Transition Easing option and standardized Edge Bleed transitions
   on `ease-out`.
 * Enhancement: Kept separate configurable reveal and hide durations for Edge Bleed
   animations.
 * Fix: Unified the selected Elementor video icon across video posters and video
   thumbnails, including variation gallery rebuilds.

#### 2.5.2

 * Enhancement: Added separate reveal and hide durations for Mobile Edge Bleed, 
   both defaulting to 200ms.
 * Feature: Added Reverse Inward and Continue Outward exit directions for side images
   after a swipe.

#### 2.5.1

 * Feature: Added a separately configurable active magnifier button icon, with a
   search-minus icon as the default.
 * Enhancement: Added configurable duration and easing for smooth Mobile Edge Bleed
   appearance and disappearance.
 * Fix: Replaced unsupported nested Elementor tabs in the mobile magnifier button
   controls with clear state headings.

#### 2.5.0

 * Feature: Added optional Mobile Swipe Edge Bleed for the main slider and thumbnail
   carousel, disabled by default.
 * Feature: Added a configurable Mobile Side Gutter with a 30px default and independent
   Content Edge or Screen Edge anchoring for main and thumbnail overlay arrows.
 * Performance: Added a pre-Swiper thumbnail layout for the configured 2-5 thumbnails
   per view, reducing the initial full-width thumbnail flash and mobile layout movement.
 * Change: Removed plugin-specific LCP controls and custom `fetchpriority`, `loading`,
   and `decoding` overrides so Elementor and WordPress can manage page-level image
   loading optimization.
 * Markup: Removed empty inline style attributes and output `data-video-url` only
   for gallery items that contain video.
 * Maintenance: Moved edge bleed controls, behavior, and styles into dedicated PHP,
   JavaScript, and CSS modules and added concise CSS section comments.
 * Documentation: Rebuilt the plugin description, feature overview, FAQ, screenshots,
   and accessibility wording around the current implementation.

#### 2.4.1

 * Enhancement: Added an optional, styleable video indicator to mobile thumbnails.
 * Enhancement: Changed the maximum visible dots setting to an integer slider from
   2 to 10.
 * Enhancement: Clarified that thumbnail width applies to Auto mode and kept thumbnail
   gap configurable in every mode.
 * Enhancement: Standardized the video icon transition duration at 0.3 seconds and
   enforced a transparent video placeholder.
 * Enhancement: Added Lens and Button tabs with full mobile magnifier toggle icon,
   layout, normal, and hover styling controls.
 * Fix: Kept the pagination fade inside the exact configured dot window so adjacent
   dots no longer leak into view.
 * Fix: Ensured active pagination colors and borders take priority while hovering
   the active dot.

#### 2.4.0

 * Feature: Added configurable Zoom Factor slider (0-3x) for both desktop and mobile
   Zoom effects, replacing the fixed 1.08x scale.
 * Feature: Added configurable Zoom Factor slider (0-3x) for both desktop and mobile
   Magnifier effects, replacing the hardcoded 2x zoom level.
 * Feature: Added Lens Size slider (px) for both desktop and mobile Magnifier effects,
   with independent defaults (160px desktop, 140px mobile).
 * Feature: Added Lens Border Style, Border Width, Border Color, and Border Radius
   controls for both desktop and mobile Magnifier effects.
 * Enhancement: All zoom and magnifier values are now stored as CSS variables scoped
   to each widget instance, ensuring independent settings across multiple widget
   placements.
 * Fix: Migrated dot color controls (normal, hover, active – background and border)
   to CSS variable selectors, ensuring Elementor Global Colors are respected correctly
   instead of being overridden by the base stylesheet’s !important declarations.

#### 2.3.0

 * Feature: Added mutually exclusive None, Zoom, and Magnifier image effects with
   independent desktop and mobile settings.
 * Enhancement: Added a lazy-loaded desktop pointer lens and an accessible mobile
   magnifier toggle with drag interaction.

#### 2.2.1

 * Fix: Restored the Video URL field after Description in WordPress media attachment
   sidebars and preserved native compatibility-field saving.

#### 2.2.0

 * Enhancement: Modular refactoring of the monolithic widget-controls.php file into
   11 sub-files organized by tab and section.
 * Enhancement: Modular refactoring of the main plugin file kodlo-elementor-gallery.
   php into sub-files organized by functional zone.
 * Documentation: Standardized all codebase documentation, replacing inline comments
   with fully typed PHPDoc block comments.
 * Maintenance: Verified code syntax and plugin initialization performance.

#### 2.1.0

 * Feature: Added separate autoplay settings for Desktop, Mobile, Both, or None.
 * Feature: Added standard Elementor hover animations support for the video play
   button.
 * Enhancement: Standardized thumbnail default settings (border radius: 0px, gap:
   10px, min size: 80px).
 * Enhancement: Converted active/inactive thumbnail border width controls to multi-
   sided dimension controls.
 * Enhancement: Added a visual divider and a dedicated heading for Thumbnails inside
   Mobile view options, with variation settings repositioned above them.
 * Fix: Adjusted mobile Swiper pagination track linear gradient fade padding boundary
   so leftmost dots remain clear and readable.
 * Fix: Prevented Stretched Image Style settings from rendering when Stretched Image
   is disabled.
 * Localization: Added complete German and Ukrainian translations for new controls
   and options.

#### 2.0.0

 * Feature: Added CSS mask-image linear gradients to smoothly fade mobile pagination
   dots at viewport edges.
 * Enhancement: Added Caption typography, text color, background, border, border
   color, and border-radius controls.
 * Fix: Prevented the WooCommerce variation “Add Gallery Images” button from remaining
   hidden after removing all images.
 * Fix: Preserved empty variation gallery states and resolved recurring lazy compatibility
   migrations by updating metadata values to empty strings instead of deleting keys.
 * Fix: Protected variation gallery metadata against accidental deletions during
   WooCommerce variation quick/bulk edits.
 * Fix: Forced the video play button background to remain transparent in normal,
   hover, focus, and active states.
 * Optimization: Restricted lazy-compatibility migration checks to metadata existence
   queries, keeping the original WooGallery metadata intact in the database.
 * Performance: Reused normalized attachment data across product and variation galleries
   during each request.
 * Specificity: Prefixed Swiper pagination selectors and enhanced Elementor controls
   to target bullet elements directly with wrapper specificity and !important declarations,
   ensuring proper rendering on pages with theme overrides.
 * Localization: Updated German and Ukrainian translations and removed obsolete 
   control strings.
 * Maintenance: Reviewed PHP, JavaScript, styles, metadata, and release assets.

#### 1.9.0

 * Change: Simplified all widget controls to one static value per setting instead
   of device-specific values.
 * Change: Limited the mobile-view breakpoint selector to active Elementor breakpoints.
 * Change: Kept separate static maximum-image limits for desktop and mobile galleries.
 * Change: Allowed a minimum of two thumbnails per view and removed click-and-hold
   image inspection.
 * Performance: Batched variation attachment metadata and narrowed variation editor
   DOM scans.
 * Fix: Isolated runtime settings and gallery updates to each widget instance.
 * Fix: Clipped mobile Swiper overflow so adjacent slides remain hidden.
 * Fix: Saved newly added variation images and persisted complete variation gallery
   removal.
 * Enhancement: Added a smooth, single-row sliding window for limited pagination
   dots.
 * Enhancement: Added independent Normal, Hover, and Active color and border controls
   for pagination dots.
 * Enhancement: Added mutually exclusive Desktop-only and Mobile-only view modes.

#### 1.6.9

 * Fix: Resolved responsive Swiper preview and layout issues when emulating mobile
   devices in browsers.
 * Fix: Updated inline stylesheet selector to match the element directly, ensuring
   styling is applied under all page render contexts.

#### 1.6.8

 * Fix: Resolved mobile responsiveness issue where Swiper instances disintegrated
   due to continuous re-initialization on scroll-induced address bar resizes.
 * Fix: Restored Swiper pagination dots and arrows display and behavior on mobile
   views.
 * Fix: Corrected Elementor editor preview rendering loop and resolved race condition
   in initialization.
 * Optimization: Secured layout property lookups against null/undefined values to
   prevent JS errors.

#### 1.6.7

 * Performance: Skipped DOM and Swiper rebuilding when a newly selected variation
   has the same visible desktop and mobile gallery images.
 * Fix: Prevented gallery flicker when switching between variations that share an
   identical ordered image set.

#### 1.6.6

 * Enhancement: Moved the Video URL editor into the native attachment details panel,
   before later compatibility sections such as Folders, while preserving standard
   WordPress attachment saving.

#### 1.6.5

 * Enhancement: Added Elementor responsive inheritance to the remaining device-dependent
   layout and position controls.
 * Enhancement: Added responsive thumbnail count, pagination limit and position,
   stretched image layout, Sale Flash position, and video icon position and transition.
 * Fix: Applied inherited responsive values at runtime when Swiper or grid behavior
   depends on the selected device value.

#### 1.6.4

 * Performance: Reused one partial variation match across multiple gallery widgets
   instead of rescanning the product variations for every instance.
 * Fix: Applied the responsive thumbnail gap at runtime while retaining the server-
   rendered value as a fallback.

#### 1.6.3

 * Fix: Restored stable partial variation matching without gallery flicker or premature
   fallback on incomplete selections.
 * Fix: Restored the proven mobile Swiper and thumbnail structure to prevent horizontal
   overflow, full-width thumbnails, and missing pagination dots.
 * Enhancement: Moved the image Video URL field before later media-sidebar compatibility
   fields such as Folders.

#### 1.6.2

 * Fix: Added responsive inheritance to device-dependent style controls throughout
   the Elementor widget.
 * Fix: Increased instance-scoped style priority for borders, hover states, radii,
   thumbnails, navigation arrows, sale flashes, and pagination dots.
 * Fix: Strengthened pagination dot overrides against default Swiper styles while
   preserving unique styling for every widget instance.

#### 1.6.1

 * Enhancement: Removed thumbnail position settings and standardized thumbnails 
   below the main mobile slider.
 * Enhancement: Restored image-only WooCommerce product and variation gallery selection;
   videos remain available through the Video URL field attached to image files.
 * Fix: Restricted the Video URL field and gallery data to supported image attachment
   formats.
 * Fix: Restored WooCommerce variation gallery switching across partial and complete
   attribute selections.
 * Enhancement: Added responsive inheritance to applicable size, gap, border, navigation,
   thumbnail, and video icon controls.

#### 1.6.0

 * Feature: Added partial WooCommerce variation matching that updates galleries 
   on first attribute change.
 * Feature: Prevented MediaElement JS crash by appending mejs-container class to
   all custom video player nodes.
 * Enhancement: Cleaned up Elementor widget settings, renamed stretched image settings,
   and replaced custom aspect ratios with predefined options.
 * Fix: Resolved Elementor editor live-refresh Swiper layout disintegration by delay-
   reinitializing slider instances.

#### 1.5.0

 * Feature: Added option to stretch either the first or last grid item to span full
   width when grid columns are not multiple.
 * Fix: Restored compatibility with WooCommerce core script (`meta-boxes-product.
   js`) by properly preserving all original `wp.media` property descriptors and 
   prototype.
 * Fix: Fixed product page variation gallery image updates when switching variations
   that only have a featured image without custom variation galleries.
 * Enhancement: Styled the variation gallery delete buttons to match native WooCommerce
   product image delete buttons (hidden by default, appears on hover in top-right
   corner as a white circle with a shadow, turns red on hover).

#### 1.4.0

 * Fix: Resolved all reported PHPCS and WordPress VIP lint errors.
 * Localization: Added Ukrainian and German translation support (PO/MO files).

#### 1.3.0

 * Feature: Added automatic, lazy, non-destructive WooGallery compatibility layer(
   imports videos and variation galleries on-the-fly).
 * Enhancement: Code comments cleaned up to adhere to strict single-line format 
   rules.

#### 1.2.0

 * Accessibility: Added semantic frontend gallery navigation, keyboard support, 
   labels, and focus styles.
 * Feature: Custom play icon selection, sizing, coloring, and 9 play button placement
   presets.
 * Feature: Custom navigation arrow icon selection, positioning, and hover styling.
 * Feature: Added automatic, lazy, non-destructive WooGallery compatibility layer(
   imports videos and variation galleries on-the-fly).
 * Performance: Gallery interactions rewritten in Vanilla JavaScript, retaining 
   jQuery only for WooCommerce variation events.
 * Enhancement: Added partial variation gallery matching upon first attribute click.
 * Enhancement: Added Elementor breakpoint max-images responsive settings.
 * Compatibility: Tested up to WooCommerce 8.x and Elementor 3.x.

#### 1.1.0

 * Enhancement: Added last-image full grid spanning option.
 * Enhancement: Separate desktop/mobile settings to toggle variation product galleries.
 * Fix: Removed duplicate featured image displaying in variation galleries.

#### 1.0.0

 * Initial Release.

## Meta

 *  Version **2.9.0**
 *  Last updated **8 hours ago**
 *  Active installations **Fewer than 10**
 *  WordPress version ** 5.6 or higher **
 *  Tested up to **7.0.1**
 *  PHP version ** 7.4 or higher **
 * Tags
 * [elementor](https://wordpress.org/plugins/tags/elementor/)[grid](https://wordpress.org/plugins/tags/grid/)
   [product gallery](https://wordpress.org/plugins/tags/product-gallery/)[slider](https://wordpress.org/plugins/tags/slider/)
   [woocommerce](https://wordpress.org/plugins/tags/woocommerce/)
 *  [Advanced View](https://wordpress.org/plugins/kodlo-product-gallery-for-elementor/advanced/)

## Ratings

No reviews have been submitted yet.

[Your review](https://wordpress.org/support/plugin/kodlo-product-gallery-for-elementor/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/kodlo-product-gallery-for-elementor/reviews/)

## Contributors

 *   [ Kodlo ](https://profiles.wordpress.org/kodlo/)
 *   [ Anatoliy ](https://profiles.wordpress.org/imaginary222/)

## Support

Got something to say? Need help?

 [View support forum](https://wordpress.org/support/plugin/kodlo-product-gallery-for-elementor/)

## Donate

Would you like to support the advancement of this plugin?

 [ Donate to this plugin ](https://kodlo.dev/)