定価に対する販売価格の割引率を表示

スポンサーリンク

今回の割引表示は、キャンペーン等の割引ではなく、商品詳細ページで入力できる「定価」に対する「販売価格」の割引率の表示です。

Amazonでは以下のように表示されています。

Amazonの価格表示

「これだけ安くなるんだ~」と、購買意欲が湧きますね。こういう工夫はどんどん参考にさせて頂きましょう。

今回はwc_item_single.phpをカスタマイズしますので、アップグレードなどで上書きされないように、退避させたテンプレートを使用します。

カスタマイズの手順

  1. wc_item_single.phpを使用中のテーマに退避させる
  2. 退避させたwc_item_single.phpに、割引率を表示するコードを書く

1. wc_item_single.phpを使用中のテーマに退避

今回は商品詳細ページにコードを追加するので、商品ページを出力しているテンプレートを、使用中のテーマ内に退避(設置)します。

元データは、Welcartプラグインフォルダ内の以下の位置にあります。

usc-e-shop/theme/welcart_default/wc_templates/wc_item_single.php

これをコピーし、使用中のテーマに設置。テーマ内にwc_templatesというフォルダを作り、位置関係がwelcart_default(Welcartのデフォルトテーマ)と同じような階層となるように、以下のように設置します。

  • 使用中のテーマ
    • wc_templates
      • wc_item_single.php ←ココ

テーマ内にこのようにWelcartファイルを設置すると、優先的に読み込まれるようになります。

カスタマイズは、使用中テーマに退避させたこのファイルで行います。

2. 退避させたwc_item_single.phpにコードを追加

割引率を追加する場所は、今回はAmazonの表示と同様にという設定で、販売価格の下にしました。

Welcartの価格表示・デフォルト

wc_item_single.phpの36行目(単一SKU)と122行目(複数SKU)に、以下の記述があります。販売価格を出力しているコードです。

<?php usces_the_itemPriceCr(); ?>

この直後の行に、以下のコードを挿入。

<?php if( usces_the_itemCprice('return') > 0 ): ?>
    <div class="field_name">OFF</div>
    <div class="field_dprice">
    <?php
     $price_a = preg_replace("/[^0-9]+/", "", usces_the_itemCprice('return'));
     $price_b = preg_replace("/[^0-9]+/", "", usces_the_itemPriceCr('return'));
     $price_c = $price_a - $price_b;
     $price_d = round($price_c/$price_a*100,1);
    ?>
    <?php usces_crform($price_c, true, false); ?>
    &#40;<?php echo number_format($price_d); ?> &#37;&#41;
    </div>
<?php endif; ?>

定価の設定がある商品にのみに出力されるように、最初に条件分岐を入れています。

計算の部分に手間取り(数字の取得が・・・)、若干長めのコードになってしまいました・・・。もしかしたらもっといいコードの書き方があるかもしれません。

上記では、41行目~の部分で以下のように計算させています。

  • $price_a = 定価
  • $price_b = 販売価格
  • $price_c = 定価 – 販売価格 (割引額)
  • $price_d = 割引額 ÷ 定価 x 100 (割引率・小数第一位まで)

割引率表示のデザイン調節

割引率を出力させるコードを挿入しただけでは、まだ表示は以下の画像ような状態です。

Welcartの価格表示・割引表示

そこで、CSSでデザインを調整します。WelcartのCSSを調節する時は、使用中のテーマのstyle.cssと同じ場所にusces_cart.cssを作成・設置し、そこにデザインを調節したいスタイルシートを書き込んでいきます。

今回の場合は、以下のようにusces_cart.cssに書き込みました。ついでに「定価」には横線を入れています。

#itempage .field .field_cprice{text-decoration: line-through;}
#itempage .field .field_dprice {
width: auto;
margin: 0px;
padding: 0px;
color: #ED5B14;
font-weight: bold;
text-align: right;
}

これで出来上がりです!

Welcartの価格表示・割引率有り・デザイン後

5 Responses to “定価に対する販売価格の割引率を表示”

  1. まさる より:

    またまた、こちらのブログを参考にさせて頂きました。
    割引表示がされると、お得感が出て訴求力が強くなっていいですね!
    ちなみに私は、「定価」をアマゾンと同様に「参考価格」へ変更させました。

    • まめ子(管理人) より:

      ご参考頂き、ありがとうございます。Amazonなど大手のECサイトは、色々とヒントが多いですよね!(技術力が伴わないのでなかなか全ては真似出来ないですが・・・)
      Amazonは利用機会も多いので、ユーザー目線に立って観察しながら買い物してますよ~。

  2. ミック より:

    はじめまして。いつも参考にさせていただいています。
    とても助かってます。
    質問ですが、日本円での定価に対する販売価格の割引率の表示はできたのですが、他の通貨ができません。
    何か方法があるのでしょうか?
    PHPに無知なもので申し訳ありませんが、
    ご教授願います。
    よろしくお願いいたします。

    • まめ子(管理人) より:

      「多分」ですが(検証する余裕なく・・・)、$price_a及び$price_bのところで、usces_the_itemCpriceから得られる価格(例:\100)の「\」を取り除くPHPを書いているのですが、外貨表示で小数点以下の価額が出てくる場合、「.」(小数点)も取り除かれてしまうのではと考えられます(preg_replaceで、「数字以外を排除する」ようにコーディングしています)。
      要は(例:\100)の「\」を取り除いた数字だけを計算に使いたいので、preg_replaceの現在の「数字以外を排除する」を、「通貨表示だけを排除する」とか「小数点も入れた数字以外を排除する」に変えてみるとうまくいくかもしれません。

  3. ミック より:

    返信ありがとうございます。
    参考にして、ちょっといじってみます。
    自信はないですが・・・

Copyright© 2017 Welcart カスタマイズ ブログ All Rights Reserved.