variations swatches

Hello,

I would like to enlarge the “swatch” image, I would need the CSS class to increase the size so that it is not invisible, because you see that it is too weak on the screen shot.

Attachments:

You must be logged in to view attached files.

Hello,

Sorry to say but right now on the mentioned Product of your Site, you don’t have Image Swatch enabled.

Could you please enable that and then mention us so that we can look after this and provide you the CSS accordingly.

Best Regards

Hello,

Indeed, I had removed it, I put it back on the product but it is too small to be seen.

Attachments:

You must be logged in to view attached files.

[graficaonline.lojaset]

Olá, espero que estejam bem! Eu gostaria de fazer isso também.

Aumentar o tamanho das imagens das variações na página do produto. Como proceder?

meu site: http://www.graficaonlinelojaset.com.br

• This reply was modified 2 years, 2 months ago by graficaonline.lojaset.

Hello,

Right now as your Choix attribute has Image uploaded only, so to increase its Swatch size, you need to try out the following Custom CSS and paste it to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section:

table.variations tr:last-child .cell [class*="wd-swatches"] {
    --wd-swatch-size: 4em !important;
}

.wd-swatch :is(img,picture) {
    object-fit: contain !important;
}

In this CSS, you can increase the value of the wd-swatch-size according to your choice.

On your other Site, there is only a Color Swatch being used as an Image Swatch and the size is already increased there.

Best Regards

Good evening,

Thanks for the working CSS code,

On the other hand, I have other almost invisible images that are too small, and I would like to enlarge the colors that are too small as well,

The CSS code acts on an element? It is necessary to act on other classes to enlarge the rest?

Thanks in advance,

Attachments:

You must be logged in to view attached files.

Hello,

If you want to increase the Size of overall Swatches on your Site irrespective of specific ones, then kindly ignore this earlier Custom CSS that we sent you:

table.variations tr:last-child .cell [class*="wd-swatches"] { --wd-swatch-size: 4em !important; }

And try out the following one instead:

.single-product [class*="wd-swatches"] { --wd-swatch-size: 4em !important; }

This CSS will increase the size of the overall swatches on the Single Product page. Location to paste the Custom CSS is the same as told earlier.

Best Regards

Thanks for your feedback,

If nevertheless I want to reduce the size of the colors, is there a specific class to modify?
In addition for the colors white for example is not very visible, can we have a class on which we apply a border 1 px solid black; to bring out the white especially

Hello,

For the Color Swatch, actually right now there isn’t a separate class defined.

But as you have right now on your Site have a different bg-style defined for the Color Swatches, so you can try out the following Custom CSS selector for the Color Swatch on your Site:

.wd-bg-style-1[class*="wd-swatches"] { --wd-swatch-size: 2em !important; }

Further, to add border for the Color Swatches, you can try out the following Custom CSS:

.wd-bg-style-1[class*="wd-swatches"] .wd-swatch-bg { border: 1px solid #000 !important; }

Best Regards

Hello,

Thanks for your feedback,

Thank you for the piece of code, I will implement it and see the result.

Goodbye,

Most Welcome!!!.

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts