Cómo debe ser la página de finalizar compra

LucusHost, el mejor hosting

¡Lo hemos conseguido! Después de hacer una buena ficha de producto y conseguir que el cliente añada el producto a la cesta de compra… Nos queda el checkout o página de compra, dónde muchos de nuestros posibles clientes abandonan la página.

Entonces nos planteamos las siguientes preguntas ¿Qué tipo de checkout tengo que hacer para que no la abandonen? ¿Algún tipo de estrategia? ¿Mejorar el diseño?… Quédate y descubrirás las bases para una buena página de compra.

Checkout en un paso

La más básica, si el cliente va a pagar y ve arriba «paso 1 de 3». Puff… El cliente al tener que hacer un esfuerzo por acabar su compra pensará: ¿De verdad necesito este producto? ¿Por qué necesitan tantos datos? Bueno lo hare luego que no tengo tiempo…

Cuántos menos clicks deba dar tu cliente para rellenar el formulario muchísimo mejor. Cada paso en el checkout es un paso más en tu embudo de ventas, en el que verás cómo van abandonando el barco en cada fase.

Pide solo los datos que necesites

Estudia bien que datos necesitas para que al cliente le llegue bien el envío, su correo para acciones de remarketing, teléfono y poco más. Cada dato extra puede hacer que el posible cliente abandone el carrito o pierda la confianza al pedirle datos que no sabe para que necesitas.

Si ya te ha comprado el cliente tienes que tener un campo de autocompletar para que no tenga que volver a poner tooooodos sus datos otra vez, pudiéndo acabar la compra en menos de un minuto.

Diseño sin sidebar

La sidebar, es la típica barra lateral que se coloca a izq o derecha. Normalmente la he visto en tiendas con el botón de finalizar compra y con un resumen. Esto resta conversión, debido a que cuando el comprador termina el formulario tiene que volver a subir para darle al botón de finalizar compra en la barra lateral.

Lo ideal es tenerlo todo limpio sin sidebar y reducir el ancho al checkout, unos 600px esta bien. De esta forma parecerá mas corto.

Gastos de envío

Cuántas veces te ha pasado que llegas a la página de compra y ves unos gastos de envío desorbitados o que no te habían avisado en la página de tienda que te cobraban envío. Esto volverá a hacer dudar al usuario y pensará que lo has engañado.

Así que menciona siempre tus gastos de envío en tu ficha de producto, dandole la confianza al cliente de que vas de frente y no se llevara la sorpresa.

Sellos de confianza

Seguramente tu tienda no sea conocida por casi nadie, así que ¿por qué tu posible cliente va a confiar en ti? Adjuntar en tu tienda sellos de portales de confianza, certificado de seguridad SSL o de las tarjetas de crédito proporcionaran la garantía de que la tienda va en serio.

En el caso de las opiniones/ reviews de tu tienda online, para dar la confianza de que son verdaderas tienes plataformas como Opiniones Verificadas o Revi. Además de que pagar este servicio al año te proporciona un enlace con mucha autoridad para el SEO.

Landing page

Esto es básicamente un página con un objetivo principal, en nuestro caso que rellene el formulario de compra y pague. Por lo que lo ideal sería quitar todas las distracciones posibles para que el cliente no salga, como por ejemplo el menú, redes sociales, etc.

Objetivo: Dejar el logo de nuestra tienda con el enlace a la home y nuestras ventajas competitivas en el header: Envío, garantías, sellos de confianza, pago seguro, etc

Que sea usable en teléfonos móviles

Cada día se compra más por el móvil que por el ordenador, Google lo sabe y prioriza esto ahora. Por lo que es fundamental que se vea bien, que sea fácil de clicar y rellenar. Prueba con una persona mayor que no use mucho internet a ver si podría hacerlo. Si puede, vas por buen camino.

¿Obligo a registrarse a mi cliente?

Depende de tu estrategia de marketing digital. Lo ideal es que el cliente esté registrado en la tienda, ya que así le podrás mandar correos con estrategias de retargeting, promociones, carritos abandonados, etc.

