fbpx
🤝  NEW YEAR SALE RETURNS - 50% OFF all plans! 🤝 Grab it Now

Thumbnails

Martin Braut

Hi team,

I want to resize thumbnails on product page:

  1. I want thumbnails links but much smaller than now.
  2. Thumbnails photos must not be cropped. Image proportions must remain from the original photo.
  3. I want thumbnails photos without blur.
  4. If possible I would like to have a border around the thumbnails.

It should look like on this screenshot:

thumbnails.png

Hakik Zaman

Hi Martin,

Thanks for reaching out to us.

I want thumbnails links but much smaller than now.

By increasing thumbnail items you can make them smaller.

Thumbnails photos must not be cropped. Image proportions must remain from the original photo.

It depends on your media settings. Unfortunately, we have no cropping options.

I want thumbnails photos without blur.

Did you try this setting?

If possible I would like to have a border around the thumbnails.

In that case, you have to write custom CSS. Unfortunately, we have no such settings like this.

You can also request the unavailable feature here. So that, Our research team can look into it.

Thank You

Martin Braut

Hi Hakik,

I’ve tried all the settings you suggested, but nothing works. The problem remained. Can you take a closer look?

Thank you

Hakik Zaman

Hi Martin,

Thumbnails links but much smaller than now issue:

2 thumbnails are showing for your main image height.

Could you please add the below CSS at Appearance > Customize > Additional CSS

.woo-variation-gallery-thumbnail-slider {
   height: auto !important;
}

Blur Issue and crop issue:

I have added a snippet inside Code Snippets Plugin. Please change the height, width parameters as you want.

Border Issue:

Place the below CSS at Appearance > Customize > Additional CSS

.wvg-gallery-thumbnail-image.slick-slide.slick-current.slick-active {
   border: 1px solid red;
}

Hope to hear from you soon!

Thank You

Martin Braut

Hi Hakik,

only the blur issue is remain. Everything else works.

I want all five thumbnails without blur, as the one selected with the border.

Thank You

Hakik Zaman

Hi Martin,

Could you please paste the below code at Appearance > Customize > Additional CSS?

.woo-variation-gallery-wrapper .wvg-gallery-thumbnail-image {
   opacity: 1;
}

Then let me know if it resolves your issue or not. Hope to hear from you soon!

Thank You

Martin Braut

Hi Hakik,

it resolved my issue.

I have discovered something new. When I paste the below code in Additional CSS and switch the pictures or between thumbnails, the last thumbnail appears in the second row.

.wvg-gallery-thumbnail-image.slick-slide.slick-current.slick-active {
   border: 1px solid red;
}

You cann see that on the link below:

Thumbnails Issue

Thank you

Hakik Zaman

Hi Martin,

I have adjusted the class at  Appearance > Customize > Additional CSS.

Please check now and let me know if the issue resolves.

Hope to hear from you soon!

Thank You