Cómo personalizar página de pago en WooCommerce
Cómo personalizar página de pago en WooCommerce

Portada: Shutterstock por yelosmiley

Tiempo de lectura:

Cómo personalizar la página de pago en WooCommerce

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

16 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

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