How to Remove Obscure Payment Logos (Icons) from WooCommerce Stripe Gateway

How to Remove Obscure Payment Logos (Icons) from WooCommerce Stripe Gateway featured image

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.

10 thoughts on “How to Remove Obscure Payment Logos (Icons) from WooCommerce Stripe Gateway

    1. 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

  1. 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

    1. 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.

  2. 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.

    1. 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!).

  3. 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.

    1. 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!

Leave a Reply

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

Silicon Dales