Gallery thumbnail size too small

Support
#1

Hi, I’m using X Theme using the Icon stack.
On the product page, the thumbnail images under the main feature image are far too small. I’ve no idea how to make them larger.

example:
https://www.onespecials.com/product/awesome-gold-henna-tatouage-tattoo/

Here’s the screenshot of my image settings:

#2

Hi there,

Please kindly follow the article below to know how to do so:

https://theme.co/changelog/#theme-x-5-1-1

Check the Woocmerce section:

Thank you.

#3

Hi there,
I changed the thumbnail size using woocommerce settings. I regenerate thumbnails, as you told, but they are still as small as before. What did I wrong?

Best,
Linda

#4

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.single-product .flex-control-nav {
    padding: 0;
}
.single-product .flex-control-nav.flex-control-thumbs li {
    width: 24%;
}
.single-product .flex-control-nav.flex-control-thumbs img {
    width: 100%;
    height: auto;
}
#5

Thanks for reply!
Now the thumbnails are bigger, but unsorted.
And the woocommerce settings still have no effect.

Best,
Linda

#6

Hi Linda,

Can you share us the URL where you took that screenshot? The previous URL you have shared is page not found. You only have 3 products on the homepage and I can’t find which product is that on your screenshot. Note that the thumbnails is meant to be small because once we adjust its size it will overflow on the next row. See this: https://screencast-o-matic.com/watch/cb6lfjIGD5

#7

Hi Lely,
without the code you sent it looks like that.

I thought it’s not that nice and looked for another solution.

The page is not published yet. How can i send you the login. Do I have to create a new topic, I own?

Best,
Linda

#8

Hi all,

I have an identical issue: product gallery is at the top right-hand-side of the product image, and displayed in really small dimensions, close to looking like icons.

Please see the link below.

Kind regards,

#9

Hello There,

Thanks for updating this thread. Your issue is because we have integrated the Product Carousel, a WooCommerce 3.0 feature. For more details about this, please check this out: https://theme.co/apex/forum/t/resizing-woocommerce-images/1706

If you want to remove the WooCommerce 3.0 support and use the same old Product and thumbnails, you may add these lines in your child theme’s functions.php file:

add_theme_support( 'wc-product-gallery-zoom' ); 
add_theme_support( 'wc-product-gallery-lightbox' ); 
add_theme_support( 'wc-product-gallery-slider' );

Please let us know how it goes.

#10

Thanks, but the code has no effect.
And there is no effect, if I change the size in the woocommerce settings (without your code).
I regenerated thumbnails…

#11

Hi all,

Thank you, RueNel, for the code, but it also did not change the styles for me.
I am using the Icon Stack.
WP version 4.8.2
X theme Version: 5.2.2
Cornerstone Version 2.1.3

I was able to change the product gallery images (only on the first page/link mentioned) to display as before; however, it won’t be much if the lightbox does not open when the image is clicked. See first page/link mentioned below.

The original styles remain as is in all other single product pages, i.e. (see second link below)

Hope you can help.

Kind regards,

#12

HI All,
in my x-theme system it says: outdated woocommerce templates. Maybe that has something to do with it?
I don’t use a child theme or own templates…

#13

Hi, @staffers and @lindahuether,

This thread is getting longer and lost its original purpose and it gets very hard for us the staff to follow along as we have to read all the way down to find out the whole purpose of the thread is another thing now.

Also, it will be harder for the other customers to check and get correct information if they have the same problems.

I suggest that you open up a separate ticket and there we will have a focused information on the problem and can serve you better.

Also, if you guys want to have the way the Woocommerce was before the version 3 update on the product page you will need to add the CSS code below:

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

.single-product .flex-control-nav.flex-control-thumbs img {
    min-height: 60px;
}

.flex-control-nav.flex-control-thumbs li {
margin: 10px;
}

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

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

But to follow up I suggest that you guys open up a new dedicated thread each.

Thank you, both for your cooperation and understanding.