Custom credit card icons for WooCommerce

Replace WooCommerce default credit card icons with SVG versions

WooCommerce comes with a default set of credit card icons that look like this:

default-woocommerce-credit-card-icons

If you like ‘good enough’ then these will do you just fine. But if look close, these a probably a bit blurry, especially on a high-resolution screen. They are feel a bit dated to me – curved buttons shapes with faux drop shadows. Again, they are not bad but may not fit the flatter style we’re currently wrapped in.

So let’s change them out with icons that are more modern in look, and let’s use SVG icons for perfect resolution on any screen.

I found this set from Dribbble: https://dribbble.com/shots/1115380-SVG-Credit-Cards. We’re using Stripe and these contained all the icons we needed. Check around for more if your payment gateway includes different companies.

The code

Just note that we are using Stripe, so the code below is based on the WooCommerce Stripe Gateway extension. Which ever gateway you’re using should follow the same pattern however, you may just need to adjust which credit cards you need to show.

We’ll be filtering the WooCommerce function, which is most likely available in each gateway extension: woocommerce_gateway_icon

In functions.php or a custom functions plugin, add this:

This code will replace the icon list generated in the extension. This assumes your images are in the img/build/svg/ directory within your theme.

The icons

Split the icons out into individual .svg files and save them in your theme. One thing to remember is that when saving these in Illustrator be sure to constrain the artboard to the size of the artwork. But this isn’t a post about working with SVG’s… if you need more info css-tricks.com has a good list of articles on the subject: http://spig.io/3C0o112F1N2x

The results

Before:
default-woocommerce-cc-icons

Better:
better-woocommerce-credit-card-icons

10 Comments


Hi – any idea how to make it so that it doesn\’t update for all payment gateways at the checkout?

When I used the above code in the theme\’s functions.php it updated the Paypal and \”direct bank deposit\” icons with the .svg files too.

Reply

    This is meant to replace the entire set… so you\’d need to add the dbd icon to the set and name it correctly.

    Reply

Hello,
thanks for this code , but for me it repaets same icons for Direct Bank Transfer also ? how to change that

Reply

    Hi Steve. You\’ll need to find the original list for the payment gateway that you\’re using. Since I don\’t know which you\’re using, I\’d guess that you may need to add something like this at the end:

    $icon .= \'<img src="\' . trailingslashit( get_template_directory_uri() ) . \'img/build/svg/direct-bank-trans.svg\' . \'" alt="Direct Bank" />\';
    
    Reply

      That just ads another icon after the full set. How can we not have the cc icon set be repeated for Paypal?


This isn\’t a suggested way of doing it. This will effect Paypal and set the icons to that payment portion as well. Also, if you use a child theme it won\’t overwrite the parent.

Reply

    I based this method on the Stripe Gateway, it may not work if you\’re using another gateway like Paypal.

    Do you have a link to the suggested way of doing it?

    Reply

Hey Bryan,

I think your example would change most gateways but I\’m not sure I\’d recommend it. I\’m a true believer in less is more.

So me, I\’d keep Paypal separate from whatever Credit Card gateway. For the most part it can be hard to change most gateways. Especially First Data.

I would do this for Paypal

//change the icons for pay pal
function replacePayPalIcon($iconUrl) {
return get_bloginfo(\'stylesheet_directory\') . \'/img/pp.png\';
}
add_filter(\'woocommerce_paypal_icon\', \'replacePayPalIcon\');

and use this method for the credit card gateway. Often times you have to find the selector in the plugin that the company uses. In this example I found that FD uses wc_firstdata_icon


//change the icons for first data
function wc_firstdata_icon() {
return get_bloginfo(\'stylesheet_directory\') . \'/img/cards.png\';
}
add_filter( \'wc_firstdata_icon\', \'wc_firstdata_icon\' );

Hope this helps.

Reply

      Ya, sorry. For this client we are using a Child Theme. Sorry, forgot to mention that. I would have just thought it understood for the path. Change based on theme. Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *

Tell us about your project.

We'd love to hear what you're working on.

Work with us

Hi. We are Spigot. Telemarketers pronounce it Spy-got.

We are a Park City, Utah based web design shop that excels at building custom websites powered by WordPress and WooCommerce. We love content - content strategy, content curation, content soup...????Have a look around the site. As you browse you'll find useful navigation links in the sidebar on the left. We hope you find them useful anyway... Please let us know what you think, shoot us a message here.