Product Thumbnails Showing Wrong After Updates

Support
#1

I updated woocommerce, X theme and wordpress today. The thumbnails on product pages used to be 180px and appeared below the main image. After the update they were showing in the top right corner of the main image (on top of the main image) and are displaying super small, like 30px. I found the code to move them back under the main image but nothing I try makes them any bigger. I can force the container to be bigger but then I have a tiny image on a 180px back box. I checked the url of the images referenced and they are the right size. I regenerated all the thumbnails anyway and still they are super small. Please see this page as a reference: http://www.baumusa.com/products/visiodesk-portable-hd-video-magnifier/

#2

I took a break and came back and figured out what I need. You can close this.

#3

can you share what you did please, I have the same problem

#4

@lisacole1, we could check it for you :), you may start a new thread/topic about this issue with your login credentials in a secure note, then we’ll check. I can’t promise any solution, but we may able to recommend something related to it :slight_smile:

Thanks!

#5

thank you, I have a support thread open for it but I like to check the previous ones before in case there are things I can do without bothering you hard working lot :slight_smile:

#6

Hi There,

If you have just updated too, please check our changelog. It explains the change on Woocommerce thumbnails and provide guide on how to fix it.

#7

I added this to my custom css and it fixed the issue. (Have used the same code on two X sites, different stacks and it worked without any changes. Hopefully you have the same experience. :blush:)

single-product .flex-control-nav.flex-control-thumbs {
    float: none;
    position: relative;
    text-align: left;
    padding-left: 0px;
    padding-right: 0px;
 
}

.single-product .flex-control-nav.flex-control-thumbs img {
    min-height: 65px;
    background:#FFFFFF;
    border: 1px solid #666666;
    border-radius:3px;
    padding: 0px 0px;
    margin: 0px 5px;
}    

.flex-control-nav.flex-control-thumbs li {
    margin-bottom: 40px;
    background:#ffffff;
    box-shadow: 0px 0px 0px #ffffff;
}

.woocommerce-product-gallery__trigger img {
    visibility: hidden;
}

.woocommerce-product-gallery__trigger:before {
    font-family: "Lato";
    content: "\f065";
    color: white;
}
#8

nope, not here, it just gives tiny images that overlap at the top of the main product pic.

it is a real shame because one of the things I liked about X was the way Woo looked.

thanks though!

#9

Hi Lisa,

Please open a new thread and then share your site URL and credentials on a secure note so we can investigate your setup. In case you do have customization, please try to save a backup of your site and then try switching to main theme to see if this issue is not a result of any customization.

#10

I already have a thread open for this, I was hoping to save you some time and find a solution on another thread.

#11

Hey There,

We will be responding in your other thread shortly.

Thank you for your understanding.