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

14 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

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.

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