How To Add Credit Card Icons To Stripe Checkout With WooCommerce

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