Posted on

WooCommerce: Stripe 4.0 Icons

The WooCommerce Stripe 4.0 extension has recently been released, with many exciting upgrades.

But one of the results of this upgrade is a change in the way the payment icons are displayed at checkout. The previous version of Stripe displayed colour icons, like this:

With the new release, due to factors related to the many new payment methods it integrates, it looks like this:

If you would like to change that, you can. According to the WooCommerce Stripe Documentation, you can use a hook to turn these images back into coloured versions, and even filter which ones you would like to show.

Here is the basic content of that hook:

To use it, you will add it to your site, using one of these methods here.

A couple of things to note:

First, you are going to change the snippet to match your website. Some of the credit card icons are still there in the WooCommerce files on your site, and can be referenced from your own URL, replacing https://mysite.com with your own website address (if that’s where the icon is), and the path pointing to your chosen icon.

Some of these icons are in the ../woocommerce/assets/images/icons/credit-cards directory, but not all of them – some you may need to source elsewhere.

Here are all the possible $icons you can reference, replacing ‘visa’ in that sample code:

  • [‘visa’]
  • [‘amex’]
  • [‘mastercard’]
  • [‘discover’]
  • [‘diners’]
  • [‘jcb’]
  • [‘alipay’]
  • [‘wechat’]
  • [‘bitcoin’]
  • [‘bancontact’]
  • [‘ideal’]
  • [‘p24’]
  • [‘giropay’]
  • [‘eps’]
  • [‘sofort’]
  • [‘sepa’]

And finally, a version I used on my test site:

Which returned this:

I also tweaked the css just a bit to add a little space around the icons:

#payment .payment_methods li img { padding1px; }

9 thoughts on “WooCommerce: Stripe 4.0 Icons

  1. Kinda worked…. I got the correct colour logos up, but each at 752px x 471px !!

    I suppose I can just add a little css to fix this, but every time there’s another Heath-Robinson fix necessary to fix a Woocommerce irritation I just cringe..

    1. Hey Curtis! I tried this with both Storefront and Twenty Seventeen, and they didn’t show up large (even though the source images are large). What theme are you using? Could be theme-specific CSS.

  2. Dear Laurena,

    I have the same problem as Curtis.

    The advantage is that my customers will not be able to say they have not seen the icons….

    I use another theme : Parabola.

    It seems strange that a payment solution has forgotten to update the icons, before paying it is what is most important: payment icons accepted ….

    That’s not serious from the developpers….., because if they forgot icons I’m afraid that all the other codes are bugged…..I’m waiting for version 4.9999.9999 to be sure….event if it’s free.

    1. You can view and follow the GitHub issue here, if you are interested: https://github.com/woocommerce/woocommerce-gateway-stripe/issues/445

  3. I resolve problem by adding width in img node :

    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'] = '';
    $icons['mastercard'] = '';
    $icons['amex'] = '';
    return $icons;
    }

    I take the this “alt, margin-left and width” from the older version…

    1. alt="Visa" style="margin-left: 0.3em" width="32"

      1. Great solution! Thank you for chiming in.

  4. Hi All / Dra
    where was this code placed. I haven’t the experience of you guys, but would very much like to change to colour logo’s
    Thanks in advance

    1. Hi Jon!

      To use the code, you will want to add it to your site, using one of these methods here: https://laurena.blog/adding-custom-functions-to-your-website/

      Hope this helps!

Leave a Reply

Your email address will not be published. Required fields are marked *