fbpx
Want To Add Extra Images Per Product Variation For Free? Download Now

Spacing between swatches

diego guardabascio

Hi,

what if I want to get more space between swatches? I tried with no results via css.

I also would like to remove darker background on mouse over and align selected variation with the label.

Could you help me with that?

Thanks in advance.

Schermata 2022-02-28 alle 17.46.00.png

Hakik Zaman

Hi diego,

Thanks for reaching out to us. Can you please give us an exact link?

Hope to hear from you soon!

Thank You

Hakik Zaman

Please add the below CSS at Appearance > Customize > Additional CSS

table.variations tr td {
   padding-bottom: 30px;
}

table tbody tr:hover>td, table tbody tr:hover>th {
   background-color: transparent;
}

.variations tbody tr th.label {
   position: relative;
}

span.woo-selected-variation-item-name {
   position: absolute;
   top: 0;
}

Then check your site, please clear your browser and others caches before checking.

Hope to hear from you soon!

diego guardabascio

Hi Hakik,

thanks for reply.

This code works like a charm (I’ve just add !important to padding) ⤵️

table.variations tr td {
   padding-bottom: 30px;
}

table tbody tr:hover>td, table tbody tr:hover>th {
   background-color: transparent;
}

Unfortunately misalignment is still present.
It’s very small amount of pixels.
With new code we also have another problem when customer select a combo of variations.

As you can see “Cuoio” is on a new line

Hakik Zaman

Hi diego,

Is it happening on the customize section?

I am not getting the new line issue here-

https://www.scarpineitaliane.com/prodotto/anfibietto-in-pelle-fondo-cavallerizza/

Can you please give us temporary admin access to your site? We’ll try to investigate the issue for you.

You can add new users by going to Users > Add New set the user and password for us, set the role to admin, and set the info here.

And add your site URL, login username, and password in the site login area. Follow this guideline: https://www.useloom.com/share/27c1f2ac633c4060b2da883d946107d7

Hope to hear from you soon!

Thank You