0
432
ViewsCómo cambiar el logotipo de la opción de pago en el complemento WooCommerce / WooCommerce PayPal Payments
Tengo un complemento llamado WooCommerce PayPal Payments que permite pagos de PayPal en WooCommerce . Con este complemento, también tienen una opción para pagos credit card . Vea abajo:
Todo esto genera lo siguiente en el front-end:
Ahora, estoy tratando de cambiar el logo de AMEX a un logo personalizado.
He visto muchos artículos que muestran cómo cambiar el logo de PayPal , como este , pero no he visto ninguno que mencione cómo cambiar el logo de AMEX, MasterCard u otro.
Por ejemplo, he usado este gancho para cambiar el logo de 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; } ¿Cómo cambio el logo de AMEX ?
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; }Cambie la URL de retorno según el requisito.
No hay ningún filtro en el complemento de la matriz de tarjetas para cambiar el icono de las personas. AFAIK, este es el único gancho que se puede usar en esta situación.
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; }El código va en el archivo function.php de su tema secundario activo (o tema activo). Probado y funciona.
0
Dado que aparentemente no hay un filtro para alterar el html de esta puerta de enlace, o específicamente los íconos de tarjetas de crédito, es posible que deba recurrir a un error de CSS.
Puede usar el siguiente código para ocultar o cubrir la imagen AMEX y reemplazarla con la misma imagen que el fondo del pseudoelemento. Reemplazarlo con una imagen diferente sería tan simple como reemplazar la URL de la imagen de fondo con la que desea usar:
/** 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; }Esperaría para aplicar la última línea, que puede que ni siquiera sea necesaria, hasta que haya terminado de hacer cambios de posición y tamaño para que la nueva imagen se vea bien. Naturalmente, querrá verificar dos veces las características únicas del tema y la capacidad de respuesta, pero de todos modos, ahí está el concepto.