Add a cross to Swatches instead of fading

Is it possible to add a line or a cross to the swatches if they are out stock or de-activated. Now they fade a bit, but i want to emphasize that.

Hello,

Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS. And see if this works for you.

.swatch-on-single.swatch-disabled {
    opacity: 1;
}

.swatch-on-single.swatch-disabled:before, .swatch-on-single.swatch-disabled:after {
    position: absolute;
    content: '';
    background: black;
    display: block;
    width: 100%;
    height: 5px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    //center the X vertically and horizontally:
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.swatch-on-single.swatch-disabled:after {
    -webkit-transform: rotate(45deg);    
    transform: rotate(45deg);
}

Regards.
Xtemos Studios.

[Author]

Posts