WordPress（以下wp）とWooCommerce（以下wc）で、オンラインショップを作る下記の続き。
今回は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のみで対応したけど、スタイルは分けたいね。
