Sense theme - Hide "compare at price" and change "sale" badge to "% off"

Store Design
1

Hello! I wanted to change the style of how sale pricing is indicated on Sense 2.0 theme. Currently both “compare at” price and “sale” badge is shown. I wanted to hide the “compare at” pricing and keep the badge however change it to “(custom product percentage) % off”. Does anyone know how I can possibly do this? Any help is appreciated!! Here is an example page. https://vlumelashes.com/products/dynamic-duo

2

@Uplevelbeauty - this will need code editing, are you familiar with liquid coding?

3

@suyash1 Yes I am

4

@Uplevelbeauty - can you please hide sale code and add this code in place of to check? you may need to change labels as per your code

{% if product.compare_at_price > item.price_min %}

 {{ product.compare_at_price | minus: item.price_min | times: 100.0 | divided_by: product.compare_at_price | round }}% 

{% endif %}
5

@suyash1 I believe I tried this earlier, not sure if I did it right May I ask which liquid file it should be done on?

6

@Uplevelbeauty - check product template

7

Hi @Uplevelbeauty ,

Please go to snippets > price.liquid file and change all code:

{% comment %}
    Renders a list of product's price (regular, sale)

    Accepts:
    - product: {Object} Product Liquid object (optional)
    - use_variant: {Boolean} Renders selected or first variant price instead of overall product pricing (optional)
    - show_badges: {Boolean} Renders 'Sale' and 'Sold Out' tags if the product matches the condition (optional)
    - price_class: {String} Adds a price class to the price element (optional)

    Usage:
    {% render 'price', product: product %}
{% endcomment %}
{%- liquid
  if use_variant
    assign target = product.selected_or_first_available_variant
  else
    assign target = product
  endif

  assign compare_at_price = target.compare_at_price
  assign price = target.price | default: 1999
  assign available = target.available | default: false
  assign money_price = price | money
  if settings.currency_code_enabled
    assign money_price = price | money_with_currency
  endif

  if target == product and product.price_varies
    assign money_price = 'products.product.price.from_price_html' | t: price: money_price
  endif
-%}

  

    {%- comment -%}
      Explanation of description list:
        - div.price__regular: Displayed when there are no variants on sale
        - div.price__sale: Displayed when a variant is a sale
    {%- endcomment -%}
    

      {{ 'products.product.price.regular_price' | t }}
      
        {{ money_price }}
      
    

    
      {%- unless product.price_varies == false and product.compare_at_price_varies %}
        {{ 'products.product.price.regular_price' | t }}
        
          <s>
            {% if settings.currency_code_enabled %}
              {{ compare_at_price | money_with_currency }}
            {% else %}
              {{ compare_at_price | money }}
            {% endif %}
          </s>
        
      {%- endunless -%}
      {{ 'products.product.price.sale_price' | t }}
      
        {{ money_price }}
      
    

    <small>
      {{ 'products.product.price.unit_price' | t }}
      
        {{- product.selected_or_first_available_variant.unit_price | money -}}
        /
         {{ 'accessibility.unit_price_separator' | t }} 
        
          {%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
            {{- product.selected_or_first_available_variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}
        
      
    </small>
  

  {%- if show_badges -%}
    
      {{ compare_at_price | minus: price | times: 100 | divided_by: compare_at_price }}% off
    

    
      {{ 'products.product.sold_out' | t }}
    
  {%- endif -%}

it will display fine

1 Like
8

@LitCommerce Thank you! This works perfectly on the product page!

However I did notice on the collection page thumbnail it is still appearing as “sale” instead of “__% off” how it does on the product page. Would that be edited in the same liquid file as well?

9

@LitCommerce This is the collection page I am talking about https://vlumelashes.com/collections/bundles

10

Hi @Uplevelbeauty ,

Please go to card-product.liquid file, at line 94 change the code:

Screenshot.png
Screenshot.png1288×335 29.5 KB

Code:

{{ card_product.compare_at_price | minus: card_product.price | times: 100 | divided_by: card_product.compare_at_price }}% off

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

11

@LitCommerce Both worked perfectly, thank you so much!!!

1 Like
12

Hi. I have done this successfully with the Theme Dawn however I would like to remove “off” after the percentage?