How to remove strike through on "out of stock" product colours only

[Swimovations]

Hi,

Does anyone know how to remvoe the strike through of the colours on out of stock products?

the issue is that when you have a colour and size selected it puts a line through other colours that dont have that size available but that makes it look like we dont have that colour at all.

thank you in advance

[Swimovations]

Hi,

thanks for that, but unfortuantly it doesnt seemed to have worked.

im useing story theme if that makes a differance?

[mageplaza-cs]

Hi @Swimovations 

I am from Mageplaza - Shopify solution expert.

To remove the strikethrough styling on out-of-stock color variants in Shopify (especially when a specific size is selected), you’ll need to edit the JavaScript and/or CSS that controls variant availability display.

This issue is common with themes like Dawn or Refresh, where unavailable variant combinations (e.g., a color with a sold-out size) get styled with a soldout or disabled class and often a strikethrough (text-decoration: line-through in CSS).

Step-by-Step Fix
1. Inspect the element
Use Inspect Element in your browser (Right-click > Inspect) to identify:

• The class applied to the swatch (e.g., .variant-input--color or .variant__button)
• The class added when out of stock (e.g., .soldout, .disabled, .unavailable)

You’ll likely see something like:

<button class="variant-button color soldout" disabled>Red</button>

And CSS like:

.variant-button.soldout {
  text-decoration: line-through;
  opacity: 0.5;
}

2. Edit the theme CSS

• From your Shopify admin, go to Online Store > Themes.
• Click Actions > Edit code.
• Find your CSS file (usually under assets/, e.g., base.css, theme.css, or component-product.css).
• Add this rule at the bottom:

/* Remove strikethrough from out-of-stock color swatches */
.variant-button.color.soldout {
  text-decoration: none;
}

Or, if the theme uses .disabled or .unavailable:

.variant-button.color.disabled,
.variant-button.color.unavailable {
  text-decoration: none;
}

You may also want to restore the default text color:

.variant-button.color.soldout {
  color: inherit;
  opacity: 1; /* Optional: remove greyed-out effect */
}

3. Optional: Adjust JavaScript behavior (for advanced control)
If the strikethrough or disablement is being applied by JavaScript based on unavailable variant combinations, you can override that behavior.

Look in:

• product-form.js
• variant-picker.js
• or the <script> at the bottom of product.liquid or main-product.liquid.

Find the logic that disables unavailable options and modify it to not apply .soldout to color options, or to apply a custom class instead.

Please let me know if it works as expected!

Best regards!