Woocommerce Product Gallery images not displaying correctly when selected

I noticed that there were some issues with the way the Product thumbnails were being displayed so I did a search, and found a couple of threads that provided apparent solutions. I added the following in my Custom CSS in the customizer:

.single-product .flex-control-nav {
position: static;

.single-product .flex-control-nav li {
float: left;
.single-product .flex-control-nav.flex-control-thumbs img {
width: 100%;
height: auto;
.single-product .flex-control-nav.flex-control-thumbs li {
float: left;
width: 18.6%;
margin-bottom: 8px;
padding: 3px;
background: transparent;
border: 1px solid #eee;
margin-left: 0;
margin-right: 0.5em;

.single-product .flex-control-nav.flex-control-thumbs li:nth-child(5n+5) {
margin-right: 0 !important;

Which worked pretty well, but when I click on the thumbnails in the product gallery, the image appears the same size as the thumbnail. It should be 400x400 since that’s what was added. What CSS am I missing or did I incorrectly add that causes this? I have several other X installations with a similar problem.

Sample link:

But this is happening on every product that has a product gallery. The primary image, used when the product is first loaded, always comes up the proper size.

Thanks in advance.

Hi There,

Thanks for writing in!
Can you please try adding this css to your global css.

.attachment-shop_single {
  width: 100%;

If that doesn’t help please send us your login details to help you on this.
Please send the details in a secure note.


That worked! Thank you!!!

You’re welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.