Woocommerce Product Page Images

Hi there,

I'm not sure I fully understand what you're trying to do.

Can you explain a bit more? Screenshots or recordings of the issue would be appreciated.

Let us know.

Hello! Thank you very much for your quick response. I will try to be clearer.

I am creating an online watch store. With the demo "Niche". Each watch has color variations. Therefore, each variation is assigned its own image. The same watch with 3 or more color variations.

The problem arises when selecting the color, the image shown does not change. For example, when entering a product page, which is assigned an image with a red color (by default), if I want to buy the variant in black, when choosing black the image does not change.

The red variant is still displayed. This makes the customer unable to view the model he wants to buy. And it becomes more complex when the product has several colors.

I was able to verify that the demo "Niche" produced the error, because when deactivating the demo, the problem disappeared.

So I wonder if there is any way to fix it, since the store looks great with the "Niche" demo.

I think it is due to the CSS layer that the demo incorporates.

Hi there,

i am afraid that the Stacked Gallery that Niche uses DOES NOT support variation images.
We can show you how to disable the stacked view if you want ?

Yes! How can I disable the stacked view?

Theres a few steps required:

1. In Appearance > Elements you can remove these 2 x Elements:

Close Summary Wrap
Gallery Stack

2. In Customizer > Additional CSS - remove this:

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

Thanks a lot! Now it works like a charm.

glad to hear that!