WooCommerceのストライプカード決済<お支払い画面でカードアイコンの追加>

ワードプレスのWooCommerceを使用のサイトで、プラグイン「woocommerce-gateway-stripe」を使用の場合デフォルトでは、「VISA」「アメックス」「マスターカード」の3種類のカードロゴが表示されます。

そこに「JCB」「ダイナース」「ディスカバリー」のカードロゴを追加する方法。

「woocommerce-gateway-stripe」でカードロゴを追加

カードロゴ画像はすでに「assets」→「images」内に18個ほど用意されています。「JCB」「ダイナース」「ディスカバリー」のありますので画像を用意する必要はありません。

編集するのはプラグイン「woocommerce-gateway-stripe」の「includes」フォルダ内の「class-wc-gateway-stripe.php」

今回の作業内容は「VISA」「アメックス」「マスターカード」を以下のように並び順変更し、新しいロゴも追加します。

「VISA」「マスターカード」「アメックス」+「JCB」「ダイナース」「ディスカバリー」

FTPでファイルをダウンロードして直接編集か、プラグインエディターから編集するかは好みで。

編集する部分は200行目当たりの・・・

ここを下記に書き換えます。

以上で作業は終了です。

テーマ「E-Commerce」使用で縦並びを横並び

テーマ「E-Commerce」を利用している場合カードロゴは700px以下で縦並びになります。横並びを維持したい場合は追加CSSに下記を追加します。

修正のときはバックアップを忘れずに!

コメント

タイトルとURLをコピーしました