Change default Payment Gateway Logos

Update:

I found this https://njengah.com/add-custom-woocommerce-payment-icons-checkout-page/

It states:

To add the custom WooCommerce Payment Gateway Icons, we need to filter the woocommerce_gateway_icon function, which is most likely available in each gateway extension. You need to add the following code in the functions.php file:

For the code:

add_filter ('woocommerce_gateway_icon', 'njengah_custom_woocommerce_icons');
 
function njengah_custom_woocommerce_icons() {
 
    $icon  = '<img src="icons-url" alt="stripe" />';
 
     return $icon;
 
}

Could someone help me where to find that woocommerce_gateway_icon function for the visa, master card, amex, and Klarna?

Hi @alphax,

The example you provided is how you would customize the Klarna icon. woocommerce_gateway_icon is a filter which allows you to change the value.

The solution is what you posted.

Kind Regards,

Hi Clayton,

if you use the code exactly like above, it will change the icon for several payment methods, in my case for Klarna and bitcoin, while it doesn’t change it for the credit cards.

However, I don’t want the same payment logo for all payment methods, but specific logos for Klarna and the credit card payment.

This is why the guide is saying (as per my quote) that you need to find the specific gateway function in the gateway extension, which you’d then use to replace the generic woocommerce_gateway_icon placeholder.

@alphax,

You need to add an if condition so you can ensure you’re only changing the icon for the desired gateway.

add_action('woocommerce_gateway_icon', function($icon, $gateway_id){
    if('stripe_klarna' === $gateay_id){
        // your custom code here.
        $icon  = '<img src="my-klarna-icon-url" alt="stripe" />';
    }
    return $icon;
}, 10, 2);

@alphax I have made a note to include the other Klarna icon as an option in the next release.

Hi Clayton,

thanks a lot!

I tried your code (with an image from my library) but it doesn’t work (icon for Klarna is the same) for some reason.

However, the gateway name (stripe_klarna) is already helpful, because with that I was able to use the same code I used for PayPal and just replaced the check and now it works! The code is:

add_filter( 'woocommerce_gateway_icon', 'bbloomer_remove_what_is_paypal2', 10, 2 );
 
function bbloomer_remove_what_is_paypal2( $icon_html, $gateway_id ) {
if( 'stripe_klarna' == $gateway_id ) {
   $icon_html = '<img src="/wp-content/uploads/klarna-600px.png" alt="PayPal Acceptance Mark">';
}
return $icon_html;
}  

How did you find out the name of the gateway that needed to be used?

Could you please also tell me the name for the credit cards?

If logos could be changed in settings (WP admin) it would be certainly a value add!

@alphax,

You can control what logos are displayed using the Credit Card Settings. If you’re trying to change the icons like you did with Klarna then you will need to edit the templates/card-icons.php template.

How to customize a template

You can find the name of each gateway in the woo-stripe-payment/includes/gateways folder. Each gateway class has an ID. The all start with stripe_ so credit cards are stripe_cc.

The reason my example didn’t work is because I had a typo gateay_id when it should have been gateway_id.

Thank you Clayton!

I checked out the card-icons.phpUnfortunately, this file only has this code:

<span class="wc-stripe-card-icons-container">
	<?php foreach ( $cards as $id ): ?>
        <img class="wc-stripe-card-icon"
             src="<?php echo $assets_url . 'img/cards/' . $id . '.svg' ?>"/>
	<?php endforeach; ?>
</span>

However, what I’m trying to accomplish is to change the single credit card icons, whilst the above loops through the available cards and adds the images from a different source.

I saw in the plugin folder, that it’s probably sourcing it from assets/img/cards but I’m not sure how to override these in my child theme folder?

@alphax,

Unfortunately, this file only has this code:

That is the code that renders the icons. If you want to change those then point the src value to your custom icons.

src="<?php echo /wp-content/uploads/' . $id . '.svg' ?>"/>

Or something similar.

That makes sense. I can then just upload icons with the exact same name and it should catch it. Will try it tomorrow and let you know!

Thanks a lot for your 1A support, if I could give more than 5* in my review I would!

So this worked well! I uploaded the icons to here:
/wp-content/themes/listify-child/woo-stripe-payment/icons/

and then changed the code in the php file to the following:

src="<?php echo '/wp-content/themes/listify-child/woo-stripe-payment/icons/' . $id . '.png' ?>"/>

Note that I changed the .svg to .png to reflect the correct file type.

Thanks again Clayton!