Styling of variant swatches/buttons - by teolivier

Solved6 replies2 participantsUpdated by teolivier

  • Avatar: teolivier
    teolivier
    Participant

    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

    Avatar: Rose Tyler
    Rose Tyler
    Support staff

    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
    Avatar: teolivier
    teolivier
    Participant

    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
    Avatar: Rose Tyler
    Rose Tyler
    Support staff

    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
    Avatar: teolivier
    teolivier
    Participant

    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
    Avatar: Rose Tyler
    Rose Tyler
    Support staff

    Hello,

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

    Regards

    #269858 Copied
    Avatar: teolivier
    teolivier
    Participant

    Thanks!

    #271164 Copied

The issue related to '‘Styling of variant swatches/buttons’' has been successfully resolved, and the topic is now closed for further responses