How do I remove animation from the product image gallery??

Hi @mesmer7

Thanks for reaching out!

I want to remove the transition and opacity from this tag:

For us to check this further, can you please share with us the URL or the link to your site/page where you would like to modify this code?

Furthermore, if a screenshot would be helpful, I’d recommend using https://snipboard.io. You can share the direct link to the image as a response to this topic.

Once we have more information, we’ll be able to assist you further.

OP is referring to Woocommerce’s output for the function woocommerce_show_product_images()

By default, this function outputs the following opening div code:

<div class="woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-4 images" data-columns="4" style="opacity: 0; transition: opacity .25s ease-in-out;">

If you’ve elected to remove Woocommerce’s tons and tons of scripts, then this renders the entire image gallery invisible. They are specifically asking how to remove the inline style from that block of code just above.

Unfortunately, the only way to remove this – aside from using Javascript after the page loads – is to override Woo’s product-image.php file.

We can remove opacity with CSS

.woocommerce-product-gallery {
opacity: 1 !important;
}

Thank you!

Unfortunately, the only way to remove this – aside from using Javascript after the page loads – is to override Woo’s product-image.php file.

Javascript is only used to toggle the image. It should be possible to override the CSS responsible for any transition effects, even the inline styling.

Here are some CSS rules that disable both the animation and the zoom-on-hover effects on a recent site I’ve worked on. It’s tailored to that specific project, so it won’t solve the problem well for all sites, but it might serve as a basis for someone else to solve the problem on theirs:

/* Product image gallery. */
.zoomImg {
	display: none!important;
}
.woocommerce-product-gallery__image img {
	pointer-events: none!important;
	position: static!important;
	max-height: 400px;
	max-width: 100%;
	width: auto!important;
	height: auto!important;
	object-fit: contain;
	object-position: center;
}
.woocommerce-product-gallery__image {
	display: flex!important;
	place-content: center;
}
.woocommerce-product-gallery__image a {
	cursor: default;
}

/* Convert product image gallery controls into CSS grid. */
.flex-control-nav.flex-control-thumbs {
	display: grid!important;
	gap: 10px!important;
	grid-template-columns: repeat(auto-fill, minmax(80px, 1fr))!important;
}
.flex-control-nav.flex-control-thumbs li {
	width: auto!important;
	user-select: none;
}

/* -- Highlight currently selected image more clearly. */
.flex-control-nav.flex-control-thumbs {
	padding: 5px!important;
	padding-left: 15px!important;
	border-left: 2px solid var(--wp--preset--color--tertiary);
}
.flex-control-nav.flex-control-thumbs img {
	border-radius: 5px;
	filter: opacity(60%);
}
.flex-control-nav.flex-control-thumbs img.flex-active {
	box-shadow: 0 -3px 2px white, 0 1px 5px rgba(0,0,0,0.2);
	filter: opacity(100%);
}

/* Disable product image gallery animations. */
.flex-viewport {
	height: fit-content!important;
	display: flex!important;
	place-content: center!important;
}
.flex-viewport .woocommerce-product-gallery__image:not(.flex-active-slide) {
	display: none!important;
}
.flex-viewport .woocommerce-product-gallery__image.flex-active-slide {
	display: flex!important;
}
.woocommerce-product-gallery__wrapper {
	transform: none!important;
}

@xue28 maybe a feature proposal could be made to let users toggle animations within the Product Image Gallery Gutenberg block?

Hi @azinfiro,

Thank you for your contribution to the community. However, as this request is quite unique, a feature request would truly come in handy just as you’ve recommended. @mesmer7 You can learn more on making a feature request here.

Also, here’s the direct link to creating the feature request.

I hope this helps.