「あと○円で送料無料です」をカートページに

スポンサーリンク

(2014/4/24更新)テンプレートの退避方法を、新しいものと差替えました。

客単価を上げるための「あと○円で送料無料です」の表示を、カートページに入れました。

Welcartであと○円で送料無料を表示:CSS装飾後

Welcartフォーラムでも同様のトピック(こちら)にコードがあり、こちらをほぼそのまま使わせて頂きました。

カスタマイズ手順

  1. wc_cart_page.phpを、使用中のテーマ内に退避
  2. 退避させたwc_cart_page.phpに、「あと○円で送料無料です」のコードを入れる

1. wc_cart_page.phpを、使用中のテーマ内に退避

Welcartプラグインのフォルダ内の以下の場所にある、カートページ用テンプレートwc_cart_page.phpをコピー。使用中テーマ内にペーストします。

usces-e-shop/theme/welcart_default/wc_templates/cart/wc_cart_page.php

テーマ内に設置する時は、Welcart_defaultフォルダと同じようにディレクトリ階層を作成します。

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

2. 退避させたwc_cart_page.phpに、「あと○円で送料無料です」のコードを入れる

wc_cart_page.phpの好きな部分に、以下のコードを記入します。

 <?php $num = ( $this->options['postage_privilege'] )- ( $this->get_total_price() );
        if( 0 < $num ){
                echo '<div class="postage_privilege">あと&yen;' . number_format($num) . 'のお買い上げで送料無料です</div>';
        } ?>

以下の画像の例では、64行目の</table>の直後に挿入しました。

Welcartであと○円で送料無料を表示

更に、スタイルシートで装飾をすれば出来上がりです。

Welcartであと○円で送料無料を表示:CSS装飾後

画像の例でのスタイルシートは以下のようになっています。

#inside-cart .postage_privilege{
	padding: 20px 10px;
	background-color: rgb(9, 97, 20);
	color: white;
	margin: 0 0 10px;
	text-align: center;
	font-size: 1.15em;
	font-weight: bold;
	border-radius: 5px;
}

コメントは受け付けていません。

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