Seguimos adelante con nuestra personalización total de WooCommerce, y de nuevo llegamos al checkout. Porque hay más cosas que personalizar en el checkout de WooCommerce aparte de los datos que se solicitan al usuario. Por ejemplo, los métodos de pago.
Si quieres cambiar los logotipos de las tarjetas que se muestran, poner el logotipo de tu banco a la opción de pago por transferencia o quitar el molesto enlace ¿Qué es PayPal?, ¡también puedes hacerlo! ¿Por qué no? Vamos a ver cómo.
Tabla de contenidos
El identificador de los métodos de pago
Antes de nada, aviso a navegantes: no hay un plugin para ello, o yo no lo conozco. Quizá lo haga yo mismo antes o después y lo cuelgue en la sección de plugins, pero de momento no lo hay.
Eso quiere decir que vamos a tocar código, pero no te asustes: va a ser muy facilito y el código para las operaciones más habituales (quitar el enlace ¿Qué es PayPal? o cambiar los logotipos de las tarjetas de crédito) te lo doy hecho.
Así que manos a la obra. Vamos, por supuesto, a utilizar algunos hooks de WooCommerce. Normalmente usaremos el hook woocommerce_gateway_icon, aunque hay alguno más específico, como woocommerce_paypal_icon. Pero antes, tenemos saber cuál es el identificador que usa WooCommerce para reconocer el método de pago que deseamos modificar.
Los habituales posiblemente ya los conocerás, aquí tienes una lista:
- Transferencia bancaria directa: ‘bacs’
- Contra reembolso: ‘cod’
- Pago con cheque: ‘cheque’
- PayPal: ‘paypal’
- PayPal Express: ‘ppec_paypal’
- Stripe: ‘stripe’
- RedSys: ‘redsys’
¿Y si el que quieres personalizar no está en la lista y no conoces su identificador? Fácil, sólo tienes que ir a WooCommerce > Ajustes > Finalizar compra y bajar hasta la tabla de pasarelas disponibles y habilitadas, en ella verás una columna con el identificador de cada una de las pasarelas de pago de tu tienda:
Así de fácil. ¿Tienes ya localizado el que quieres personalizar? Pues vamos allá.
Personalizar los métodos de pago en el checkout
Por si andas un poco despistado: vamos a personalizar lo que sale a continuación del nombre del método de pago en el checkout de WooCommerce. Si lo que quieres es cambiar simplemente el nombre o la descripción no necesitas hacer nada, simplemente basta con ir a WooCommerce > Ajustes > Finalizar compra y, en la pasarela de pago que sea, cambiar los campos Título y/o Descripción.
Bueno, si sigues aquí es porque lo que quieres personalizar va un poco más allá de eso y ya has visto que no es tan fácil como editar una opción. Aunque casi. Decía por ahí arriba que vamos a usar el hook woocommerce_gateway_icon, pero ése es un filtro común a todas las pasarelas de pago, así que vamos a tener que asegurarnos de que sólo actuamos sobre la que queremos actuar.
¿Y cómo hacemos eso? Pues este filtro recibe dos variables: la primera es el contenido que WooCommerce ya le ha puesto y que vamos a filtrar (los iconos por defecto, el enlace de ¿Qué es PayPal?, etcétera) y el otro es el identificador de la pasarela.
Pues bien, nosotros tenemos que comprobar con un condicional que se trata de nuestra pasarela antes de actuar sobre ella, y dejaremos pasar las demás. Un ejemplo:
add_filter ('woocommerce_gateway_icon', function ($contenido, $id) {
if ('paypal' == $id)
return 'loquesea';
return $contenido;
}, 10, 2);
No te olvides nunca del último return, o dejarás al resto de pasarelas sin sus logotipos.
Si todo esto te suena a chino no te preocupes porque vamos a ver tres ejemplos muy típicos con el código exacto. Con esos códigos ya sabes lo que tienes que hacer, porque lo he explicado varias veces. Por ejemplo aquí:
Añadir el logotipo de tu banco a la opción de transferencia bancaria directa
Y es que un buen logotipo de un banco siempre transmite seguridad, ¿verdad? Sinceramente, creo que WooCommerce podría incluir la opción de personalizar esto en algún lugar de la pantalla de opciones en WooCommerce > Ajustes > Finalizar compra > Transferencia bancaria. Pero ya que no lo incluye, lo haremos nosotros mismos.
Bien, el código es realmente sencillo:
add_filter ('woocommerce_gateway_icon', function ($contenido, $id) {
if ('bacs' == $id)
return '
Y listo. No hay ni que preocuparse de aplicar clases CSS, porque los estilos se aplican sobre #payment .payment_methods li img, que ya viene dado por el código.
Cambiar el logotipo de las tarjetas o de PayPal
Seguro que viendo ese ejemplo ya sabrás cómo hacer para cambiar el logotipo a la pasarela de la tarjeta de crédito o a PayPal. De hecho, es exactamente igual, simplemente cambiando bacs por el identificador de la pasarela correspondiente.
Sin embargo hago un inciso porque aquí hay una alternativa en el caso de PayPal, y es que el icono de esta pasarela tiene su propio filtro, woocommerce_paypal_icon, que controla la URL de la imagen utilizada como logotipo como único argumento, así que podemos hacerlo como en el ejemplo anterior o bien de esta otra forma:
add_filter ('woocommerce_paypal_icon', function ($url) {
return 'http://tuweb.com/ruta/al/logotipo.jpg';
});
Como ves en este caso no hay que comprobar si se trata de nuestra pasarela ni hay que hacer un return fuera del condicional para el resto, puesto que este filtro se aplica única y exclusivamente al icono de PayPal, no a una pasarela de pago. Por eso lo que se retorna es una ruta, y no una etiqueta completa de contenido HTML.
Quitar el enlace ¿Qué es PayPal? en el checkout de WooCommerce
Este es otro clásico, y es que WooCommerce incluye, junto al título de la pasarela de PayPal, un enlace a la propia pasarela de pagos con el texto ¿Qué es PayPal?. ¡Con lo peligroso que un enlace saliente puede ser en el checkout! Así que no lo queremos ahí.
El método es el mismo que antes: filtrar el contenido de PayPal y devolver la imagen, pero no ese enlace, así que nada más fácil:
add_filter ('woocommerce_gateway_icon', function ($contenido, $id) {
if ('paypal' == $id)
return '
Y listo. Como ves, en esta ocasión no necesitas ni preocuparte de subir el logotipo de PayPal (a no ser que quieras cambiarlo por otra imagen) ya que está incluido en WooCommerce.
Conclusión
Y terminado. Como ves, gracias a los hooks WooCommerce, al igual que WordPress en general, nos permite un alto grado de personalización en prácticamente cualquier aspecto.
Si tú no te conformas con una plantilla estandarizada o algún plugin no se ajusta 100% a las funcionalidades que necesitas, no tienes más que utilizar el formulario de contacto y vemos las alternativas. Ya ves que todo en este CMS puede adaptarse a tus necesidades.