Yo no suelo recomendar que sea obligado que el cliente se registre, ya que se pueden perder muchas ventas por esto. Lo ideal es incentivar al comprador para que forme parte de nuestra tienda. ¿Cómo?

A través de obsequiarle con un cupón de descuento para su próxima compra, formar parte de un sistema de puntos de descuento(puntos por compra y registro), acceder a un sorteo…

premiar a los compradores con puntos de descuento

¿Cómo modificar el checkout en Woocommerce?

La acción más recomendada para dejar el checkout con estas estrategias es hacerlo mediante código, debido a que son cambios menores y tener tantos plugins para cada cosa ralentiza mucho la página.

Modificar sin plugin por CSS

Aquí os dejo uno estandar que vale para la mayoría de temas con los que trabajo. Si no te funciona contáctame y veré cómo ponerlo en tu tienda online.

.woocommerce .woocommerce-checkout .col2-set .col-1 {
    width: 100%;
}

.woocommerce .woocommerce-checkout .col2-set .col-2 {
    width: 100%;
}

.woocommerce-checkout .site-inner{
    margin: 0 auto;
    max-width: 60rem;
}
.woocommerce-checkout .wc_payment_methods li{
    list-style: none;
}
.woocommerce-checkout .checkout .col-2 h3#ship-to-different-address{
    float: none;
    margin-top: 2rem;
}
.woocommerce-checkout #customer_details{
    margin-bottom: 3rem;
}

Plugins para modificar el checkout woocommerce

No recomiendo usar plugin, pero el mejor que he encontrado para dejarlo a tu gusto e incluso añadir opciones como por ejemplo: ¿Desde dónde nos has conocido?, es Yith Woocommerce Checkout Manager. Es de pago pero puedes personalizar todo, hasta los mensajes de error!

Mejores plugins para un buen checkout woocommece

En el repositorio si no podéis gastaros nada tenéis Woocommerce Checkout Manager de Visser Labs que tiene todas las características para dejarlo como hemos mencionado.

Conclusiones de la página de finalizar pago

Si quieres cambios en tu tienda, ¡ve haciendo test A/B con tu página! Usa herramientas de mapas de calor o vídeos como Hotjar para ver que hacen tus clientes, pregúntales que se podría mejorar o qué les ha costado más al finalizar la compra.

Recuerda que necesitas añadir el campo de DNI/CIF en el checkout para cumplir la normativa.

¡No creas todo lo que has leído y pruébalo en tu tienda! Y ya sabes si quieres un cambio de checkout en tu tienda de Woocommerce no dudes en mirar mis servicios de desarrollo de tiendas online.

[ratings]

¡Haz clic para puntuar esta entrada!
(Votos: 5 Promedio: 3)
mailerlite diegol

Especialista en Comercio electrónico con Woocommerce. Te ayudo a crear, gestionar y publicitar tu Ecommerce en función de tu sector y público objetivo. Puedes encontrarme en Diegol.top

¿Necesitas ayuda con este tutorial? Mándame un correo y te resuelvo todas las dudas!


Ver servicios Curso de WooCommerce

También puedes realizar una donacion para seguir apoyando la salida de nuevos tutoriales y actualizaciones

mailerlite diegol

Reader Interactions

comentarios

  1. Christian Chandia says

    El «codigo ccs» que hace exacatamente en la pagina del check out, no me keda claro.,….y donde se inserta eso exacatamente en » divi» ???
    gracias !

    • Diegol says

      Hola Christian,

      Si usas Divi, es posible que el código no sea compatible ya que Divi usa sus propios estilos. Tendrás que adaptarlos si sabes las clases.

      Un saludo!

  2. Pedro says

    Hola Diego eres un fenómeno. No soy capaz de quitar la parte donde indica enviar a otra dirección, y no es que la quiera quitar, simplemente quiero que esté plegada y cuando la marque el cliente, se despliegue, ¿Cómo lo puedo hacer? ¿Haría falta código? ¿Tienes vídeo de cómo se hacen las modificaciones?
    Gracias, eres un crack

Deja una respuesta

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