Woocommerce product page thumbnails grid issue

[Minna]

I have added this code to have the thumbnail images below the main image. However the align and padding of the second row is messed up. How to fix this in a way that all the thumbnails are aligned in a nice grid? I would also like to remove the dark opacity of the thumbnails, so that they are all without any hover effect.

.single-product .flex-control-nav {
position: relative;
}

.single-product .flex-control-nav.flex-control-thumbs img {
height: auto;
}

.single-product .flex-control-nav.flex-control-thumbs {
text-align: left;
padding-left: 0;
padding-right: ;
}

[Richardz]

Hello,

For the opacity, try this code :

.flex-control-nav.flex-control-thumbs img:hover { opacity: 0!important; }

[Minna]

Thank you for the quick reply. Unfortunately that code makes the images totally black on hover.

[tristup]

Hi Minna,

Unfortunately, the issue described is not found in the given URL. Can you please explain the steps to replicate the issue? And please revert the changes you made already to get back the issue to investigate.

Thanks

[Minna]

I installed a plugin Product Gallery Slider for WooCommerce which resolved the issue!

[tristup]

Hi Minna,

Great that it resolved now.

Thanks