11 May 2020
32 comentariosSi en entradas anteriores te explicaba cómo configurar WooCommerce para vender tus productos y cómo crear una tienda online en WordPress desde cero, hoy te enseñaré como personalizar la pagina de pago en WooCommerce para que puedas adaptarla a tu negocio.
Ya sabes que, si tienes un ecommerce, dispones de unas páginas (carrito, pago, mi cuenta) que puedes personalizar según tus necesidades.
Página de pago o checkout de WooCommerce
La página de pago o checkout que trae WooCommerce por defecto incluye una serie de campos que pueden ser modificados.
En ese sentido, puedes eliminar o añadir otros según las necesidades de tu negocio.
Veamos cómo es la página de pago en WooCommerce por defecto:
Por lo tanto, los campos que incluye de serie la página de pago o checkout de WooCommerce son:
- Nombre.
- Apellidos.
- Nombre de la empresa (opcional).
- País / Región.
- Dirección de la calle.
- Apartamento, habitación, urbanización... (opcional).
- Código postal.
- Localidad / ciudad.
- Provincia.
- Teléfono.
- Email.
- Notas de pedido (opcional) en la columna derecha.
Como ves, es una gran cantidad de campos que en algunos casos puedes no necesitar. Por ejemplo, en DiviFast, web en la que vendo plantillas para Divi como archivos digitales y descargables, no necesito campos como el teléfono o la dirección física del cliente.
Por lo tanto, el objetivo es simplificar al máximo el proceso de compra en tu tienda online para aumentar el número de conversiones.
Plugin para modificar la página de pago en WooCommerce
El plugin que utilizo en mis tiendas online para modificar la página de pago en WooCommerce es Checkout Manager for WooCommerce, que dispone de una versión gratuita y otra premium con mayor número de funcionalidades.
Te voy a explicar cómo funciona la versión gratuita, con la que puedes modificar los campos de tu página de pago según el tipo de negocio que tengas.
Lo que te permite hacer este plugin es:
- Reordenar los campos.
- Renombrar y resaltar los que necesites.
- Ocultar o ampliar los campos de pago en las secciones de facturación, envío y adicionales.
¿Cómo funciona el plugin Checkout Manager for WooCommerce?
Una vez lo has instalado y activado, vas a los ajustes de WooComerce y verás una nueva pestaña que por defecto no aparece: finalizar compra:
En esta primera pestaña general, puedes configurar lo siguiente:
- Forzar dirección de envío si quieres mostrar los campos de envío al finalizar la compra.
- Forzar la creación de una cuenta para que tus clientes tengan que registrarse a la hora de comprar.
- Quitar las notas del pedido en el caso de que no las necesites. Si es un producto cerrado, te recomiendo desactivarlas.
- Añadir una etiqueta en las notas del pedido.
- Añadir un mensaje personalizado antes y después de finalizar compra.
En la siguiente pestaña dentro de las opciones (facturación) es donde encontrarás la principal funcionalidad del plugin y donde podrás modificar los campos de tu página de pago.
Las opciones que te da Checkout Manager for WooCommerce son las siguientes:
- Añadir campos nuevos.
- Ocultar los que no necesitas.
- Elegir el tamaño de cada campo y donde quieres que se muestre: ancho completo, izquierda o derecha.
- Elegir el tipo de campo: texto, país, teléfono, email, etc.
- Modificar el nombre del campo y el texto interior (placeholder).
Solo tienes que desactivar los campos que no necesites y colocarlos a tu gusto, tanto en orden como en una u otra columna.
Y así puedes modificar cada campo de tu página de pago en WooCommerce:
Si vendes productos físicos en tu tienda online y realizas envíos al domicilio del cliente, también puedes modificar y personalizar según tus necesidades los campos de envío:
Antes de terminar, quiero enseñarte el resultado de la página de pago de DiviFast aplicando los ajustes que has podido ver en las capturas anteriores. Recuerda que, en este caso, no se aplica la parte de envíos, ya que se trata de productos digitales.
He simplificado al máximo el proceso de pago reduciendo el número de campos y, cuando el cliente añade un producto al carrito y va a pagar, únicamente tiene que rellenar su nombre, apellido y correo.
Recuerda que, en cualquier formulario, a menor número de campos, mayor índice de conversión.
Hasta aquí este sencillo tutorial en el que te explico cómo modificar y personalizar la pagina de pago de tu tienda online con el plugin Checkout Manager for WooCommerce para que puedas adaptarla a tu negocio, añadiendo y eliminando campos según tus necesidades.
Excelente recomendación Max.
Hace unas semanas había querido mejorar la página de pago en un sitio web, y siento que el plugin que recomiendas va ayudar mucho.
Y con las imágenes que pusiste, me di una mejor idea de que esperar, ahora solo quede pasar a la acción.
¿De casualidad sabes de alguna forma de integrar Woocommerce con autorespondedores?
¡Gracias por el tutorial!
Hola Ricardo,
¿Te refieres a integrar a los clientes de un ecommerce con una plataforma de email marketing para luego mandarles ofertas, novedades, etc, vía newsletter?
Hola Max,
Si efectivamente. ¿Habra alguno que me recomiendes que funcione con WooCommerce?
Hola Ricardo,
Yo trabajo con Mailerlite desde hace un par de años y estoy muy satisfecho. Además, dispone de un plugin para WordPress que hace esta integración entre WooCommerce y su plataforma para guardar los suscriptores.
Y sin los datos de facturación mínimos cumples con la ley a la hora de entregar la factura de compra?
Hola Roger,
Así es. Factura simplificada que se genera automáticamente para todos los clientes y factura ordinaria (completa) para que el cliente que la necesita y la solicita.
Saludos
Al que te lo solicita ya le pides los datos para la factura ordinaria, no?
¡Exacto, Roger!
Hola ¿Qué tal? Me fue de gran utilidad tu post.
Ahora el único problema que tengo es cómo cambiar "Detalles de facturación" por "Detalles del envío".
Soy nuevo en WordPress y no sé nada de programación y de verdad no sé cómo hacerlo.
¡Gracias por tu ayuda!
Hola, muy buena explicación muchas gracias.
Disculpa, sabes si hay forma de condicionar que aparezcan ciertos campos en el checkout de acuerdo al producto, ya que tengo digitales y físicos.
De antemano muchas gracias, saludos.
Hola Alex,
Creo que con la versión premium del plugin se puede, aunque no he llegado a probarla porque no la he necesitado.
Saludos
Hola utilicé el plugin y el problema es que luego de ingresar todos los datos del cliente, en la parte de pago me sale: No hay opciones de métodos de envío disponibles. Por favor, asegúrate de que has introducido correctamente tu dirección, o contáctanos si necesitas ayuda.
Si desactivo el plugin todo vuelve a la normalidad y funciona bien pero no puedo editar los campos
Hola Guido,
¿Tienes configuradas en WooCommerce las clases y zonas de envío? (por lo que me dices entiendo que sí).
Supongo también que los campos de dirección no los ocultas con el plugin.
Sin verlo es muy difícil darte una respuesta.
Sorry!
Hola tengo una pregunta muy importante amigo!!!
Estoy trabajando en una pagina multivendedor y quisiera saber como puedo configurar o que plugin usar para que las zonas y las tarifas de envio las ponga la tienda desde su escritorio ya que en la configuración de woocomerce solo me permite a mi configurar las zonas y tarifas de envió y eso se aplica a todas la tiendas
pero no quiero eso ya que no seré yo quien envié los producto sino que cada tienda enviara su producto con la empresa que crea conveniente y por ende tendrán zonas de envió distintas y tarifas de envió distintas
me puedes ayudar por favor, espero tu respuesta
por cierto, me sirvió el post 🙂
Tengo un problema con las columnas del formulario de checkout, algo Ha pasado que se me han quedado muy estrechas y se me amontonan los textos. El formulario es ilegible.
¿Conoces algún plugin o la forma de solucionar esto?
Hola Maribel,
El plugin que uso y conozco es el que menciono en el post.
¡Lo siento!
¡Hola, Max!
¡Genial la explicación! Me gusta mucho cómo ha quedado la página tras los cambios, ¿cómo has conseguido cambiar el color azul por el naranja? ¿y cómo has hecho para que aparezca el pedido antes de los campos de facturación?
¡Mil gracias!
¡Hola, Marta!
Muchas gracias 🙂
El color azul lo he cambiado por el naranja estableciéndolo como principal desde Apariencia > Personalizar > Ajustes generales > Color de énfasis del tema.
Y el orden de los campos, lo puedes modificar con el plugin que menciono en el post.
Saludos
Hola Max. Muy bueno tu artículo. Quería tu ayuda. En este caso, necesito modificar el contenido del boton al final, cuando dice "realizar tu pedido".
Instalé el plugin pero no vi la opción.
Muchas gracias.
Genial Max! como siempre, un referente.
Una pregunta, ¿como se podría realizar un pedido, que te llegue dicho pedido por correo, pero sin realizar ningún pago?
Gracias Max!
¡Hola, Joan!
Pues nunca he hecho algo así, pero igual se puede hacer con un plugin específico. No sabría decirte.
Siento no poder ayudarte 🙁
Saludos
Gracias por responder Max!
¿Y si se hiciera simplemente con el tipo de pago Contra Reembolso? Al cliente le llegaría el listado del comprador, sin pago. ¿que te parece?
Por cierto, Muchas Felicidades por tu 10 Aniversario! espero que caigan muchos más ? Estaré atento a tu maratón de contenido, y demás, que seguro será, como siempre, muy interesante.
Gracias y saludos.
Pues no sabría decirte. Nunca he trabajo con el pago contra reembolso en un ecommmerce. De todas formas, si se te ha ocurrido la idea, sólo tienes que probarla y ver si funciona.
¡Muchas gracias!
Saludos
Hola Max,
Tengo el tema Divi, Woocommerce instalado, Woocommerce Checkout Manager también... y me estoy estrujando los sesos para ver cómo puedo darle un aspecto a la página finalizar compra que sea parecido a los formularios de divi.
Estoy andando por el camino equivocado? Cómo puedo conseguir que el aspecto de los campos de formulario de Woocommerce sea como los campos de formulario de Divi?
Me harías un gran favor.
Gracias de antemano.
Hola, Fran:
¿A qué te refieres exactamente con que los campos de WooCommerce sean igual que los de los formularios de Divi? ¿Al aspecto?
Me temo que eso tendrás que hacerlo con CSS.
Saludos
Sí, exacto. Me refiero al aspecto. Como se introduce el CSS y qué parámetros? Se hace con Woocommerce, Woocommerce Checkout Manager, desde Divi?
Entiendo que está información es parte de tu trabajo, te ganas la vida con estas cosas. Por ello si ves que tiene algún coste está información puedes contactar por privado y hablamos del asunto.
Gracias!
El CSS se añade en Divi, en las opciones del tema. Si necesitas ayuda, contáctame y lo vemos 🙂
Hola:
No soy demasiado experto en WordPress ni en WooCommerce. Me atrevo a cambiar algunas cositas y gracias a plugins como éste, me facilitan la vida.
Tengo montada la tienda con WooCommerce y tengo un problema: cuando se muestran las formas de pago, los botones no salen alineados con el texto de cada forma de pago y salen detrás. Querría que salieran delante. No me atrevo a tocar los ficheros PHP de WooCommerce de forma manual y no sé si con este plugin me permitirá modificar esto.
Hola, Fernando:
Este plugin te permite modificar el número y formato de los campos, pero no la alineación de lo botones de pago como tal. Supongo que eso tendrás que modificarlo con CSS.
Saludos
Hola Max, el plugging que comentas es muy útil. Pero tengo una pregunta en realación a la página de pago.
Hemos creado una web en la que queremos integrar ecommerce pero la plantilla que esocgimos parece ser que no tiene pagina de pago. ¿Sabes si hay alguna opción de integrar una página de pago sin tener que empezar de nuevo toda la web en otra plantilla?
Michas gracias, y enhorabuena por tu trabajo
Hola, Martina.
Las páginas de pago, carrito o cuenta no tienen porqué venir creadas con el tema. Tenéis que crearlas vosotros y asignarles los shortcodes correspondientes.
Saludos
Hola Max, tengo configurado un descuento por forma de pago, sin embargo al seleccionar otra forma de pago sin descuento lo mantiene, aunque cambies por ejemplo a reembolso sigue poniendo el descuento a menos que lo quites manualmente, lo cual el cliente no hace evidentemente y al final aplica un descuento que no debería ni corresponde a la forma de pago elegida. ¿Como puedo hacer para que lo desactive al seleccionar otra forma de pago?
Muchas gracias de antemano y un saludo