Snippet: Variation Gallery for WooCommerce Plugin CSS Fix

  • Updated:

By default the Variation Gallery plugin for WooCommerce inserts it's own widths for the slider that aren't fluid. This can cause issues on smaller screens where the gallery may display really small, large and or next to the summary instead of stacked. The following Custom CSS can be added to your site to override the plugin's gallery widths so it can use the theme's default fluid layout for WooCommerce products.

.woo-variation-product-gallery {
	width: 100% !important;
	max-width: none !important;
}

@media only screen and (min-width: 768px) {
	.woo-variation-product-gallery {
		width: var(--wpex-woo-product-gallery-width, 52%) !important;
	}
}
Learn how to add custom CSS to your site.
Back To Top