CODEWITHSUNDEEP
phpwordpresswoocommercecheckoutpayment-method
JOKKER
JOKKER

Reputation: 542

Change payment card icons programatically in WooCommerce Stripe checkout

I would like to sort the Stripe displayed payment card icons in a different way in WooCommerce checkout.

Stripe payment card icons at WooCommerce checkout

WooCommerce Stripe plugin support does not provide custom code support so they just gave me a code snippet to modify according to my needs. This code snippet changes out the Visa payment icon:

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;
}

Could someone please modify this code snippet to change the payment card icon order to Visa > Mastercard > Amex > Discover > JCB > Diners Club?

I would also like to completely remove the JCB and Diners Club payment icons. I'm currently using some custom CSS to hide these icons but was wondering if there's a better way.

Upvotes: 2

Views: 3982

Answers (2)

nematoth
nematoth

Reputation: 383

There is now an alternative way to achieve this, or even to choose which cards to show and which to hide.

Navigate to WooCommerce --> Settings --> Payments --> Stripe Card Processing --> Manage.

You will see a section called, "Allowed Cards".

Simply add the cards you'd like to show in the order you'd like them to show on the front-end as per the image below:

enter image description here

Upvotes: 0

LoicTheAztec
LoicTheAztec

Reputation: 254231

You are not using the right hook. Also the displayed icons use float:right, so they are inverted. You can also remove any icon easily.

The following will display sorted icons as 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;
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.

enter image description here

Upvotes: 2

Related Questions