Note: The colour icons have been returned in the 4.1.0 update. These edits are no longer relevant.
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 { padding: 1px; }
Automattic
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..
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.
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.
You can view and follow the GitHub issue here, if you are interested: https://github.com/woocommerce/woocommerce-gateway-stripe/issues/445
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…
alt="Visa" style="margin-left: 0.3em" width="32"Great solution! Thank you for chiming in.
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
Hi Jon!
To use the code, you will want to add it to your site, using one of these methods here: http://laurena.blog/adding-custom-functions-to-your-website/
Hope this helps!
Laurena,
I’ve been trying to solve this problem with no luck. Adding your snippet to my functions.php file simply changes the order. Visa-MC-Amex but then JCB Discover and Diners are right after. I want those last 3 to just go away…or at least JCB and Diners. Without your snippet it is JCB-Discover-MC-Amex-Visa-Diners
Any ideas? Is there a function to hide select payment methods?
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;
}
Laurena,
I used your snippet but it doesn’t seem to display only my chosen icons. If my default order is “JCB-Discover-MC-Amex-Visa-Diners”….applying your snippet to my functions.php file only seems to re-order them. It changes to “Visa-Amex-MC-JCB-Discover-Diners”.
Any ideas? Seems like there needs to be some kind of ‘remove’ or ‘hide’ command.
Thanks
Tim
Hi Tim!
Have played with this a bit today and came up with a snippet that you can find here. It removes icons off my test site, hopefully it will work for you!
https://gist.github.com/LaurenaRehbein/23a2c3fc5c5a7101790f961bcb275d02
AWESOME! Just like that my icons are no longer jumbled across 2 lines. THANK YOU!
If you have any ideas on where/how to correct some of these other alignment issues it would be appreciated, though you’ve done plenty already and I could live with these imperfections…
[img]https://i.imgur.com/ZHxJG0O.gif[/img]
https://followgrown.com/derechitic lazaver nancyah 72c003e073
https://dost.pk/lubemata marvvane gilianah 4b1f4b8a67
Thanks for this. It’s Ok for my customer.
Great post Laurena