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

Autor: Max Camu√Īas

Fecha: 11/05/2020
Cómo personalizar 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.

Portada: compra en línea / Shutterstock

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 c√≥mo personalizar la pagina de pago en WooCommerce para que puedas adaptarla a tu negocio, a√Īadiendo y eliminando campos seg√ļn tus necesidades.
Author
Publisher Name
Max Camu√Īas
Publisher Logo

4 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

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.

Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

Soy Max Camu√Īas y te doy la bienvenida a mi blog (mi casa).

Por aquí hablo sobre los temas que me apasionan: WordPress, Marketing, Social Media o Blogging.

Me encanta ayudar a otras empresas a marcas a crear el dise√Īo de su web desde cero.

¬°M√ĀS SOBRE M√ć!

masterclass
C√ďMO PLANIFICAR TU P√ĀGINA WEB PARA QUE TU NEGOCIO BRILLE
¬°accede gratis!