Single product page main image and gallery slider issue

Hi there,

I don’t see this problem on my site that has only WooCommerce installed as a plugin. What you see looks like it could be a theme/ plugin you’re using that is interfering with the WooCommerce scripts for the image gallery.

The best way to determine if the issue is being caused by a theme and/or plugin is to temporarily switch your theme to Storefront (https://woocommerce.com/storefront/) and disable all plugins except for WooCommerce. Finally, test to see if the issue is resolved by checking your product page and test the gallery images.

To figure out which plugin is causing the problem, continue to the next step – reactivate your other plugins one by one, testing after each until you find the one causing conflict.

Here’s a more extensive explanation in our docs: https://docs.woocommerce.com/document/how-to-test-for-conflicts/

—–

Tools to help you troubleshoot:

Meks Quick Plugin Disabler is a plugin you can install which will remember what plugins you currently have active so it’s easy to switch them back on. Link: https://www.ads-software.com/plugins/meks-quick-plugin-disabler/

You can clone your site to a staging environment and perform tests without modifying your live site or impacting customers. Many hosts provide staging facilities, so it’s worth checking in with them. It’s also possible to do it using the free WP Staging plugin. Link: https://www.ads-software.com/plugins/wp-staging/

Let us know how that goes!

It looks like it is my themes css.

.woocommerce ul.products li.product a img,
.woocommerce div.product div.images img{
	padding: 3px;
	border: 1px solid rgba(0,0,0,0.1);
	box-sizing: border-box;
	object-fit: contain;
	height: 200px;
	width: 175px;
}

When I disable the object-fit, height, and width attributes the sizing is better, except that now it’s not uniform. I’m using GeneratePress and will ask there.

Thanks!

Hi there,

I’m glad you’ve found the culprit and worked out the next step. I’m going to mark this as resolved – if you have any further questions, you can start a new thread.