How to remove strikethrough on color swatches?

[shayansidiqi]

I sell products with variant colors and sizes.
I don't want the colors to be ever crossed out.

Currently, the default selection is the first option (in this case EU 40) and if the product is out of stock in that size the color swatch also gets crossed even if I have stock available in other sizes. You can see the screenshot attached.

Is there anyway for the color swatches to not get ever crossed.
I'm using theme pipeline.

Thank you

[Moeed]

Hey @shayansidiqi 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[shayansidiqi]

Hello,

Here is the store link: https://ariaboutique.ae/

Thank you

[devcoders]

Hello @shayansidiqi 

1. From your Shopify Admin, navigate to Online Store > Themes > Edit Code
2. In the Assets folder, open theme.css and add your CSS code at the end

.swatch__button.sold-out a:before, .swatch__button input.sold-out~label:before, .swatch__button input.unavailable~label:before, .swatch__button input:disabled~label:before, .radio__button .sold-out+label:before, .radio__button .unavailable+label:before{
content: none!important;
}

[shayansidiqi]

Hello,

Thank you so much for the answer. This worked and removed the strikethrough, but it also removed the strikethrough on the sizes as well, which is not desirable.

Thank you

[Moeed · Accepted solution]

Hey @shayansidiqi 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.swatch__button label:before {
    content: unset !important;
}
</style>

RESULT:

If I managed to help then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Betterave-Nina]

Hi @shayansidiqi.

Here's how to remove the crossing bar from the color swatches.

Here's how to hide the section on mobile.

1: Go to Online Store -> Theme -> Edit code
2: Search file theme.css
3: Add the following code to the bottom of the file -> Save

.product__block__variants radio-swatch label::before {
	display: none !important;
}

If applied correctly, the result should be:

If you don't want to add the code to theme files directly, you can use a code injection app like the one in my signature.

I hope this helps!

[Dan-From-Ryviu]

Those variants are out of stock, so it has a strikethrough.