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
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:
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.
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.
Code goes in function.php file of your active child theme (or active theme). Tested and works.