Single Product Thumbnails

ireth92 · October 2016

Hi,

I want to have more than 3 gallery images below the main Single Product Image, and make them smaller, because they are taking way too much space. Is there any way to have more than 3 columns for that gallery?

Here's how it looks now: http://pre.swissgo.tech/producto/test-product-copiar/ I'd like the blue one to be on the same line as the others.

I tried resizing the thumbnails via WooCommerce's settings, they're currently at 50x50 px. But that only makes them very pixelated because they are being scaled up to fit de columns anyway. I'm also using the Regenerate Thumbnails Plugin, it does not change the displayed size.

If there is no built-in way to fix this, could you please point me in the right direction in order to modify it through the child theme?

Thank you very much.

Regards,

Mireia

Albert · October 2016

Hi,

to put 4 images in one column under featured single product image, you need to use the following css:

.woocommerce .product .product_wrapper .product_image_wrapper .thumbnails .image_frame { width: 23% !important; }
.woocommerce .product .product_wrapper .product_image_wrapper .thumbnails .image_frame:nth-child(3n) { margin-right: 2% !important; }
.woocommerce .product .product_wrapper .product_image_wrapper .thumbnails .image_frame:nth-child(4n) { margin-right: 0 !important; }

ireth92 · October 2016

That worked like a charm, thank you!

Albert · October 2016

You are welcome

ireth92 · October 2016

Hi again,

So, I changed the settings on Product Image to "Use external plugin for featured images" because I'm using a custom function to replace the main image with the thumbnail on click, and it wouldn't work on Default. But now the css you gave me here doesn't work

I assume the name of the classes changed or something, but I can't figure out what it is. Could you help me out, please?

Thanks in advance.

Regards,

Mireia

Albert · October 2016

We have no idea what tools or function you use for popup window but we didn't found anything wrong related to theme on your site. Console it out of any errors and we do not know where you did mistake.

About the css we gave you above, it does not work because it simply does not exist. You didn't put it on your site.

ireth92 · October 2016

I checked the html output on both versions, the default one and the one with "Use external plugin for featured images". The reason that CSS is not working is because the structure and classes are completely different from one another.

Here's a picture demonstrating it:

I can't find the way to achieve the same effect (to have more than 3 columns) with the structure on the "external plugin" version. Is it even possible?

Thank you very much.

Regards,

Mireia

Albert · November 2016

We can see what you mean but in our opinion, what you need requires files customization and couldn't be done with some easy css tricks.

ireth92 · November 2016

Ok, I understand. I'll keep looking for a solution myself.

Thanks anyway.

Regards,

Mireia

Single Product Thumbnails

Comments