Remove Cross Line for Out of Stock Items

[JoeyRoo]

Hi,

Is there a way to remove the cross line from any variant, which is out of stock and just have that size or color faded instead?

https://theothelabel.com/products/dione-short-sleeve-pleated-neck-top?variant=47582071619872

[MaverickStudio]

Hi @JoeyRoo ,

• Go to Online Store > Themes > Edit code.
• Search for products.css

Add the following

This will disable clicks on the variant and you can adjust the colors as you see fit. So the rgba value 0.15 means 15% black.

.variations input[type='radio'].is-disabled + label:before {
	content: unset !important;
}
.variations input[type='radio'].is-disabled + label {
	background-color: rgba(0, 0, 0, 0.15);
	pointer-events: none !important;
}

[dws_pvt_ltd]

Hello @JoeyRoo , Hello! Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on “Themes”
3. Select “Edit code”
4. Open your CSS file. If you have a product.css file, open that instead.
5. If you can’t find your custom CSS file, open “base.css”
6. Add the following code at the end of the file.

.variations input[type="radio"].is-disabled + label:before {
    content: unset;
}

/* to get opicity of the variant name add the below css also */
.variations input[type="radio"].is-disabled + label > span {
    opacity: 1; /* before its value is 0.4 set it to 1 */
}

See the screenshot below,

Feel free to reach out if you have any questions or need assistance.

Best Regards,

DWS.

[niraj_patel]

Hello @JoeyRoo

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

.variations input[type="radio"] + label:before{ background: unset !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Moeed]

Hey @JoeyRoo

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 tag

RESULT:

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

Best Regards,
Moeed

[ZestardTech]

Hi @JoeyRoo

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > product.css and paste this at the bottom of the file:

.variations input[type='radio'].is-disabled + label:before {
content: unset !important;
}

[JoeyRoo]

This removes the line, but now the Color and Size are not faded if out of stock. Basically If someone clicks on Size Medium for example, I want all the colors that are out of stock in that size to fade and vice versa. So if someone clicks on A color instead of a size, I want all the sizes that are out of stock in that color to fade.