WooCommerce + Stripe のカード表示にJCB等を追加する

WordPress(以下wp)とWooCommerce(以下wc)で、オンラインショップを作る下記の続き。

WORDPRESS + WOOCOMMERCE + STRIPEでのオンラインショップ実装メモ

今回はStripeで設定したクレジットカードの表示を整える。

というのも、デフォルトだとこんな感じ。

JCBが表示されないし、崩れる。

何故かというと、wcの表示するプログラム内で、米ドルじゃないとDiscover, JCB, Dinersを表示しないようになってる。

崩れるのは単純にimgタグをfloat:rightしてるだけだから。

これを修正するには、functions.php でフィルター処理する。

フィルタ名は woocommerce_gateway_icon。

まず枠はこんな感じ。

function custom_gateway_icon ($icon_html, $payment_id) {

  // Stripeの場合
  if ($payment_id === 'stripe') {
    // 処理
  }

  return $icon_html;
}
add_filter('woocommerce_gateway_icon', 'custom_gateway_icon', 10, 2);

$icon_html に入っているのは、各カードの画像タグ。

まず、横幅狭い時崩れるので divタグで囲んで見る。

function custom_gateway_icon ($icon_html, $payment_id) {

  // Stripeの場合
  if ($payment_id === 'stripe') {

    // divで囲む
    $icon_html = '<div>'.$icon_html.'</div>';
  }

  return $icon_html;
}
add_filter('woocommerce_gateway_icon', 'custom_gateway_icon', 10, 2);

これで並ぶようになった。

次に、JCBを追加するため画像タグを追加。

Stripeの画像はここにある。

WC_STRIPE_PLUGIN_URL.'/assets/images/' 

クラスなどは他のクレジット会社のタグを真似る。

function custom_gateway_icon ($icon_html, $payment_id) {

  // Stripeの場合
  if ($payment_id === 'stripe') {

    // JCBを追加
    $image = WC_STRIPE_PLUGIN_URL.'/assets/images/jcb.svg';
    $icon_html .= '<img src="'.$image.'" alt="JCB" class="stripe-jcb-icon stripe-icon">';

    // divで囲む
    $icon_html = '<div>'.$icon_html.'</div>';
  }

  return $icon_html;
}
add_filter('woocommerce_gateway_icon', 'custom_gateway_icon', 10, 2);

増えた。

しかし、順番が気になる・・・。

さらにカードを増やすと隠れちゃったり・・・。

というわけで試行錯誤した結果こうした。

function custom_gateway_icon ($icon_html, $payment_id) {

  // Stripeの場合
  if ($payment_id === 'stripe') {

    // 画像ディレクトリ
    $image_dir = WC_STRIPE_PLUGIN_URL. '/assets/images/';

    // カードの種類(この順番で表示する)
    $cards = array(
      'visa' => 'Visa',
      'mastercard' => 'Mastercard',
      'jcb' => 'JCB',
      'amex' => 'American Express',
      'diners' => 'Diners',
      'discover' => 'Discover',
    );

    // 出力htmlタグ
    $tags = array();
    foreach ($cards as $card => $name) {
      $tags[] = '<img src="'.$image_dir.$card.'.svg"'
                   .' class="stripe-'.$card.'-icon stripe-icon"'
                   .' alt="'.$name.'">';
    }

    // divで囲む(スタイル無理やり追加)
    $icon_html = '<div style="display:flex;flex-wrap:wrap;justify-content:flex-end">'.$icon_html.'</div>';
  }

  return $icon_html;
}
add_filter('woocommerce_gateway_icon', 'custom_gateway_icon', 10, 2);

並び順も好きなようにできた。

とりあえずfunctions.phpのみで対応したけど、スタイルは分けたいね。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA