Product Page Thumbnails

jgatter · July 2020

Hello,

Is there any way to change the size of the product page thumbnails. They are so small, people are not even noticing them.

If you could shed some light, that would be great! Thank you!

Bryan · July 2020

Hey,

woocommerce moved this option to the wordpresss customizer.

You will find the option to change the thumbnail size there: https://prnt.sc/tmf9cy

The upside to this is that you do not need to regenerate thumbnails.

thanks

jgatter · July 2020

Sorry Bryan, I don't think you understood my question. I am asking about the thumbnails in the PRODUCT page, not in the catalog. These are the thumbnails under the large image of the product page, that you add in the image gallery of the product.. These are VERY SMALL, I would like to make these larger.

Thank you.

Pablo · July 2020

Bryan showed you proper place, but change the "Main image width" option instead of the thumbnails.

Also, if this won't help you, please send us a link to your website.

thanks

jgatter · July 2020

Yes, he directed me for the Main Image, I know. It is just that we are probably in different times and when we are pointed to the wrong place, I end up loosing like a full day without a fix.

Again, I didn't need it for the main image, but for the thumbnail gallery slide (I think Woocommerce calls it that) under the main image.

Anyway, I knew this would be something very simple and it took 7 minutes at freelancer.com to solve it. 2 minutes to post my question like I did here, 2 to find a freelancer, 3 minutes to receive the code and a $5 reward!

So no problem, I got it resolved and here's what the solution is in case someone needs it. The original size is 100px, but for some reason it was displaying at 60px. So this resolved it and made them ever larger than the 100px, which I loved it! And even added a frame around, since the image backgrounds were white over white... so now it looks 1000 times better.

Thanks again for all your help guys. You're awesome.

CSS:

.motif_gall_images ul {

display: flex;

}

.motif_gall_images ul li {

width: calc(25.0% - 10px);

border: 1px solid #fe0067

}

.motif_gall_images ul li img {

width: unset !important;

display: block;

}

Product Page Thumbnails

Comments