Adding credit card icons to your checkout experience will help create trust and improve trust with your website users. WordPress and WooCommerce have removed the credit card icons since the 5.6.2 update. I found some code below provided by WooCommerce on how to add it back in.
You will need to go to Appearance -> Theme Editor and copy and paste this code into the functions.php file in the theme you are using.
Here is the code:
function add_credit_card_gateway_icons( $icon_string, $gateway_id ) {
if ( 'stripe' === $gateway_id ) {
$icon_string = ' <img class="stripe-visa-icon stripe-icon" src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/visa.svg" alt="Visa" /> ' ;
$icon_string .= ' <img class="stripe-mastercard-icon stripe-icon" src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/mastercard.svg" alt="mastercard" /> ' ;
$icon_string .= ' <img class="stripe-amex-icon stripe-icon" src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/amex.svg" alt="amex" /> ' ;
$icon_string .= ' <img class="stripe-discover-icon stripe-icon" src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/discover.svg" alt="Discover" /> ' ;
$icon_string .= ' <img class="stripe-diners-icon stripe-icon" src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/diners.svg" alt="diners" /> ' ;
$icon_string .= ' <img class="stripe-jcb-icon stripe-icon" src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/jcb.svg" alt="jcb" /> ' ;
}
return $icon_string;
}
add_filter( 'woocommerce_gateway_icon', 'add_credit_card_gateway_icons', 10, 2 );
8 Responses
Where do i need to add the code (non-developer)? I am using Elementor pro and hello theme.
Hi,
You will need to go to Appearance -> Theme Editor and copy and paste this code into the functions.php file in the Hello theme.
I tried copying this exactly and got a critical theme error.
Hi Luis,
There was an error with the original code, I have updated the code.
Please try again.
Beautifully simple. Thank you for posting this. Why stripe themselves don’t publish something like this, I don’t know.
I’m going to add the “Powered by Stripe” svg and find a secure/PCI badge as well to add to my child theme too.
Great tip, thanks!
Hi Ryan,
thanks for article, it works fine!
I removed JCB, Diners and Discover, so there a three icons left
Is it possible to get the icons in one row, actually i have Visa and Mastercard in one row and below the amex Icon
Thanks
Hello Ryan,
I was able to successfully implement the credit card logos with your article. I have removed the Diners, JC and Discover cards as I don’t use them.
I now have a small problem, the credit card logos are probably stored in a block of 6. in the top row I have Visa and Mastercard and in the bottom row the AMEX logo.
Is it possible to line up the three logos in one row?