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.
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:
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.
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