Strikethrough Issues

[marc-everlast]

I am trying to edit the design on how these on sale products show up. Is there any way to fix the strikethrough issue on the cheaper price? It is underlining the cents rather than creating a seamless strikethrough across the numbers. Any tips? 

www.dryitcenter.com

[Olamzstudio]

Hello 👋 Marc

Fixing the strikethrough issue on the cheaper price is likely due to the way the CSS is handling the `text-decoration` property. To fix this, you can try adding the following CSS code:

.compare-at-price {

  text-decoration: line-through;

  text-decoration-thickness: 1px;

  text-underline-offset: 0;

}

ensures that the text is struck through.

1px` sets the thickness of the strikethrough line.

0` removes any offset that might be causing the strikethrough to not be seamless.

By adding the code

1. Go to online Store > Themes > Actions > Edit code.

2. Open the `theme.scss.liquid` file in the Asset folder.

3. Add the above CSS code at the bottom of the file.

Tips 

- Make sure to target the correct element (`.compare-at-price`) to apply the styles.

- Adjust the `text-decoration-thickness` value to your liking.

- If the issue persists, try adding `!important` to the CSS properties.

By adding this code, you should be able to fix the strikethrough issue and achieve a seamless strikethrough across the numbers....

[marc-everlast]

What if there is not a theme.scss.liquid in my coding Assets folder?

[BullConvert]

Hi Marc! 

Genuine issue! Strange that this got missed from the theme developers.

When I looked into this in detail, this issue happens in the Expanse theme because the price is split into dollars and cents, with the cents shown using a <sup> tag. When the <s> (strikethrough) tag is applied to the whole price, it strikes through the dollars but ends up underlining the cents.

I also tried fixing it using the text-decoration CSS property, but the issue still persists. (You can see an underline under the cents) The only way to make it work correctly is to remove the parent <s> tag and apply the strikethrough separately to the dollar and cent parts — but that requires editing the theme’s code, which isn’t ideal.

At this point, I feel, the best and easiest solution is to reach out to the theme developers. It’s a simple fix for them and avoids the risk of breaking anything else in the design. I think, if the turn-around is not much, this is the best option.

If this is not fixed at their end quickly, please free free to dm me, as a shopify developer, I'll try to see what's possible as a workaround. All the best!

[marc-everlast · Accepted solution]

I was able to change the liquid coding for the decimals to assign superscript_decimals = false so the superscript went away. The strikethrough now goes through the full number. 

[BullConvert]

Bravo!!! This is another good way to fix this issue! 🙂👍🏻

[marc-everlast]

Is there a way to change the price form looking like "1499" to $14.99" within my theme?

[marc-everlast]

*99 as superscript