Custom Credit Card Icons for WooCommerce


  1. Justin

    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.

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

  2. Steve

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

    1. 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" />\’;

      1. John

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

  3. Stef

    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.

    1. 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?

  4. Stef

    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.

    1. So you\’re using stylesheet_directory over get_template_directory_uri()… that makes sense if you\’re using a child theme. I think get_stylesheet_directory_uri() has replaced stylesheet_directory as standard practice however. See:

      1. Stef

        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.

  5. thanks

  6. Hi,

    Thanks for your post, have you an idea how to add icon for Bank transfer, check payment etc ?

Leave a Reply

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