[Resolved] WooCommerce Variation Images do not change

[Alberto]

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

[David]

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;
	}
}

[Alberto]

Hi David,

great, thank you so much! I am fine with that, while I did not notice about mobile 🙂

Have a nice day,
Alberto

[David]

Glad to be of help!

[Cynthia]

Hi David – per my post question July 10, 2021 at 4:07 pm #1851287 in which you replied by referring to your reply on this post…..

I do not know what you mean by “delete ( or comment out )” in your reply above June 25, 2021 at 4:30 am #1834518

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

I don’t want the gallery with thumbs to disappear off the mobile view for product gallery OR single product pages, nor do I want them to be gone from desktop view….I was specifically asking if thumbnails could be on desktop view like they are on mobile.

Please advise. Thank you

[David]

Hi Cynthia,

you simply need to delete the referenced ( above ) block of code from your Customizer > Additional CSS:

https://www.screencast.com/t/NCyom0NgA

After removing the ELements i mentioned and this CSS; the desktop will display the same product gallery as you see on your mobile device.

[Cynthia]

Thank you for clarifying. It worked! Thank you!

[David]

Glad to hear that

[Author]

Posts