Out of stock product swatch problem – should have X instead of fadded color

Team,

If one of the color/option of variation is out of stock/unavailable, the swatch should show “X” instead of faded color which is causing confusions as instead of certain color, a faded color appears (example: in case of Red, customer see light Peach color).

If the particular color isn’t available, the swatch should be crossed. How can this be fixed?

Example at this page: https://durvient.com/35-led-p21-5w-bay15d-1157/

Hello,

This is not an issue, this is how it works by default. Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.swatch-on-single.swatch-disabled::after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: transparent;
    color: black !important;
    font-size: 20px;
    font-weight: 600;
	opacity: 1;
    content: "X";
}

And see if this works for you. Otherwise it requires Customizations.

Best Regards

Thanks Aizaz, have put the code, this is not an ideal option, I didn’t mean literal “X” 😀

I will find a custom solution then.

Hello,

Thanks for understanding.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts