Return to previous page

Variation swatches. When selected, cant know wich one

This topic has 10 replies, 2 voices, and was last updated 1 years, 6 months ago ago by Rose Tyler

Jennifer

Participant

April 24, 2023 at 17:46

Hi there!
Hope you are doing fine.

When using variation swatches, is there a way of changing the color of the border of the selected swatch? When hovered, the border gets darker, but now when selected.

Also, is there a way of making the X of the out of stock swatch more darker?

Thanks a lot!

#354381 Copied Theme version: 9.1.2 WooCommerce version: 7.6.0

9 Answers
Rose Tyler

Support staff

April 25, 2023 at 08:20
Hello, Jennifer,

Thank you for contacting us and for using XStore.

Please try to use the next custom CSS code:
```
.st-swatch-preview li.sten-li-disabled {
    border-color: grey !important;
}
.st-item-meta .st-swatch-preview.type-color.sten-li-disabled:before, ul.st-swatch-preview li.type-color.sten-li-disabled:before {
    background-color: grey
}
.st-swatch-preview li.selected {
    border-color:#222 !important;
}
```
If you have any additional questions or concerns, please do not hesitate to reach out to us. Our support team is always available to assist you.

Kind Regards,
8theme team
#354433 Copied
Jennifer

Participant

May 3, 2023 at 21:16

Hello there,

And thank you!
I have a part of the swatches resolved.

How can i make the lines of the X more darker?
So when the product is our of stock, it is more easy to recognize.

Thanks a lot!

#355362 Copied
Rose Tyler

Support staff

May 4, 2023 at 09:27
Hello, Jennifer,

Thank you for your response.

Please try to use the next code:
```
preview li.sten-li-disabled span:before, .st-swatch-disabled-cross-line.st-swatch-preview li.sten-li-disabled span:before {
    background: linear-gradient(to top left,rgba(0,0,0,0) 0,rgba(0,0,0,0) calc(50% - 0.8px),#222 50%,rgba(0,0,0,0) calc(50% + 0.8px),rgba(0,0,0,0) 100%),linear-gradient(to top right,rgba(0,0,0,0) 0,rgba(0,0,0,0) calc(50% - 0.8px),#222 50%,rgba(0,0,0,0) calc(50% + 0.8px),rgba(0,0,0,0) 100%);
}
.st-swatch-preview li.sten-li-disabled {
    border-color: #222 !important;
    border-top-color: #222 !important;
    border-right-color: #222 !important;
    border-bottom-color: #222 !important;
    border-left-color: #222 !important;
}
```
Change #222 to the desired color.

Kind Regards,
8theme team
#355420 Copied
Jennifer

Participant

June 12, 2023 at 12:32

Hello there!

Sorry for the super late response!
I tried the code but it doenst work.

We would like to have the lines of the X of the out of stock more darker or change the color into red.
But we need a way of making it more notisable for the clients that there is an X there.

Thank you guys!
best regards,

#359209 Copied
Rose Tyler

Support staff

June 12, 2023 at 14:18
Hello, Jennifer,

Thank you for your response.

Please change the previous code to:
```
.st-swatch-preview li.sten-li-disabled span:before, .st-swatch-disabled-cross-line.st-swatch-preview li.sten-li-disabled span:before {
    background: linear-gradient(to top left,rgba(0,0,0,0) 0,rgba(0,0,0,0) calc(50% - 0.8px),#222 50%,rgba(0,0,0,0) calc(50% + 0.8px),rgba(0,0,0,0) 100%),linear-gradient(to top right,rgba(0,0,0,0) 0,rgba(0,0,0,0) calc(50% - 0.8px),#222 50%,rgba(0,0,0,0) calc(50% + 0.8px),rgba(0,0,0,0) 100%);
}
.st-swatch-preview li.sten-li-disabled {
    border-color: #222 !important;
    border-top-color: #222 !important;
    border-right-color: #222 !important;
    border-bottom-color: #222 !important;
    border-left-color: #222 !important;
}
```
you will get – https://prnt.sc/0VWpmaTUzvc-

Kind Regards,
8theme team
#359226 Copied
Jennifer

Participant

June 12, 2023 at 15:17

Hi Rose!

Thank you for your reply!
I have pasted the code but it doesnt seem to be working.

I dont get the same result as you do.

CanI provide access so you can check it out?
The code is already pasted.

Best regards,

Please contact administrator
for this information.

#359229 Copied

Rose Tyler

Support staff

June 12, 2023 at 15:25

Hello, Jennifer,

We’ve changed / Swatches out of stock /
to /* Swatches out of stock */
Please clear cache and check now.

Kind Regards,
8theme team

#359230 Copied

Jennifer

Participant

June 12, 2023 at 15:58

ouch! Thanks a lot!!

#359232 Copied

Rose Tyler

Support staff

June 12, 2023 at 16:09

Hello, Jennifer,

You’re welcome!

Kind Regards,
8theme team

#359235 Copied
Tagged: best selling, json array, persuasive, selection, themes, variation swatches, woocommerce
Viewing 10 results - 1 through 10 (of 10 total)