How to change Woocommerce/ Stripe credit card icons/ Integrity Stack

[fantasy_5]

Hi,

How do I change the Woocommerce/ Stripe credit card icons on the checkout page? I’ve tried different codes and once implemented they change all logos and not just the credit cards ones. I have successfully change the Paypal logo so it is fine. Yes, I have also checked the forum, but nothing so far. How can I adjust this code so that it affects credit card icons only and not Paypal, Alipay, or anything else? I would like to be able to add other icons beside the originals. Additionally, how do I make Alipay Icon bigger?

// Custom Credit Card Icons
add_filter ('woocommerce_gateway_icon', 'custom_woocommerce_icons');
 
function custom_woocommerce_icons() {
    $icon  = '<img src="' . trailingslashit( get_template_directory_uri() ) . 'img/build/svg/visa.svg' . '" alt="Visa" />';
    $icon .= '<img src="' . trailingslashit( get_template_directory_uri() ) . 'img/build/svg/mastercard.svg' . '" alt="Mastercard" />';
    $icon .= '<img src="' . trailingslashit( get_template_directory_uri() ) . 'img/build/svg/amex.svg' . '" alt="American Express" />';
    $icon .= '<img src="' . trailingslashit( get_template_directory_uri() ) . 'img/build/svg/discover.svg' . '" alt="Visa" />';
    $icon .= '<img src="' . trailingslashit( get_template_directory_uri() ) . 'img/build/svg/jcb.svg' . '" alt="JCB" />';
    $icon .= '<img src="' . trailingslashit( get_template_directory_uri() ) . 'img/build/svg/diners.svg' . '" alt="Diners Club" />';
 
    return $icon; 
}

Or would it be possible to use an image that displays all icons rather than adding each individually?

// Add Custom Credit Card Icons to WooCommerce Checkout Page 

add_filter ('woocommerce_gateway_icon', 'njengah_custom_woocommerce_icons');

function njengah_custom_woocommerce_icons() {

    $icon  = '<img src="icons-url" alt="stripe" />';

     return $icon;

}

[prakash_s]

Hello @fantasy_5,

Thanks for writing to us.

The feature that you want would require custom development, I would suggest you contact a developer who can assist you with your concern. Please note that we don’t provide custom development support. It is out of the support scope.

In case if you have an idea about coding, please have a look at this article for the reference

WooCommerce: Stripe 4.0 Icons

Thanks for understanding

[fantasy_5]

Hi, Prakash_s

I used the code found in the link and it does add the image. Thank you. How do I remove the standard icons with the exception of Alipay as I am trying to enlarge that one.

[ruenel]

Hello @fantasy_5,

You may need to check this out:

• https://docs.woocommerce.com/document/stripe/#section-39

Please also do not forget that you added this custom PHP code to insert a big image with several cards in it.

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'] = '<img src="https://www.shopatkei.com/wp-content/uploads/2021/04/payment-gateways.jpg" />';
    return $icons;
}

Best Regards.

[fantasy_5]

Hi, Ruenel

I was able to change the icons using the code. Thank you. I also wanted to ask how do I get additional payment icons to actually appear and all icons to align properly? perhaps have the next row of payment methods line up below the word credit card and go in a straight line like the visa logo, etc. For instance, If I want to add WeChat, g pay, Samsung pay, Microsoft pay, bitcoin, or any other gateway.

If I tick the Alipay option then it appears like this.

I’m also trying to get it where there’s a little room above where the privacy statement begins so it won’t look cluttered. With the current setup if you tick the credit card option the information appears jumbled and illegible like so…

When the Alipay payment option is selected it appears like this…

[ruenel]

Hello @fantasy_5,

You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

The example code that you can use could be like this:

.woocommerce-account form .payment_methods li, 
.woocommerce-checkout form .payment_methods li {
    height: auto;
    clear: both;
}

.woocommerce-account form .payment_methods label img:first-child, 
.woocommerce-checkout form .payment_methods label img:first-child,
.woocommerce-account form .place-order, .woocommerce-checkout form .place-order {
    clear: both;
}

.woocommerce-account form .payment_methods label img, .woocommerce-checkout form .payment_methods label img {
    margin-bottom: 5px;
}

Feel free to make adjustment as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Intro to CSS - https://goo.gl/mFuWQT
How to get CSS selectors - https://goo.gl/BmoH39
Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
CSS Media Queries - https://goo.gl/L3ZHNg

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third-party developer.

[fantasy_5]

Hi,

Thanks for the custom code. I was able to use it. However, additional payment gateways do not show up. I removed it temporarily. How do I get additional payment icons to actually appear if they are coded the same way?
Also, the original logo sizes are 64x64. I was using logo sizes 75x48. Can I make them bigger without affecting the appearance of the credit card number input portion of the form or other items within the form or do they need to remain 64x64?

The custom PayPal logo look like this on mobile

I’m trying to achieve custom logos with a sleek and clean alignment without jumbled items or having anything appear pixelated on mobile or desktop.

If I elect to go the single image route which contains all logos how do I remove the original ones?

No matter if I use a single image of individual logos certain items appear jumbled. I’m just weighing options here.

[tristup]

Hi @fantasy_5,

You need to adjust the Paypal icon size based on the screen size. To adjust it in the mobile please add the following custom CSS code into the Theme Options > CSS.

@media  (max-width: 480px) 
{
    .payment_method_paypal img {    
        max-width:50% !important;
        width:50% !important;
        margin-top:0px !important;
    }
}

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[fantasy_5]

Hi, Tristup

Thank you. I have swapped the Alipay logo to enlarge it. How do I get It to behave the exact same way as the PayPal logo on mobile with a bit more space between the credit card and Alipay option? The credit card icons are touching the Alipay logo.

Also, if you can help I’d still like to know how to add additional payment gateway icons and get them to show up. I am ok with using the default card icons since I have changed the Alipay and paypal logos.

This code you guys provided works just fine for swapping out the existing logos, but additional logos do not appear.

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;
}

[marc_a]

Hi @fantasy_5,

My colleagues already provided you with so many custom codes as a starting point and as you all know that custom code is outside the scope of our theme support. I suggest that you learn some CSS in order to proceed with your customization, you can check what @ruenel suggested above or y ou may seek 3rd party developers to help you with your problems or you can avail One where we can answer questions outside of the features of our theme.

Thank you for understanding.

[fantasy_5]

Hi, Marc_a

I actually inquired about how to add additional icons to the payment gateway set up during my first question … when I started this thread. I also mentioned the additional payment icons not appearing a few times. Yes, different codes were provided and all were helpful except. the extra Icons I did add never appeared on the payment form itself. I ran across different threads about ways to change the current ones, but none to add additional payment icons prior to starting this thread. I did use the code Ruenel provided and it worked great at swapping the icons, but not for adding new ones that actually appear on the form.

Support here has been phenomenal and I love X. I thought it would be great to learn more about how to properly code this here in case someone else was wondering the same thing. This is my first time working with Woocommerce so I am not 100% clear on how all customizations work. If no one is able or wants to assist me further with this final piece of my missing puzzle I understand. Either way, I appreciate every member of your staff and all the support I’ve received here.

[ruenel]

Hello @fantasy_5,

Thank you for the positive response. If there is anything else we can help you with, please do not hesitate to open another thread.

Cheers.