Little Woocommerce Gallery CSS Tweak

[Dagaloni]

Hi all!

I was not happy with the way an image gallery for Woocommerce was display on the site. I liked the images below the featured image. Although there is a support post about it, the solution is about disabling the gallery and zoom altogether. I was looking for a aesthetic only solution. So I decided to make the tweak myself. Here’s the before and after:

And here’s the CSS:

.flex-control-nav.flex-control-thumbs li:not(:first-child) {
	margin-left: 0;
}
.flex-control-nav.flex-control-thumbs li {
	margin-inline-end: 0.5em;
	margin-bottom: 0.5em;
}
.flex-control-nav.flex-control-thumbs img {
	height: 3em;
}
.flex-control-nav.flex-control-thumbs {
	position: relative !important;
	line-height: 1;
	text-align: left;
	z-index: 10;
	padding-block-start: 1em !important;
	padding: 0;
}

I hope you like it!

[aap]

This is good. THANK YOU

[DCS]

Perfect, thank you!