Temporary JS workaround for product gallery loop issue on paradisi.ge

Hello Woodmart Support,

We are currently using your theme on our website Paradisi.ge and noticed a UX issue with the single product gallery slider.

At the moment, the product gallery uses Swiper.js with loop: false, which means when users reach the last product image, the next navigation stops. Many users stay stuck on the final image, which creates unnecessary friction in the browsing experience.

As a temporary workaround, we are considering applying the following custom JavaScript snippet via WPCode to enable looping after initialization, without modifying any core theme files:

(function () {
‘use strict’;

function enableLoop(el) {
if (!el.swiper || el.swiper.slides.length <= 1) return;
if (el.swiper.params.loop) return;
el.swiper.params.loop = true;
el.swiper.loopCreate();
el.swiper.update();
}

function init() {
if (!document.querySelector(‘.wd-gallery-images’)) return;

document.querySelectorAll(‘figure.wd-carousel.wd-initialized’)
.forEach(enableLoop);

var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (m) {
m.addedNodes.forEach(function (node) {
if (node.nodeType !== 1) return;
node.querySelectorAll && node.querySelectorAll(‘figure.wd-carousel’)
.forEach(enableLoop);
});
if (m.target && m.target.classList &&
m.target.classList.contains(‘wd-initialized’)) {
enableLoop(m.target);
}
});
});

observer.observe(document.body, {
childList: true,
subtree: true,
attributeFilter: [‘class’]
});

setTimeout(function () { observer.disconnect(); }, 5000);
}

‘requestIdleCallback’ in window
? requestIdleCallback(init, { timeout: 2000 })
: window.addEventListener(‘load’, init, { once: true });
})();

Before we proceed, we would appreciate your guidance:

Is this approach safe with current Woodmart gallery implementation?
Could it create conflicts with thumbnails, zoom, lightbox, or variation image switching?
Is there an official hook/filter available to enable loop: true properly during Swiper initialization?
Do you plan to add a native option for infinite looping in future updates?

We prefer using an official/theme-native solution rather than maintaining a custom workaround long-term.

Thank you in advance.

Hi there,

Thanks for the detailed report and for sharing your idea.

– The single product gallery is initialized without looping by design to keep thumbnail synchronization, zoom, lightbox, and variation image switching stable.
– There is no built-in option or hook/filter to turn on loop for the single product gallery at initialization.
– Enabling loop on an already initialized Swiper instance can conflict with WooCommerce-related scripts and our gallery logic.

You can try to implement your own workaround but we can’t guarantee that it will work correctly with all other WooCommerce gallery-related scripts and plugins.

Kind Regards

Hello again,

Regarding our ongoing optimization, we have implemented a custom solution to enable the infinite loop feature for the product gallery on mobile devices, which seems to be missing or not functioning by default in certain configurations.

We are using the following script via a Code Snippet (inserted in the footer):

I have two questions regarding this:

Safety & Best Practice: Is this script safe to use with WoodMart’s core architecture? Does the theme provide a built-in filter or JS hook to enable loop: true for the product gallery without using a MutationObserver?

Caching Conflict: Could this script, or the way it interacts with wd-initialized, potentially conflict with the header/caching issues we are experiencing (FlyingPress + Memcached)?

The script works perfectly for the user experience, but I want to ensure it is as “clean” as possible from a developer’s perspective.

Looking forward to your professional advice.

Best regards,
Hobiti

Hi,

Thanks for the update and for sharing your custom script. Sorry, but analyzing and checking your custom codes are out of our theme support scope. You can use it at your own risk.

Kind Regards

[Author]

Posts