ワードプレスの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行目当たりの・・・
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
public function get_icon() { $icons = $this->payment_icons(); $icons_str = ''; $icons_str .= isset( $icons['visa'] ) ? $icons['visa'] : ''; $icons_str .= isset( $icons['amex'] ) ? $icons['amex'] : ''; $icons_str .= isset( $icons['mastercard'] ) ? $icons['mastercard'] : ''; if ( 'USD' === get_woocommerce_currency() ) { $icons_str .= isset( $icons['discover'] ) ? $icons['discover'] : ''; $icons_str .= isset( $icons['jcb'] ) ? $icons['jcb'] : ''; $icons_str .= isset( $icons['diners'] ) ? $icons['diners'] : ''; } |
ここを下記に書き換えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
public function get_icon() { $icons = $this->payment_icons(); $icons_str = ''; $icons_str .= isset( $icons['visa'] ) ? $icons['visa'] : ''; $icons_str .= isset( $icons['mastercard'] ) ? $icons['mastercard'] : ''; $icons_str .= isset( $icons['amex'] ) ? $icons['amex'] : ''; $icons_str .= isset( $icons['jcb'] ) ? $icons['jcb'] : ''; $icons_str .= isset( $icons['diners'] ) ? $icons['diners'] : ''; $icons_str .= isset( $icons['discover'] ) ? $icons['discover'] : ''; if ( 'USD' === get_woocommerce_currency() ) { $icons_str .= isset( $icons['discover'] ) ? $icons['discover'] : ''; $icons_str .= isset( $icons['jcb'] ) ? $icons['jcb'] : ''; $icons_str .= isset( $icons['diners'] ) ? $icons['diners'] : ''; } |
以上で作業は終了です。
テーマ「E-Commerce」使用で縦並びを横並び
テーマ「E-Commerce」を利用している場合カードロゴは700px以下で縦並びになります。横並びを維持したい場合は追加CSSに下記を追加します。
|
1 2 3 4 5 |
@media screen and (max-width: 700px) { img, .alignleft, .alignright, .footer-col { display: inline-block; } } |
修正のときはバックアップを忘れずに！
コメント