How to remove strikethrough from compare price on my site?

Store Design
1

Hey, I know nothing about coding etc and I am trying to remove the strikethrough option on the compare price for the entire site. The sites theme is Live, any guidance or help pointing me in the right direction would be greatly appreciated.

www.bestkeysuply.com

2

Hi @randy-bks ,

Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

.grid-item.on-sale .product-item--price s {
    text-decoration: none !important;
}

Hope it helps!

3

@LitCommerce Thank you so much, it worked perfect! I also had another question if you dont mind, how would I change the strikethrough on the smaller “previous price” to go through the center of both the dollar amount and superscript cents numbers? It goes under the cents amount instead of through the middle like on the dollar amount. Is this an issue of the superscript size and is there a way to have them both go through the middle or get rid of the strikethrough on the cents amount? Sorry in advance if this question is a little confusing

strikethrough problem pic-01.jpg
strikethrough problem pic-01.jpg933×717 31.7 KB

4

Hi @randy-bks ,

Are you wanting this?

Screenshot.png
Screenshot.png966×483 88.7 KB

Please send me the code of product-grid-item.liquid file, I will check it for you

5

Yes, that’s exactly what I was looking for. I am attaching a copy of the product-grid-item. liquid code. Thank you!

6

Hi @randy-bks ,

Please send me more code of price.liquid file, I will check it.

7

I am attaching the price.liquid code

8

Hi @randy-bks ,

Please follow the steps below:

  • Step 1: Change all code price.liquid file:
{% assign formatted_price = price | money %}

{% comment %}
  Unless this store uses multiple currencies,
  if we apply a special style to cents,
  we will wrap them in a sup (superscript) element.
{% endcomment %}

{% unless shop.money_format contains 'money' or shop.money_format contains '.' %}
  {% if settings.superscript_decimals %}
    {% if shop.money_format contains '{{amount}}' or shop.money_format contains '{{ amount }}' %}
      {% capture formatted_price %}{{ formatted_price | replace: '.','<sup>' }}</sup>{% endcapture %}
    {% elsif shop.money_format contains '{{amount_with_comma_separator}}' or shop.money_format contains '{{ amount_with_comma_separator }}' %}
      {% capture formatted_price %}{{ formatted_price | replace: ',','<sup>' }}</sup>{% endcapture %}
    {% endif %}
  {% endif %}
{% endunless %}

<small>{{ formatted_price }}</small>
{{ price | money }}
  • Step 2: Go to Assets > theme.scss.liquid and paste this at the bottom of the file:
.grid-item.on-sale .product-item--price s {
    text-decoration: none !important;
}
.grid-item.on-sale .product-item--price s small span {
    text-decoration: line-through;
}
.grid-item.on-sale .product-item--price s small sup {
    text-decoration: line-through;
}

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

9

Thank you! It works perfect on the main navigation pages but once I click on a single product page the strikethrough format on the prices remains the same

bks price format samp.JPG
bks price format samp.JPG609×227 12.3 KB

10

Hi @randy-bks ,

Please change the code and send me the product link, I will check it.

11

thank you, the code has been changed and here is the link to the product https://www.bestkeysupply.com/collections/on-sale/products/nissan-altima-5button-kr5txn4-oem383

12

Hi @randy-bks ,

Please send me the code of product-template.liquid file, I will check it.

13

I am attaching the code

14

Hi @randy-bks ,

Please go to theme.js file, find ‘timber.formatMoney’ and change code here:

Screenshot.png
Screenshot.png997×492 13.2 KB

Code:

if (moneyFormat.indexOf('money') === -1) {
  if ((moneyFormat.indexOf('{{amount}}') > -1) && (moneyFormat.indexOf('.') === -1)) {
    val = '' + val.replace('.', '<sup>') + '</sup>';
  } else if ((moneyFormat.indexOf('{{ amount }}') > -1) && (moneyFormat.indexOf('.') === -1)) {
    val = '' + val.replace('.', '<sup>') + '</sup>';
  } else if (moneyFormat.indexOf('{{ amount_with_comma_separator }}') > -1) {
    val = '' + val.replace(',', '<sup>') + '</sup>';
  } else if (moneyFormat.indexOf('{{amount_with_comma_separator}}') > -1) {
    val = '' + val.replace(',', '<sup>') + '</sup>';
  }
}

Hope it helps!

15

thank you, I updated the theme.js file with the code you provided but there were no changes in the price format for the product pages

16

Hi @randy-bks ,

Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

#productPrice-product-template s {
    text-decoration: none !important;
}
#productPrice-product-template small s span {
    text-decoration: line-through;
}
#productPrice-product-template small s sup {
    text-decoration: line-through;
}

Hope it helps!

17

@LitCommerce

Thank you so much! Everything looks perfect now

1 Like