Welcart カスタマイズ ブログ

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

• ツイート
• B! ブックマーク
• Google+
•  Pocket
• Facebook

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

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

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

今回は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のデフォルトテーマ）と同じような階層となるように、以下のように設置します。

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

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

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

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

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 （割引率・小数第一位まで）

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

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

そこで、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;
}

これで出来上がりです！

• 商品ページ
• 割引

• ツイート
• B! ブックマーク
• Google+
•  Pocket
• Facebook