対象テーマはDAWNとSenseです。デフォルトでは
割引前の価格 割引後の価格
と表示されていますが、これを
割引後の価格 ○○％OFF
と表示させる方法を解説します。
「スニペット」フォルダ内のprice.liquidファイルを選択し、以下のコードを削除します。
{%- unless product.price_varies == false and product.compare_at_price_varies %}
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
<span>
<s class="price-item price-item--regular">
{% if settings.currency_code_enabled %}
{{ compare_at_price | money_with_currency }}
{% else %}
{{ compare_at_price | money }}
{% endif %}
</s>
</span>
{%- endunless -%}これで「割引前の価格」が表示されなくなります。
次に、「○○％OFF」を表示するために、コードを以下のように変更します。
変更前：
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span>
<span class="price-item price-item--sale price-item--last">
{{ money_price }}
</span>変更後：
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span>
<span class="price-item price-item--sale price-item--last">
{{ money_price }}
{% comment %} ここから追記 {% endcomment %}
{% if product.compare_at_price > product.price %}
{{ ' ' | append: product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price | append: '% OFF' }}
{% endif %}
{% comment %} ここまで {% endcomment %}
</span>
ウェブに関することなら、
何でもお気軽にご相談ください。