Add strike through for sold out variant with variant images - dawn theme

[beginner0309]

We changed some of our variant options to show as images instead of text, see below for example. Because of this change, now there is no way to differentiate from the variants that are sold out to those that are in stock unless you click on them. Can someone help me figure out a way to add a strikethrough for the variant images that are sold out? Thank you!

[Shadab_dev]

If you did this on your own then i understand but if you like watched a tutorial or copy pasted code then this feature should have been there. Anyway please send your store url, will check if its doable with css, most probably we might need to modify code a bit to check for sold out variants and give a seperate class to it and add the css stylings, but mostly there are classes for such variants we can target it with that.

[beginner0309]

Here is a link to the page for example: https://annasui.com/products/lip-rouge

[Shadab_dev]

Try adding this in base.css file at the very bottom

.product-form__input input.disabled + label:before{

width: 3px;

background: red;

height: 100%;

transform: rotateX(210deg);

left: 50%;

}

This should add like a cross out line on swatches that are unavailable. 

[CodingFifty]

Hey! @beginner0309,

Since your variant options are now displayed as images, you'll need to add custom code to visually indicate sold-out variants. A common solution is to apply a CSS class (like sold-out) to out-of-stock variant image buttons and then use CSS to style them—such as adding a strikethrough, dimming the image, or overlaying a "Sold Out" label. You'll need to modify the JavaScript or Liquid code that renders your variant selectors so it checks inventory and adds the class accordingly.

[beginner0309]

Would you be able to share what that code should be? I do not know enough to create this by myself. Appreciate your help!

[CodingFifty · Accepted solution]

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

.product-form__input input[type='radio'].disabled + label.color-swatch:before {
  content: "";
  position: absolute;
  left: 0;
  border: 1px solid red !important;
  top: 50%;
  width: 100%;
  height: 2px;
  background-color: red;
  transform: rotate(-20deg);
  transform-origin: center;
  z-index: 10;
  pointer-events: none;
}

.product-form__input input[type='radio']:not(.disabled) + label.color-swatch:before {
  content: "";
  border: none;
}

[beginner0309]

This worked perfectly, thank you!!