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

Question

我有一个名为 的插件WooCommerce PayPal Payments，允许PayPal以WooCommerce. 有了这个插件，他们还可以选择credit card付款。见下文：

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

现在，我正在尝试将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;
}

如何更改AMEX徽标？

Answer 1

显然，由于没有用于更改此网关的 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;
}

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