如何更改 WooCommerce / WooCommerce PayPal 付款插件中付款选项的徽标

Question

我有一个名为 WooCommerce PayPal Payments 的插件，它允许在 WooCommerce 中进行 PayPal 付款。有了这个插件，他们还可以选择信用卡付款。参见下文：

所有这些都会在前端呈现以下内容：

现在，我正在尝试更改 AMEX 徽标为自定义徽标。

我看过很多文章介绍如何更改 PayPal 徽标，比如这个，但没有看到任何提及如何更改 AMEX、MasterCard 或其他徽标的内容。

例如，我使用此挂钩来更改 PayPal 徽标：

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?

Answer 1

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;
}

根据要求更改返回 URL。

卡片数组插件中没有过滤器来更改个人的图标。 AFAIK 这是唯一可以在这种情况下使用的钩子。

Answer 2

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;
}

代码位于活动子主题（或活动主题）的 function.php 文件中。经过测试并有效。

Answer 3

显然，由于没有用于更改此网关的 html（尤其是信用卡图标）的过滤器，因此您可能不得不求助于 CSS 组合。

您可以使用以下代码隐藏或覆盖 AMEX 图像，并将其替换为与伪元素背景相同的图像。用一些不同的图像替换它就像将背景图像 url 替换为您想要使用的图像一样简单：

/** 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;
}

我会等待应用最后一行，这甚至可能没有必要，直到我完成位置和调整大小以使新图像看起来恰到好处。当然，您需要仔细检查独特的主题特征和响应能力，但无论如何都有这个概念。