How to Change PayPal and CC Logos on WooCommerce Checkout

Probably you have noticed that on the checkout page of your Woocommerce site there is no logo for Paypal payment method. Also the icon for credit card payment method looks very unexpressive.

If you want to change or personalize the logo on the checkout page of your Woocommerce website, then I have prepared this simple solution for you. You just need to change the image path and add these snippets to the functions.php file of your child theme. Good luck!

Paypal:

//paypal logo
function woocommerce_paypal_payments_gateway_icon( $icon, $id ) {
    if ( $id === 'ppcp-gateway' ) {
        return '<img src="https://yoursiteurl.com/wp-content/uploads/2024/10/pp-logo-100px.png" alt="PayPal Payments" />'; 
    } else {
        return $icon;
    }
}
add_filter( 'woocommerce_gateway_icon', 'woocommerce_paypal_payments_gateway_icon', 10, 2 );

Credit Card:

//custom credit card checkout logo
add_filter( 'woocommerce_gateway_icon', 'custom_woocommerce_payments_icon', 10, 2 );

function custom_woocommerce_payments_icon( $icon, $gateway_id ) {
    if ( 'woocommerce_payments' === $gateway_id ) {
        $custom_icon_url = 'https://yoursiteurl.com/wp-content/uploads/2024/10/visa-mastercard-american-express.png'; 

        $icon = '<img src="' . esc_url( $custom_icon_url ) . '" alt="Visa Mastercard Amex JCB Payments" />';
    }
    
    return $icon;
}

Most popular articles:

How To Remove Product Attributes (Variations) From Woocommerce Emails. How to add Flash Sale to Woocommerce site without plugins – Kadence theme How to fix the double-click problem when navigating to the reviews tab in WooCommerce Add Purchased Products Column to WooCommerce Orders