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

29 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

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Para cumplir con el nuevo RGPD y que tus datos estén a salvo, debes leer y aceptar mi política de privacidad. Tus datos serán guardados en SiteGround y WordPress, mi proveedor de hosting y el CMS que utilizo en esta web.

¬Ņ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