Hi,

After investigating, it appears that the issue is related to the variation swatches plugin you are using. Unfortunately, our custom gallery is not compatible with this plugin.

However, you can revert back to using the WooCommerce gallery, which is compatible with your variation swatches plugin. To do this, please add the following code snippet to your theme's functions.php file:

add_filter( 'kalium_woocommerce_use_custom_product_image_gallery_layout', '__return_false' );

This will disable our custom gallery layout and enable the default WooCommerce gallery, resolving the compatibility issue.

Please let us know if this resolves your issue or if you have any further questions.

Hi floa2,

I think you misunderstood me. The code that I've sent you should be added in functions.php of the theme (preferably child theme) and it will use the default gallery from WooCommerce which will be compatible with the Variation Swatches.

If you don't know how to do it I can insert it for you but I need your WP credentials.

To include your credentials click Insert Credentials button in editor toolbar. (See how)

Hi,

I have added the priority on the hook and it turned to work:

https://d.pr/v/HAeOYP

So now dropdowns are unnecessary:

(view large image)

So I have removed with this CSS in Custom CSS:

/* Hide dropdown when variation swtaches is active */
.wpcvs-attribute-value .select-option-ui {
    display: none;
}

Right now the gallery looks like this:

(view large image)

See how it works:

https://d.pr/v/DWrkLD

Hopefully this works fine for you.

Hi,

I am glad to hear that.

In order to have carousel enabled on mobile screen it should be done using CSS, so I have disabled the previous line in functions.php

(view large image)

And added this code in Custom CSS:

/* Product gallery disable carousel only on larger screens */
@media (min-width: 992px) {
    .woocommerce-product-gallery .flex-viewport {
    height: auto !important;
        margin-bottom: 40px;
    }
    
    .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__wrapper {
        width: 100% !important;
    }
    
    .flex-control-nav {
        display: none;
    }
}

Hi,

I have added this code in functions.php which will conditionally enable carousel on mobile devices:

https://d.pr/n/mdteIS

Please note that the script will work only on page load so for example if viewport is 768 and smaller when page loads, the carousel will init.

See the example:

https://d.pr/v/s52Dc5

Hi,

I have made the desired adjustments which now I believe it fulfills your request, here is what I have done:

1. Hide the product carousel thumbnails with Custom CSS:

/* Hide product carousel thumbnails */
.single-product-images .flex-control-nav {
    display: none;
}

2. Adjusted the code in functions.php to this one:

(view large image)

So now the quality of gallery images is the same for all images, they show as carousel on mobile devices and stacked on desktop.

Hopefully this will work fine for you.