Please note that the snippet in this post applied to the WooCommerce Stripe extension before version 4.0 was released. If you are on version 4.x.x (or greater) this may not work for you!
If you use the WooCommerce payment Gateway Stripe – and why wouldn’t you, it rocks rocks rocks! – and your currency is set to USD, you’ll notice that, as well as the common old Visa, Mastercard and American Express logo icons, you also see the not-quite-so-common Diners, JCB and Discover cards.
On a recent project, the size of the checkout was really important to our client, who wanted to lose JCB and Diners cards in order to keep the payment logos “on one line” when it came to narrower displays, like a mobile held vertically, for example.
So we added some code to make this happen, using the WooCommerce filter woocommerce_gateway_icon.
When I wrote this little snippet, I found that the docs and tutorials out there were not so helpful and not so great. So I thought I’d give you all something back (Open Source. Woop.) with a snippet which describes how to get a superfluous payment service icon gone for good from your Stripe checkout!
How to Remove Obscure Payment Logos (Icons) from WooCommerce Stripe Gateway
Add the following snippet to your themes functions.php or a helper plugin:
Now, please note, that you should replace the entire URL of the icon image in question, which you can find by right clicking like this:
Also it should be noted that the svg ending and the “style…” part will not be there for WooCommerce versions before 2.6. If you have WooCommerce version earlier than 2.6, then please update. Just update. But also note, the above snippet will. Not. Work!
Leave a comment below if this helped make your day, just a little bit, easier.
So where’s the snippet? You forgot to post your snippet?
Thanks for the comment – actually I renamed my Github last week, and this (one) Gist didn’t get picked when I swapped the links here! Should now be fixed. I’d not have seen that without your comment though so thanks +1
Precisely what I was looking for. Many thanks for sharing your solution!
Hey Robin,
Im searching for a way to remove logos form my checkout page because they are not shown correctly.
I found your website and it describes what I want but unfortunately I cant find the code snippets in your blogpost.
Or can you maybee help me and tell me why the credit card logos are not shown correctls?
https://gyazo.com/00c134c74dc7cc96c8bf1e36cd4fb512
Would be great if you could help me.
Best
Denis
Hi,
This code was for the “old” Stripe plugin for WooCommerce (version 3.x) and isn’t likely to apply for version 4.0, which changed the way credit card logos are displayed.
You may need to update or change your theme if the logos display incorrectly in your site. Also, if you recently updated, try hard refreshing – your browser may have cached a stylesheet.
Hi Robin,
I’m running Stripe 4.0.7 and they have the credit card icons in all black and it looks terrible. Ive been hunting the web for the correct solution but my php is noob at best.
Ive been trying this filter which works fine for chnaging the visa logo, but if i want to change the others to im getting errors. Could you possibly have a look and see what i need to add to change the additional Matercard and Amex icons please?
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’] = ”;
return $icons;
}
If i copy and add it again but for visa i get syntax errors. Any help would be greatly appreciated!
Richard.
Nevermind, i found the solution and it works great. For anyone else needing to change the card icons to colour, this worked:-
https://laurena.blog/woocommerce-stripe-4-0-icons/
Yes `wc_stripe_payment_icons` was added for this specific purpose! I’ve updated this one to reflect the “pre Stripe 4.0” nature of this post. Will probably do a circle back and re-post the color logos for the new stripe plugin, though actually, none of our clients have an issue with the new logo styles (that I’m aware of!).
on my site i hid the logos from showing used the following
add_filter( ‘wc_stripe_payment_icons’, ‘hide_my_icons’ );
used my custom functions to apply it. hope this helps anyone thats trying to remove the icons from stripe checkout.
Thanks,
We will be updating this post in the future, as the new Stripe for WooCommerce plugin does have a filter for exactly this, and it seems like its still popular based on these comments!
Hi Robin, thanks for your insightful tutorial. I have one issue that I can’t seem to figure out that is a neighboring problem. I use Stripe payment gateway with Woocommerce and by default, there is a radio button and text that says ” Credit Card (Stripe)” on the Checkout page (above the payment gateway). Do you know a way I can remove it without display: none; ? I’m looking for a .php code with a filter of some sort maybe. Thanks in advance if you can!
Hi Kash,
That one I would probably just `display:none;` it tbh – if you don’t use any other payment gateway. There’s probably somewhere to hit it, though the purpose of the radio button is to allow selection of gateway, and the expectation is most stores will have more than one gateway.
That said, its probably a template you can tinker with, right here:
https://github.com/woocommerce/woocommerce/blob/release/3.4/templates/checkout/payment-method.php
this is exactly what I need to do, but i’m on WC 3.3.4 and WP 4.9.6 and it doesn’t work. i don’t want to hide all, just show MC and VISA. any updates on this? thx!
p.s. i’m on a staging site, so you won’t be able to view….
I really wish there was an updated solution to this. I have been looking everywhere. I am using the latest version of Stripe and WooCommerce/Wordpress. I only want to hide those two icons. I used display: none on them just to try and it looks good on mobile, but not on desktop, there is a gap in space where the other two icons are, but are just hidden. If I don’t hide the icons, there are two many for mobile and it looks horrible.
Hey Jake, I am facing the same issue and it is annoying. We’re you able to find a solution for this?
Hi Guys. Here’s the current working solution as of November 22, 2019. With Stripe version 4.3.1 and WooCommerce 3.8.0
Firstly download and activate the plugin ‘Code Snippets’:
Then add in this snippet to the plugin:
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[‘jcb’] = ”;
$icons[‘diners’] = ”;
$icons[‘discover’] = ”;
return $icons;
}
————————
To remove any of the other icons, hover over them using ‘F12’ debugger on the checkout page and discover the text name e.g JCB of the icon you wished removed then replace or add to the snippet.
And your good to go.
If you then want all the icons aligned to the right then add this code to in customize -> additional css
#add_payment_method #payment .payment_method_paypal img, .woocommerce-cart #payment .payment_method_paypal img, .woocommerce-checkout #payment .payment_method_paypal img {
float: right;
}
And bob’s your uncle 😉
GL
For those looking for a fix, this code snippet worked for me!
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[‘jcb’] = ”;
$icons[‘diners’] = ”;
return $icons;
}
You just have to change the marks from curled to straight.