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.
¿Estás construyendo tu tienda online o eres implementador WordPress?
¿Necesitas plugins de calidad y con soporte para implementar funcionalidades concretas?
Consigue todos los plugins a la venta en la sección de plugins de esta web y todos los que siga añadiendo. Acceso a los 96 plugins (y subiendo) con soporte directo del desarrollador, actualizaciones y uso ilimitado: úsalos en tantas webs como lo necesites.
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 '
';
return $contenido;
}, 10, 2);
';
return $contenido;
}, 10, 2);
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 '
';
return $contenido;
}, 10, 2);
';
return $contenido;
}, 10, 2);
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.
Buenas tardes
En primer lugar agradezco que compartas estos tutoriales que son muy interesantes. He seguido los pasos que indicas para eliminar el texto de Que es PayPal? y lo he conseguido sin ningún problema. Ahora cuando quiero insertar la imagen de mi banco para las transferencias bancarias no me lo toma. Yo subí un logo de mi banco a la biblioteca de medios y luego inserte el código que indicas en mi archivo functions.php de mi tema y coloque la dirección que aparece en el logo de la biblioteca de medios y lo que me aparece es la imagen de las tarjetas de crédito. No sé que puede pasar.
Hola Ariel
Repasa bien el código, en especial el condicional, que para la transferencia bancaria debería ser if (‘bacs’ == $id), y comprueba que fuera de ese condicional estás haciendo el return.
Un saludo
Hola Enrique;
Otra vez por aquí aprendiendo!
¿Es posible activar un método de pago exclusivamente para un determinado usuario? Me gustaría activar el pago contra reembolso a los usuarios profesionales que tienen su tienda física.
Gracias!
Hola de nuevo 🙂
Sí, el megaplugin Booster for WooCommerce te permite filtrar pasarelas en función del rol de usuario. Si sólo lo quieres para un usuario en particular puedes establecer un rol específico para él con las mismas capacidades que el rol customer.
Un saludo.
¡Genial!
Ahora me han quedado los iconitos de los métodos de pago niquelaos 😀
Muchas gracias por compartir estas cosas, Enrique.
Me alegra que te haya sido útil, Rafa 🙂
Un saludo.
¡Hola Enrique! Muchas gracias por este material tan útil. Te hago una consulta, por favor: yo ofrezco servicios de asesoría, muy personalizados, y lo que necesitaría hacer es:
-enviar un presupuesto al cliente para un determinado servicio (lo ideal sería enviárselo desde mi misma web)
-ese presupuesto debería tener un link para que, si la persona acepta el presupuesto, sea dirigida a la pasarela de pago, y allí se encuentre con el monto exacto que deberá pagar.
¿Se puede hacer eso? Mil gracias desde ya.
Hola Alejandra
El presupuesto lo puedes automatizar con Gravity Forms, a lo mejor este artículo puede ayudarte. En cuanto a crear un enlace con el pago, si éste es mediante RedSys puede servirte este plugin.
Un saludo.
Gracias. Me ha sido muy útil.
Es posible configurar pagos por paypal en cuotas ?
Hola Agustín
Sí, echa un vistazo a esta entrada, te será de ayuda.
Un saludo.
Hola, como agrego Otros metodos de pago, creados por mi? por ejemplo, Pago en Efectivo, RapiPago, etc etc
Hola Matías
Puedes habilitar métodos de pago adicionales por medio de plugins.
Un saludo.
Hola Enrique.
Que Plugin podemos utilizar para agregar pagos adicionales personalizados, como giros de dinero y cosas así.
Gracias.
Hola Camilo
Pero es que el plugin depende de la pasarela que quieras implementar. Aquí tienes montones de ellos.
Un saludo.
Hola a todos,
Tengo una tienda con WCommcerce y quiero definir en el método de pago: que por transferencia exista un campo que me permita indicar el código de la transferencia realizada y que esto me lo solicite en la página de Checkout. ¿Hay algún complemento o plugin que haga esto?
Gracias
Buenas tardes
Un artículo estupendo pero al que llego después de más de un año.
La duda que me queda es la siguiente. Usamos stripe en nuestra web con woocommerce y nos gustaría saber si es posible desactivar la opción del pago con American Express. No sé si podrías aclararnos esta duda porque desde stripe nos remiten a woocommerce pero no encontramos la forma.
Muchas gracias por tus aportaciones
Hola Ignacio
No, las tarjetas aceptadas dependen de la pasarela (en este caso Stripe), no de WooCommerce.
Un saludo
Hola, ¿.este código sigue funcionando para la nueva versión de woocommerce?
Pongo lo siguiente y me dice que está correcto pero no aparece la imagen en finalizar compra (No tengo mucha idea de código):
add_filter (‘woocommerce_redsys_icon’, function ($contenido, $id) {
if (‘redsys’ == $id)
return »;
return $contenido;
}, 10, 2);
No sale el código completo en el comentario:
add_filter (‘woocommerce_redsys_icon’, function ($contenido, $id) {
if (‘redsys’ == $id)
return »;
return $contenido;
}, 10, 2);
Hola Marta
Le estás haciendo un return vacío, así no sale nada, tienes que enviar de retorno el valor que quieres que se muestre. Fíjate en los ejemplos que he puesto.
Un saludo.
Hola Enrique, para poner los logos de las tarjetas puse ‘woocomerce_redsys_icon’,
donde tienes que poner la dirección web puse: ***************
y donde pone bacs puse ‘redsys’ y no sale la imagen. ¿Tengo que cambiar algo más?
Gracias por tu ayuda
Hola Marta
Te falta una ‘m’ en ‘woocommerce’, mira a ver si es eso.
Un saludo
No es eso, estaba bien escrito. No se que puede ser.
Ya lo he logrado. Tenía que poner gateway. Gracias por su ayuda
hola Enrique, puedo modificar el texto «IBAN» y «BIC / swift» en la sección transferencia bancaria? (al ser de chile debo tener otros datos y nombres), saludos!
Hola Víctor
Sí, puedes cambiarlos fácilmente con Loco Translate, tal como explico en esta entrada.
Un saludo.
Hola
Hay alguna forma para ocultar o desocultar los campos según el método de pago que el cliente elija
Hola Javier
Actualmente no conozco ningún plugin que permita hacerlo.
Un saludo
Hola y con algun codigo hook personalizado?
Hola Enrique, estoy liado con ésto ya que en las nuevas versiones de woocommerce no aparece el ID de la pasarela, estoy usando payU Latam y se necesita cambiar el logo nativo por el de las tarjetas VISA y MasterCard
Hola cpavaan
Entra en los ajustes de la pasarela y fíjate en la URL, lo que pone a continuación de §ion= es el ID de esa pasarela.
Un saludo
Muy buenas. Muchas gracias por todo el asesoramiento que das en la web, sencillamente MARAVILLOSO.
Tengo una empresa con varias sedes, y quiero utilizar 2 TPV’s de Redsys. Según el producto, se pagará con un TPV o con otro. ¿Es posible hacer esto? Muchas gracias de antemano 😉
Hola Adrian
Para eso necesitarás usar dos plugins de pasarela Redsys diferentes, y un plugin que gestione los métodos de pago en función de la pasarela, como éste
Un saludo
Hola Enrique, gracias por tu aporte. Quiero usar pero no sé donde debo ingresar estas lineas de código por favor indicame como usar los hooks
Hola Thiago
Echa un vistazo a esto, te será de utilidad.
Un saludo
¡Fantástico! Rápido y sencillo 🙂 Ya le he dicho adiós al texto ¿Qué es Paypal? jejeje Muchas gracias Enrique.
Hola Enrique,
Gracias por las ayudas que siempre brindas.
Algún metodo de pago de pendiendo del producto?
Por ejemplo, 2 productos…
Uno pagar con Paypal
Otro pagar con Transferencia.
En su defecto el pago de productos según categorías.
Encontré este plugin pero crea conflicto en Site.
WooCommerce Product Payments
Gracias.
Hola Eduardo
Echa un vistazo a WooCommerce Conditional Shipping and Payments, puede servirte para lo que necesitas.
Un saludo
Muchas gracias, eres un crack
Hola Enrique,
Como puedo aplicar un descuento solo para las tarjetas (debito/credito) pertenecientes o emitidas por un banco especifico.
Hola Abner
Se puede hacer descuento por pasarela, pero dudo que se pueda discriminar en función del emisor de la tarjeta.
Un saludo,
Buen día estimado Enrique, gracias por compartir tus conocimientos
En mi caso, busco una opción de pago que permita el «pago deposito a banco» pero no automático, sino manual, en donde se le indique al cliente los datos de la cuenta por ejemplo el titular de la cuenta, y el numero de cuenta u otro dato opcional como el código interbancario, ademas un campo que permita identificar la operación , que el cliente pueda usar al momento de realizar el pago para poder identificar el pago mas fácilmente, esto ultimo ya existe en el actual pago opción de pago con transferencia bancaria. una vez vi esa opción en una pasarela, y ahora que quiero implementar mi propio woocommerce no la encuentro en Internet. La opción de pago que vi, ademas daba un plazo de tiempo de 12 horas para hacer el deposito, sino se realizaba el producto se liberaba del carrito. genial no?
Hola Enrique,
Yo tengo exactamente esta misma consulta.
¿Existe la opción?
Un saludo,
Hola Enrique,
Tengo un problema con el botón de Amazón Pay , la posición en la que aparece en la página de finalizar compra es arriba, talvez conoces alguna manera mediante shortcode a un widget para ubicar el botón en otro lado y así personalizar de mejor manera la página de finalizar compra? O en su defecto se puede crear un botón en la página oficial de amazon pay e integrarlo a woocommerce sin usar el plugin oficial para ello?
No sé si alguna vez te has encontrado con éste problema y si tienes alguna solución, agradezco de antemano tus comentarios.
Hola Pablo
Eso depende del plugin de pasarela que estés usando para implementar ese botón. Consúltalo directamente con el soporte de ese plugin, son quienes mejor te podrán ayudar.
Un saludo
Hola Enrique
Como puedo agregar mis propios metodos de pago sin usar pasarela.
Saludos
Hola Eleuterio
Es necesario realizar una integración mediante PHP entre la API de la plataforma y la de WooCommerce.
Buenos días Enrique,
Te escribo este mensaje para agradecerte todo el conocimiento que pones a nuestro alcance y para pedirte orientación en un pequeño problema que tengo.
Te explico mi situación, soy un estudiante de un certificado de profesionalidad que esta realizando sus practicas y me han encargado reparar ciertos defectos de una web, uno de ellos es que una vez realizado el pedido al pulsar para pagar con tarjeta de crédito me recarga la pagina y no salta a la pasarela de Redsys (utilizo el plugin 3.1.0 y Woocommerce 4.3.0), sin embargo ese mismo pedido puesto a pagar con Paypal funciona perfectamente.
He contactado con Redsys por si ellos podían orientarme pero por ahora solo he obtenido respuestas vagas y están estudiando el tema.
Conoces de alguna incompatibilidad o alguna situación igual? Podrías orientarme en que hooks o en que funciones podría echar un vistazo a ver si hay algún error?
He cogido esta pagina sin posibilidad de contactar con el anterior programador y voy a salto de mata, por lo que cualquier ayuda seria tremendamente bienvenida.
Muchas gracias por tu atención y por tu trabajo en el blog, que tanto me ha ayudado hasta ahora.
Un saludo.
Hola Agustín
Revisa la consola del navegador por si te marca algún error. De todos modos, quien realmente puede ayudarte es el soporte de Redsys.
Un saludo
Hola Enrique, gracias por la información, tengo una consulta, en la opción de Pago Contrareembolso, quisiera que al cliente le apareciera un formulario para que especifique si pagará con tarjeta o en efectivo. Adicionalmente, si fuera en efectivo, un formulario para especificar con cuanto dinero pagará (el importe del billete), esto por si es necesario llevar cambio al momento de dejarle el producto. ¿Hay algún pluggin con el que pueda hacer estas configuraciones o a nivel de código como lo haría? Saludos.
Hola Enrique,
Muy interesante el post. Ya he creado mi primer plugin y ha funcionado genial. Y entonces he pensado: pues como es tan fácil seguro que puedo crear otro para modificar el texto del botón de transferencia bancaria y el de pago con stripe, que al activarlos sale en los dos «Place Order» en lugar de «Realizar transferencia» y «Pagar con targeta» por ejemplo. El de Pay Pal ya pone «Ir a Pay Pal» y ya me sirve…
Pero para eso necesito el código para introducirlo en el plugin y ahí es donde necesito tu ayuda. Y me surge una duda, ¿debo crear un plugin para cada cambio de texto o con el mismo ya me sirve?
Hola buenas tardes
Tengo un proyecto en wordpress y quería saber si es posible mostrar tipos de pagos según el tipo de producto, habra algun plugin o hook para hacerlo?
Hola Orlando
Echa un vistazo a WooCommerce Conditional Shipping and Payments, puede servirte para lo que necesitas.
Un saludo
Hola necesito un plugin que me permita tener 2 cuentas de paypal en una tienda, y que bajo una condicional (osea un botón) se active alguna de ellas; o en su defecto podría tener 2 checkout y redireccionar dependiendo en botón que elija?
Saludos
Hola Enrique, por algún motivo cuando instalo y activo Pluginception no me aparece la opción de crear nuevo plugin. Tienes idea a qué se puede deber?
Hola Fernando
Imposible saberlo así. Contacta con el soporte del propio plugin, son los que mejor te pueden ayudar.
Un saludo,
Hola Enrique,
En primer lugar, eres un crack y te doy las gracias por compartir con todos y de manera abierta tu conocimiento.
¿Sabrías decirnos cómo hacer para que, por ejemplo el método de pago PayPal se muestre en /finalizar-compra/order-pay/ (esto sucede dentro de Mi Cuenta, cuando entras en un pedido pendiente de pago) pero que no se muestre en /finalizar-compra/ (este se muestra en la parte pública cuando vas a finalizar la compra)?
Muchísimas gracias de antemano y recibe un saludo!
Hola Jose Antonio
Eso es preciso programarlo a medida usando el filtro woocommerce_available_payment_gateways de forma condicional.
Un saludo
Buenos días, te cuento que instale el plugin gratuito de PW WooCommerce Gift Cards para ver si me funcionaba bien, cree una tarjeta de regalo y cuando la persona va a canjear la tarjeta de regalo sale un error que dice:
Lo sentimos, el total mínimo de pedido permitido es 150000 al usar este método de pago.
me puedes ayudar a ver como soluciono esto. como con el descuento de la tarjeta queda en 0 el total a pagar, dice que tiene un total mínimo de pedido, pero yo no tengo ningún tope mínimo.
gracias
ya logre solucionarlo, era un metodo de pago de mi pais WOMPI, pero ya lo deje solo con mercado pago y funciono, gracias
Hola Juan Camilo, tengo el mismo error, pero yo utilizo Wompi, ese es el error?
Hola Enrique, hay una manera que el hook se coloque al finalizar el formulario del método de Pago
Ej:
Numero de tarjeta CVV Fecha
——AQUI IMAGEN DEL BANCO
Hola Enrique,
muy interesante el artículo, pero me surge una duda:
¿¿Hay alguna forma de configurar con código que el pago contrarembolso solo se pueda efectuar según donde vivas?. Por ejemplo que se pueda pagar a contrarembolso solo en la península pero para las Islas Canarias que no se pueda??
Gracias
un saludo
Hola Violet
Echa un vistazo a este plugin, es posible que te sirva para lo que necesitas.
Un saludo,
Hola Enrique, muchas gracias por tu post es muy interesante. Tengo una consulta por si puedes ayudarme, a la hora de finalizar la compra me sale por defecto pagar con PayPal con el puntito azul de estar seleccionado, me gustaría cambiarlo para que salga por defecto pagar con tarjeta de crédito que esta sin seleccionar. y que PayPal quede como opción por si quieres seleccionarlo para pagar.
Puse pago con tarjeta encima de PayPal pero nada no sale seleccionado por defecto.
Muchas gracias por tu ayuda
Hola Alberto
Si ya has hecho pruebas con ese usuario, aparece preseleccionado el último método de pago utilizado. Realiza una prueba en modo incógnito para comprobar qué método de pago se marca por defecto.
Un saludo
Hola Enrique, tengo el mismo problema. Instalé un plugin de método de pago por tarjeta y me queda seleccionado por defecto a la hora de realizar el checkout, quisiera dejar por defecto en pago en efectivo contra reembolso pero no he podido hacerlo. Existe alguna forma de hacer lo que necesito?
Muchas gracias por la información en tu sitio, me ha ayudado muchísimo para crear mi tienda virtual.
Hola Luis
Revisa la respuesta anterior. Ten en cuenta también que, por defecto, aparece seleccionado el método de pago que se haya establecido el primero en la página de ajustes (se pueden reordenar arrastrando y soltando).
Un saludo
Hola buenas tardes Enrique, Gracias por compartir tus conocimientos muy interesante y muy buenos. Te escribo a ver si existe una posibilidad de visualizar que método de pago a seleccionado el cliente de la lista de métodos. Es decir si el cliente da click en Transferencia directa me muestre un mensaje en una variable php que diga (bacs), pero si selecciono pagar con paypal diga (paypal) o si selecciono otro método diga ya sea (cheque) o (cod) según sea el caso…
pero que esto lo muestre en otra seccion debajo del payment y esa variable se pueda usar para otro mensaje o condicional…
Gracias…
Hola Henrique, muchas gracias por compartir tu sabiduría. Necesito que me digas como puedo hacer para cambiar el tamaño del logo del plugin de Cecabank.
En WooCommerce > Ajustes > Finalizar compra, no aparece el id de la pasarela. Podrías ayudarme a poner el filtro para este caso.
Gracias
Hola Pere
El ID de la pasarela puedes verla en la URL cuando entras en la configuración de la propia pasarela.
Un saludo