WooCommerce Tips: Customizing the Credit Card Image for the WooCommerce Paypal Pro Plugin

Here is the code I used in my theme’s functions.php file to customize the images displayed on the Checkout page on a website using the WooCommerce Paypal Pro plugin:

function custom_paypal_pro_icon() {
    return get_stylesheet_directory_uri().'/images/credit_card_logos_9.gif'; // use "get_stylesheet_directory_uri()" so the path works when child themes are active
}
add_filter( 'woocommerce_paypal_pro_icon', 'custom_paypal_pro_icon' );

I imagine you can use this snippet for other payment gateways as well, since I actually customized this code based off an article I found which explained how to change the default Paypal icon.

The tag that clarifies which payment gateway’s icon you are changing is: woocommerce_paypal_pro_icon

I found the correct tag to use for the Paypal Pro plugin in wp-content > plugins > woocommerce-gateway-paypal-pro > includes > class-wc-gateway-paypal-pro.php on line 16:

$this->icon = apply_filters('woocommerce_paypal_pro_icon', WP_PLUGIN_URL . "/" . plugin_basename( dirname( dirname( __FILE__ ) ) ) . '/assets/images/cards.png' );

Meet the author

Libby Fisher is an experienced freelance web developer, recently relocated from Seattle to Boston, and passionate about developing websites that are both aesthetically appealing and intuitively usable - or as she prefers: "beautifully effective."