WooCommerce Variation Images do not change

Hi there,

I have an issue with my WooCommerce site. Basically the WooCommerce variable products do not show their corresponding variation images, set on product page. They always show the main featured image of product. If I try to delete the main featured image, the product page does not display any image at all and does not show variation images either.

I tried deactivating plugins and nothing changed, while if I change theme to Twenty-Twenty One it behaves correctly. I started this site importing Niche Starter site, therefore I imported many GP elements as well, changing default WooCommerce behaviour. I think that this could be the reason, but I do not know how to change those elements to fix the issue.

Can you have a look on it? Please find login info in private section.

Thank you so much for your help,
Alberto

 

Hi there,

the Niche site doesn’t support Variation images ( on desktop ) – you would need to disable some of the Niche elements and CSS for them to work correctly.

1. in Appearance > Elements – delete ( or Quick Edit set Status to Draft to disable ) the follow two:

Gallery Stack
Close Summary Wrap

2. In Customizer > Additional CSS – delete ( or comment out ):

/* Stacked Gallery for desktop and sticky summary */

@media (min-width: 769px) {
.woocommerce-product-gallery {
display: none;
}

.woo-summary-wrap {
display: grid;
grid-template-columns: 60% 40%;
grid-template-rows: auto;
margin-bottom: 80px;
}

.woo-gallery-stack {
grid-column: 1;
grid-row: 1 / 3;
}

.woo-gallery-stack img {
margin-bottom: 20px;
}

.woocommerce-tabs {
grid-column: 1;
}

.woocommerce div.product div.summary {
grid-column: 2;
grid-row: 1;
margin-left: 80px;
position: -webkit-sticky;
position: sticky;
top: 105px;
bottom: 100px;
padding-right: 80px;
}

.single-product span.onsale {
position: absolute;
top: 0;
}
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/