Color swatch STOCK

Store Design
1

I just want to remove the “slash” to the color swatch in my store when my product is out of stock with simple css code.

unifit_0-1722897607198.png

I did exactly this, with sucess to my size variant with this code:

.product-form__input input[type=“radio”].disabled + label {
text-decoration: none;
}

but i can’t seem to find nowhere online that would instruct for the color swatches.

1 Like
2

Hi @unifit ,

The “/” is added to the color swatch as a CSS “after” pseudo-class.

To remove the “/” from the swatch you need to either hide the after element using “display: none;” property or remove the code from the css.

In the Edit code section, in your theme files, you can find “component-swatch-input.css” file in the assets directory (Dawn Theme)

In the CSS file, you can find the following code at line 72:

/* Display crossed out line over swatch when input is disabled */
.swatch-input__input:disabled + .swatch-input__label > .swatch::after,
.swatch-input__input.visually-disabled + .swatch-input__label > .swatch::after {
  /* Diagonal of a square = length of the side * sqrt(2)  */
  --diagonal--size: calc(var(--swatch-input--size) * 1.414);
  --crossed-line--size: 0.1rem;
  content: '';
  position: absolute;
  bottom: calc(var(--crossed-line--size) * -0.5);
  left: 0;
  width: var(--diagonal--size);
  height: var(--crossed-line--size);
  background-color: rgb(var(--color-foreground));
  transform: rotate(-45deg);
  transform-origin: left;
}

Either you can remove or comment this set of code or change it to as:

/* Display crossed out line over swatch when input is disabled */
.swatch-input__input:disabled + .swatch-input__label > .swatch::after,
.swatch-input__input.visually-disabled + .swatch-input__label > .swatch::after {
  /* Diagonal of a square = length of the side * sqrt(2)  */
  --diagonal--size: calc(var(--swatch-input--size) * 1.414);
  --crossed-line--size: 0.1rem;
  content: '';
  position: absolute;
  bottom: calc(var(--crossed-line--size) * -0.5);
  left: 0;
  width: var(--diagonal--size);
  height: var(--crossed-line--size);
  background-color: rgb(var(--color-foreground));
  transform: rotate(-45deg);
  transform-origin: left;
  display: none;
}

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,

Sweans

2 Likes
3

Perfect, thanks.

Was having trouble with the opacity but going through the code i was able to do it.