0
312
ViewsHow to change logo of payment option in WooCommerce / WooCommerce PayPal Payments plugin
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:
All of this renders the following on the front end:
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?
3 answers
Answer question0
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.
0
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.
0
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.