Custom Credit Card Icons for WooCommerce
on September 24, 2015
WooCommerce comes with a default set of credit card icons that look like this:
If you like ‘good enough’ then these will do you just fine. But if look close, these are probably a bit blurry, especially on a high-resolution screen. They also 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:
https://gist.github.com/spigotdesign/5fc0136e1d81ed8f7dc9f1f8848103f4
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:
Better:
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.
This is meant to replace the entire set… so you\’d need to add the dbd icon to the set and name it correctly.
Hello,
thanks for this code , but for me it repaets same icons for Direct Bank Transfer also ? how to change that
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:
[php]
$icon .= \’<img src="\’ . trailingslashit( get_template_directory_uri() ) . \’img/build/svg/direct-bank-trans.svg\’ . \’" alt="Direct Bank" />\’;
[/php]
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.
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?
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.
So you\’re using
stylesheet_directoryoverget_template_directory_uri()… that makes sense if you\’re using a child theme. I thinkget_stylesheet_directory_uri()has replacedstylesheet_directoryas standard practice however. See: https://developer.wordpress.org/reference/functions/bloginfo/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.
thanks
Hi,
Thanks for your post, have you an idea how to add icon for Bank transfer, check payment etc ?