How To Add Credit Card Icons To Stripe Checkout With WooCommerce

how-to-add-credit-card-images-to-stripe-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 );
?>

Create Call To Actions and Float Content - CTA Builder Plugin

Now 50% Off

WP CTA PRO

Latest Articles

Divi Vs. Elementor

Divi VS Elementor - Which one is better?

How to make a sticky contact form on your WordPress website

how-to-make-a-sticky-contact-form-1.2
WordPress Toolbox 2.0

Free WordPress Toolbox

Want to know the tools I use to build WordPress websites fast? Download my WordPress Toolbox.

Recommended Plugins

Best WP Form Builder

Best Page Builder

Elementor WordPress Theme

50% Off KnownHost Managed WordPress Hosting

Use promo code "KHA50DEAL"

KnownHost your premium managed hosting provider.

Cheapest Domains

Build your website!

Best SEO Plugin

Untitled design (10)

Speed Up Your Site

WP Rocket - WordPress Caching Plugin

Convert More Website Visitors

Start chatting with visitors who need your help using a free 30-day trial

Popular Posts

Ryan Cameron

Hi, I’m Ryan Cameron and I'm a lead generation consultant. I help businesses get more traffic to their website which then will turn into leads and new customers. I do this by creating a lead generating website for their business and then driving traffic to it using SEO, Google Ads and Facebook Ads. I specialize in service based businesses such as law firms, financial advisors, roofers, consulting firms and any service business. If you need help with generating leads, please feel to reach out via my contact form. I hope you enjoyed my article.

Was this post helpful? Help others out by Sharing

Subscribe To My Posts

I write about software, how to make money online, SEO and much more!

Something went wrong. Please check your entries and try again.

2 Comments

  1. Belgin on March 28, 2022 at 8:15 am

    Where do i need to add the code (non-developer)? I am using Elementor pro and hello theme.

    • Ryan Cameron on March 28, 2022 at 11:45 am

      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.

Leave a Comment