Cambiar el botón Pagar con la imagen al finalizar la compra según el método de pago elegido por Woocommerce

1 minuto de lectura

avatar de usuario
dom

A través de esta función puedo cambiar el texto en el botón de pago. Me gustaría insertar una imagen pequeña en su lugar.

add_filter( 'woocommerce_available_payment_gateways', 'woocommerce_available_payment_gateways' );
function woocommerce_available_payment_gateways( $available_gateways ) {
    if (! is_checkout() ) return $available_gateways;  // stop doing anything if we're not on checkout page.
    if (array_key_exists('paypal_express',$available_gateways)) {
        // Gateway ID for Paypal is 'paypal'. 
         $available_gateways['paypal_express']->order_button_text = __( 'PAY', 'woocommerce' );

    }
    return $available_gateways;
}

¡Gracias de antemano por la ayuda!

Como en la interfaz, el texto del botón se cambiará usando .text() función de jQuery, agregar html como la etiqueta img no funcionará aquí.

En su lugar, le sugiero que use javascript con jQuery. Debería ser algo como esto:

$( document.body ).on( 'payment_method_selected', function(){
    var selectedPaymentMethod = $( '.woocommerce-checkout input[name="payment_method"]:checked' ).attr( 'id' );
    $( '#place_order' ).find('.payment-icon');
    $( '#place_order' ).prepend('<span class="payment-icon '+ selectedPaymentMethod +'"></span>'); // or any element like from font-awesome.
});
$( document.body ).trigger( 'payment_method_selected' ); // this will trigger on page load, act as initialize the icon.

La secuencia de comandos anterior agregará un span etiqueta con clases payment-icon y un ID del método de pago seleccionado. Luego puede usar css para agregar su ícono como fondo en este lapso.

  • Gracias Señor. Reigel. Entendí como funciona la función y las variables, pero no he entendido como insertarlas o integrarlas en mi función, gracias de nuevo por la ayuda…

    – Dom

    13 de febrero de 2020 a las 15:55

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad