Return to previous page

Styling of variant swatches/buttons - by teolivier

This topic has 7 replies, 2 voices, and was last updated 4 years ago ago by teolivier

teolivier

Participant

January 20, 2021 at 07:44

How can the styling be changed for the variants of a product? Currently they geryed-out style makes it nearly impossible to see the unavailable style. How can this be changed to a more user-friendly visible style such as the example given. For both the shop/grid view and product view.
Thanks

Please, contact administrator
for this information.

#269220 Copied Theme version: 7.2.3 WooCommerce version: 5.6

6 Answers
Rose Tyler

Support staff

January 20, 2021 at 08:12
Hello,

Use the next custom CSS code:

.st-swatch-preview li.sten-li-disabled span:after { background-color: transparent; } span.st-custom-attribute.sten-disabled, .sten-li-disabled span.st-custom-attribute { background-color: white; color: black; }

or just

.st-swatch-preview li.sten-li-disabled span:after { background-color: #ffffff4f; }

Regards
#269225 Copied
teolivier

Participant

January 20, 2021 at 10:49

Thanks however the visibility is still low due to the X on the image. Is it possible to hide the X on the unavailable variants and then just to style the background color and font color for those unavailable variants?

E.g. Only for unavailable variants:
No cross on button [ X ]
Background: Light-grey
Font-colour: Dark-grey

Thanks

#269243 Copied
Rose Tyler

Support staff

January 20, 2021 at 13:10
Try the next code:

.st-swatch-preview li.sten-li-disabled span:before { display: none; } .st-swatch-preview li.sten-li-disabled span:after { background-color: #ffffff4f; } span.st-custom-attribute.sten-disabled, .sten-li-disabled span.st-custom-attribute { color: grey; }

Regards
#269272 Copied
teolivier

Participant

January 23, 2021 at 09:29

Hi there,

When I apply the full code it takes the “X” away but it also takes the text away (variant size text).
When I modify the code to only remove the X then I get like the image shown. You can see there is a dark grey border, light grey background, white text. Like this it is very light and hard to read. The code that I put is:

.st-swatch-preview li.sten-li-disabled span:before {
display: none;
}

However I would still like to style the following:
Border color: No border
Background color: Darker grey than in the image.
Text color: A white/grey/black color that work well with background color.

It would be best if you code write the code and then I can try different color settings, I just need to know which code is for which element (border/background/text).

Thanks

Please contact administrator
for this information.

#269785 Copied

Rose Tyler

Support staff

January 23, 2021 at 14:53

Hello,

I’ve added the code – https://prnt.sc/xi4pyt > https://prnt.sc/xi4qld https://prnt.sc/xi4rm3

Regards

#269858 Copied

teolivier

Participant

January 29, 2021 at 23:23

Thanks!

#271164 Copied
Viewing 7 results - 1 through 7 (of 7 total)