How to change logo of payment option in WooCommerce / WooCommerce PayPal Payments plugin

user_4329847 0
Viewed 766

I have a plugin called WooCommerce PayPal Payments which allows PayPal payments in WooCommerce. With this plugin, they also have an option for credit card payments. See below:

enter image description here

All of this renders the following on the front end:

enter image description here

Now, I'm trying to change the AMEX logo to a custom logo.

I've seen many articles which show how to change the PayPal logo, such as this one, but haven't seen any that mention how to change the AMEX, MasterCard or other logo.

For example, I've used this hook to change the PayPal logo:

add_filter( 'woocommerce_gateway_icon', 'remove_what_is_paypal', 10, 2 );

function remove_what_is_paypal( $icon_html, $gateway_id ) {
  if( 'paypal' == $gateway_id ) {
    $paypal_logo = get_template_directory_uri()."/assets/build/vectors/paypal-logo-original.svg";
    $icon_html = "<img class='checkoutPage__paypal' src=".$paypal_logo."' alt='PayPal logo'>";
  }
  return $icon_html;
}

How do I change the AMEX logo?

hook-woocommerce woocommerce wordpress paypal php
3 Answers
add_filter('clean_url', 'custom_clean_url', 10, 3);

function custom_clean_url($good_protocol_url, $original_url, $_context) {


    if (strpos($good_protocol_url, 'assets/images/amex.svg') !== false) {
        return 'https://woocommerce.com/wp-content/plugins/woocommerce-payments/assets/images/cards/amex.svg';
    }
    return $good_protocol_url;
}

Change the return URL as per the requirement.

There is no filter in the plugin to the cards array to change the icon for individuals. AFAIK this is the only hook that can be used in this situation.

user_11173680 
add_filter( 'woocommerce_gateway_icon', 'custom_payment_gateway_icons', 10, 2 );
function custom_payment_gateway_icons( $icon, $gateway_id ){

    foreach( WC()->payment_gateways->get_available_payment_gateways() as $gateway )
        if( $gateway->id == $gateway_id ){
            $title = $gateway->get_title();
            break;
        }

    // The path (subfolder name(s) in the active theme)
    $path = get_stylesheet_directory_uri(). '/assets';

    // Setting (or not) a custom icon to the payment IDs
    
    if($gateway_id == 'paypal_payment_id')
        $icon = '<img src="' . WC_HTTPS::force_https_url( "https://website.com/logo.png" ) . '" alt="' . esc_attr( $title ) . '" />';
    

    return $icon;
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

user_184814950

Since there is not, apparently, a filter for altering this gateway's html, or specifically the credit card icons, you might have to resort to a CSS kludge.

You could use the following code to hide or cover the AMEX image, and replace it with the same image as pseudo-element background. Replacing it with some different image would be as simple as replacing the background-image url with the one you want to use:

/** CSS KLUDGE VS WOOCOMMERCE PAYPAL PAYMENTS CREDIT CARD ICONS **/
#payment .payment_methods .payment_method_ppcp-credit-card-gateway {
     position: relative;
}
#payment .payment_methods .payment_method_ppcp-credit-card-gateway:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 205px;    
    height: 22px;
    width: 35px;
    background-size: cover;
    /* replace URL here */
    background-image: url(/wp-content/plugins/woocommerce-paypal-payments/modules/ppcp-wc-gateway/assets/images/amex.svg);
}
#payment .payment_methods .payment_method_ppcp-credit-card-gateway img[title="American Express"] { 
    display: none;
}

I'd wait to apply the last line, which may not even be necessary, until I'd finished making position and size nudges to get the new image looking just right. Naturally, you'd want to double check against unique theme characteristics and for responsiveness, but anyway there's the concept.

user_36924430
Related