CĆ³mo personalizar pĆ”gina de pago en WooCommerce
CĆ³mo personalizar pĆ”gina de pago en WooCommerce

CĆ³mo personalizar la pĆ”gina de pago en WooCommerce

11/05/2020

Shutterstock yelosmiley

11/05/2020
Tiempo lectura:

Shutterstock yelosmiley

Si 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:

Personalizar pƔgina de pago o checkout de WooCommerce

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


Personalizar pƔgina de pago o checkout de WooCommerce: plugin Checkout Manager for 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:

  1. Reordenar los campos.
  2. Renombrar y resaltar los que necesites.
  3. 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:

CĆ³mo funciona el plugin Checkout Manager for WooCommerce

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.

CĆ³mo funciona el plugin Checkout Manager for WooCommerce

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:

CĆ³mo funciona el plugin Checkout Manager for 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:

CĆ³mo funciona el plugin Checkout Manager for WooCommerce

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.

Personalizar pƔgina de pago o checkout de WooCommerce

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.

Summary
šŸ›’ CĆ³mo personalizar la pĆ”gina de pago en WooCommerce
Article Name
šŸ›’ CĆ³mo personalizar la pĆ”gina de pago en WooCommerce
Description
Aprende a personalizar la pagina de pago en WooCommerce para adaptarla a tu negocio, aƱadiendo y eliminando campos segĆŗn tus necesidades.
Author
Publisher Name
Max CamuƱas
Publisher Logo

32 Comentarios

  1. Ricardo de la Rosa

    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!

    Responder
    • Max CamuƱas

      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?

      Responder
      • Ricardo de la Rosa

        Hola Max,

        Si efectivamente. ĀæHabra alguno que me recomiendes que funcione con WooCommerce?

        Responder
        • Max CamuƱas

          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.

          Responder
      • Roger

        Y sin los datos de facturaciĆ³n mĆ­nimos cumples con la ley a la hora de entregar la factura de compra?

        Responder
        • Max CamuƱas

          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

          Responder
          • Roger

            Al que te lo solicita ya le pides los datos para la factura ordinaria, no?

  2. Ivan

    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!

    Responder
  3. Alex

    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.

    Responder
    • Max CamuƱas

      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

      Responder
  4. Guido

    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

    Responder
    • Max CamuƱas

      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!

      Responder
  5. Erick Omar Sanchez

    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 šŸ™‚

    Responder
  6. Maribel

    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?

    Responder
    • Max CamuƱas

      Hola Maribel,

      El plugin que uso y conozco es el que menciono en el post.

      Ā”Lo siento!

      Responder
  7. Marta

    Ā”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!

    Responder
    • Max CamuƱas

      Ā”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

      Responder
  8. MarĆ­a Salas

    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.

    Responder
  9. Joan Q

    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!

    Responder
    • Max CamuƱas

      Ā”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

      Responder
      • Joan Q

        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.

        Responder
        • Max CamuƱas

          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

          Responder
  10. Fran Bravo

    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.

    Responder
    • Max CamuƱas

      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

      Responder
      • Fran Bravo

        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!

        Responder
  11. Fernando GarcĆ­a Iglesias

    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.

    Responder
    • Max CamuƱas

      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

      Responder
  12. Martina

    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

    Responder
    • Max CamuƱas

      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

      Responder
  13. Marco

    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

    Responder

Enviar un comentario

Tu direcciĆ³n de correo electrĆ³nico no serĆ” publicada. Los campos obligatorios estĆ”n marcados con *

[InformaciĆ³n BĆ”sica sobre ProtecciĆ³n de Datos] Responsable: MĆ”ximo CamuƱas FernĆ”ndez. Finalidad: moderar y responder comentarios. LegitimaciĆ³n: Consentimiento. Destinatarios: No se ceden a terceros. Se pueden producir transferencias. Derechos: PodrĆ”s ejercer tus derechos de acceso, rectificaciĆ³n, limitaciĆ³n y suprimir los datos en info@maxcf.es asĆ­ como el derecho a presentar una reclamaciĆ³n ante una autoridad de control. InformaciĆ³n adicional: en mi polĆ­tica de privacidad encontrarĆ”s informaciĆ³n adicional sobre la recopilaciĆ³n y el uso de su informaciĆ³n personal ,incluida informaciĆ³n sobre acceso, conservaciĆ³n, rectificaciĆ³n, eliminaciĆ³n, seguridad, y otros temas.

ĀæNecesitas una pĆ”gina web, blog, landing o tienda online?
Ā”PIDE TU
PRESUPUESTO!

DiseƱa
tu web

DiseƱa
tu imagen

Impulsa
tu proyecto

Optimiza
y posiciona

masterclass

10 CLAVES PARA QUE TU WEB BRILLE CON LUZ PROPIA

MASTERCLASS: 10 claves para que tu web brille con luz propia

guĆ­a

PARA DISEƑAR LOGOTIPOS MEMORABLES

GUƍA para diseƱar logotipos memorables