支払い方法の選択画面に決済ロゴマークを入れる方法
スポンサーリンク
Welcartの「発送・支払方法」選択画面で、決済マークを入れる方法です。
今回は、決済サービスの「イプシロン」が以下サイトで提供している決済ロゴマークを利用させて頂きました。
各決済ブランドロゴ（イプシロン）
尚、ロゴマークの著作権は、各金融機関に属します。最近では楽天銀行やジャパンネット銀行、地方銀行でもロゴマークを規約を守った上での利用やダウンロードを認めています。詳しくは各社ホームページをご覧下さい。
ちなみに上記リンクでは、「利用はイプシロン契約者のみ」とは書いていませんでしたので、利用条件を守れば誰でもロゴが使えるものと判断させて頂きました。
カスタマイズの流れ
- ロゴ画像を使用中のテーマの/imagesフォルダに保存。
- Welcart Shop → 基本設定 画面で、支払方法の説明部分にロゴ画像のタグを挿入。
- 使用中テーマ内にusces_cart.cssを作成し、スタイルシートでデザイン調整。
1. ロゴ画像を使用中のテーマの/imagesフォルダに保存
上記のイプシロンの決済ロゴダウンロードページなどから、利用したい決済ロゴをダウンロードして保存します。
保存場所は、もちろん「使用中のテーマのimagesフォルダ」に限りません。要は画像のURLがわかればいいので、お好きな場所で結構です。以下の説明では、テーマ内のimagesフォルダに保存したものとして、解説致します。
2. 支払方法の説明部分にロゴ画像のタグを挿入
設定場所：［ダッシュボード］＞［Welcart Shop］＞［基本設定］
「基本設定」画面の、支払い方法の説明を書く部分に、画像を表示する為のタグimgタグを、説明文の前に記載します（以下は記載例）。
<img alt="*" src="http://www.example.com/wp-content/themes/my_theme/images/logo_rakuten.gif" width="70" height="70" />
画像の保存場所を、src=" "のダブルクオート（"）の間に記載して下さい。width（画像の幅）とheight（画像の高さ）も当サイトでの例ですので、お好みでご変更下さい。
画像はそれぞれの決済方法毎に入力しておきます。一つの決済方法を変更する毎に「更新」をクリックする必要がありますのでご注意下さい。
3. 使用中テーマ内にusces_cart.cssを作成し、スタイルシートで調整
2.で画像タグを入れただけでは、見栄えがまだ良くないので、スタイルシートで調整します。
Welcartのスタイルシートは、通常はプラグイン内に予め設置されているusces_cart.cssがデフォルトで読み込まれます。これをカスタマイズしたい時、直接ファイルを変更してしまうとアップグレード時に上書きされてしまいます。
そこで、使用中のテーマの中にusces_cart.cssを作成して設置します。ここに変更したいスタイルシートを書き込めば、変更したい部分が上書きで適用されます。
以下のスタイルシートは画像の例です。サイトに合ったデザインになるようにご自由に変更下さい。
@charset "utf-8";
#delivery-info .customer_form dt{border-top:1px solid #ccc;clear: both;}
#delivery-info .customer_form dt:first-child{border-top: none;}
#delivery-info .customer_form dd{padding-left: 0;}
#delivery-info .customer_form dd img{margin: 0 5px 5px 0;float: left;}
※@charset "utf-8";は、usces_cart.cssの1行目に1回だけ書けばいいので、既に記載済みの場合は不要です。
これで、いい感じになりました！
決済ロゴ挿入前
決済ロゴ挿入後
支払い方法の画面で決済のロゴがあると、お客様が支払い方法を選びやすく、選択ミスも減ります。何より見栄えもいいですね。
