在结账时更改 WooCommerce Stripe 的支付卡图标

Question

我想在 WooCommerce 结帐中以不同的方式对 Stripe 显示的支付卡图标进行排序。

WooCommerce Stripe 插件支持不提供自定义代码支持，因此他们只是给了我一个代码片段，供我根据我的需要进行修改。此代码片段更改了 Visa 付款图标：

add_filter( 'wc_stripe_payment_icons', 'change_my_icons' );
function change_my_icons( $icons ) {
        // var_dump( $icons ); to show all possible icons to change.
    $icons['visa'] = '<img src="https://shipyouridea.com/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/visa.svg" />';
    return $icons;
}

有人可以修改此代码片段，将支付卡图标顺序更改为 Visa > Mastercard > Amex > Discover > JCB > Diners Club？

我还想完全删除 JCB 和 Diners Club 付款图标。我目前正在使用一些自定义 CSS 来隐藏这些图标，但想知道是否有更好的方法。

Answer 1

您没有使用右勾拳。而且显示的图标使用

float:right

，因此它们是倒置的。您还可以轻松删除任何图标。

以下将显示排序图标为

Visa

>

Mastercard

>

Amex

>

Discover

:

add_filter( 'woocommerce_gateway_icon', 'sort_stripe_payment_icons', 10, 2 );
function sort_stripe_payment_icons( $icons_str, $payment_id ) {
    if ( $payment_id === 'stripe' && is_checkout() ) {
        $available_gateways = WC()->payment_gateways->get_available_payment_gateways();
        $stripe = $available_gateways['stripe'];

        $icons = $stripe->payment_icons();

        $icons_str = '';

        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'] : '';
        }

        $icons_str .= isset( $icons['amex'] ) ? $icons['amex'] : '';
        $icons_str .= isset( $icons['mastercard'] ) ? $icons['mastercard'] : '';
        $icons_str .= isset( $icons['visa'] ) ? $icons['visa'] : '';

    }
    return $icons_str;
}

代码位于活动子主题（或活动主题）的functions.php 文件中。已测试并有效。

Answer 2

现在有一种替代方法可以实现此目的，甚至可以选择显示哪些卡片和隐藏哪些卡片。

导航到 WooCommerce --> 设置 --> 付款 --> Stripe 卡处理 --> 管理。

您将看到一个名为“允许的卡”的部分。

只需按照您希望在前端显示的顺序添加您想要显示的卡片，如下图所示：