Issue with product hover / image swap feature

Hi,

Using this theme – and on products – whether archive / carousel / grid etc – you have an image swap facility.

Now, I’ll try and make this simple otherwise it’ll get confusing.

The images on my clients site aren’t what you’d call normal. For ease, let’s say they sell carpets. So some are square and others aren’t – like doormat runners are long and thin.

Problem is; they didn’t sort dimensions properly when they added products and here we are now with over 100,000 images so it’s impossible to redo them all.

So, my issue here is I’ve ran a script that basically shrunk the largest pixel to 1500px and made it square so all images are at least 1500x1500px – this was an image edit script so we done this and reloaded images. All fine.

So, standard image cropping is fine as it’s only cropping the white borders technically and reducing from 1500 -> 300 etc for the archive.

That’s all great and no issues here.

However;

The problem is the image swap / hover facility. It seems this is coded incorrectly as in hard coded somewhere as no matter what I do from a hook into your hover-swap to override it in child theme to adding js to aggressive css seems to have any effect.

All I need is for the image swap / hover image *only* (not the main product image) to work differently so it starts from centre/middle pixel and works outwards as a cover; keeping the dimensions – so it always fills the hover placement on the archive / carousel / grid etc and hides the white borders that’s now present by default on all images.

Can you please advise how to target this element or how to make it count from centre / middle outwards so it keeps dimensions of the layout and fills the space? It’s madness as it really does look like you force via script that it rebuilds the swap images dynamically and overrides any changes.

Example – The swap < span > and < img> are dynamically inserted and cloned by the theme’s JavaScript after the page fully loads so even MutationObserver fails because XStore uses your own internal functions to rebuild the HTML on hover/slide events.

For instance this should fix it but has zero effect –

function xstore_hover_swap_fix() {
    ?>
    <script>
    (function() {
        'use strict';

        // This function applies object-fit cover to hover swap images
        function fixHoverSwap() {
            document.querySelectorAll('.etheme-product-hover-swap-image img').forEach(function(img){
                if (img.dataset.__fixed) return;

                // Make the img fill its container and crop from center
                img.style.width = '100%';
                img.style.height = '100%';
                img.style.objectFit = 'cover';
                img.style.objectPosition = 'center center';
                img.style.display = 'block';

                img.dataset.__fixed = '1';
            });
        }

        // Run after window load (ensures XStore slider has initialized)
        window.addEventListener('load', fixHoverSwap);

        // Observe for DOM changes (lazy load / slider clones)
        var observer = new MutationObserver(fixHoverSwap);
        observer.observe(document.body, { childList: true, subtree: true });

        // Also fix on resize
        window.addEventListener('resize', fixHoverSwap);
    })();
    </script>
    <?php
}
add_action('wp_footer', 'xstore_hover_swap_fix', 100);

Thanks