Debut Theme - Change order of price & compare-at-price

New Member
1 0 0

Hi there! I'm using Debut theme and would like to modify how the sale prices appear. I have acheived it successfully on my product pages however I can't for the life of me find how to modify the product prices that show up on my HOME PAGE. I would like to (1) get rid of the word "sale" and (2) change the order that the price and the compare-at-price appears. Before (what I have currently) and after (what I am trying to achieve) pictures attached. I have some knowledge of HTML and CSS so if someone could just point me in the right direction of where to modify this content that would be wonderful. Thanks in advance.

BEFORE:

 

 

 

 

 

 

 

 

 

 

AFTER:

0 Likes
New Member
1 0 0

Under Snippets go to product-price.liquid 

Find the unit which says compare_at_price > price 

If no changes are made to the earlier file then replace the below unit with the one between line 16 and 37.

Attaching the screen shot of the updated unit with the changes marked. The positions of compare at price and price have been swapped and "sale" thing has been removed.

After this it will work fine across all pages

Code Lines Below

{% if compare_at_price > price %}
  {% if price_varies %}
    
    <span class="product-price__price product-price__sale">
      {{ money_price }}
      <span class="product-price__sale-label"><!-- Edit: {{ 'products.product.on_sale' | t }} has been removed from this space --></span>
    </span>  

    <span class="visually-hidden"><!-- Edit: {{ 'products.product.regular_price' | t }} has been removed from this space--></span>
    <s class="product-price__price">{{ compare_at_price | money }}</s>

  {% else %}
    
    <span class="product-price__price product-price__sale">
      {{ money_price }}
      <span class="product-price__sale-label"><!-- Edit: {{ 'products.product.on_sale' | t }} has been removed from this space --></span>
    </span>

    <span class="visually-hidden">{{ 'products.product.regular_price' | t }} </span>
    <s class="product-price__price">{{ compare_at_price | money }}</s>

  {% endif %}

 

 

0 Likes
New Member
1 0 0

This didn't quite work for me. Is there another way to do this?

 

0 Likes