Cómo personalizar la página de pago de WooCommerce (la forma fácil)

Durante nuestros años optimizando tiendas WooCommerce, hemos notado que la página de pago a menudo es el punto decisivo para las ventas.

Es donde los clientes completan su compra o abandonan su carrito, y pequeñas mejoras aquí pueden generar aumentos significativos de ingresos.

Habiendo ayudado a innumerables dueños de tiendas, entendemos la importancia de tener una página de pago que se ajuste perfectamente a las necesidades de tu negocio.

Ya sea que desees simplificar el proceso, agregar campos personalizados o reorganizar el diseño, existen formas sencillas de lograrlo.

En esta guía, compartiremos instrucciones paso a paso para personalizar tu página de pago de WooCommerce. Estas son técnicas probadas que hemos probado exhaustivamente, diseñadas para ayudarte a crear una mejor experiencia de pago manteniendo la confiabilidad de tu tienda.

¿Por qué personalizar la página de pago de WooCommerce en WordPress?

Los estudios muestran que los clientes abandonan entre el 70-85% de todos los carritos de compra. En otras palabras, la mayoría de los clientes abandonarán tu página de pago sin gastar dinero.

Con eso en mente, querrás hacer todo lo posible para convencer a los clientes de que completen su compra.

El problema es que el WooCommerce de pago integrado no está optimizado para las ventas.

Al reemplazar este diseño predeterminado con una página de pago personalizada de WooCommerce, a menudo puedes mejorar tus tasas de conversión y obtener más dinero.

Por ejemplo, podrías agregar prueba social a la página de pago, como reseñas de clientes y calificaciones de cinco estrellas. Esto puede animar a las personas a confiar en tu negocio, incluso si no te han comprado antes.

También puedes mostrar productos relacionados que los compradores suelen adquirir juntos y optimizar el diseño para que el proceso de pago sea lo más fácil posible.

En la siguiente imagen, puedes ver un ejemplo de una página de pago optimizada tomada del sitio de AIOSEO.

Dicho esto, veamos cómo puedes personalizar fácilmente tu página de pago de WooCommerce y ganar más dinero con tu tienda en línea.

Simplemente usa los enlaces rápidos a continuación para ir directamente al método que deseas usar.

Método 1. Personaliza tu página de pago de WooCommerce usando FunnelKit Builder

La forma más fácil de crear una página de pago personalizada de WooCommerce es usando FunnelKit Builder. Este plugin viene con plantillas y formularios de pago predeterminados.

También tiene 'optimizaciones' integradas diseñadas para ayudarte a conseguir más ventas. Hemos probado exhaustivamente el plugin y hemos descubierto que es muy fácil de usar para principiantes.

Lo primero que necesitas hacer es instalar y activar el plugin. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Elige una plantilla diseñada profesionalmente

Al activar, ve a FunnelKit » Store Checkout. En esta pantalla, haz clic en el botón ‘Create Store Checkout’.

Ahora puedes elegir entre cualquiera de las plantillas de página de pago diseñadas profesionalmente por FunnelKit o seleccionar ‘Start from scratch.’ Recomendamos usar una plantilla para ayudarte a crear una página de pago de alta conversión rápidamente.

Para ver más de cerca cualquier plantilla, simplemente pasa el ratón sobre ella y luego haz clic en el botón ‘Preview’ cuando aparezca.

En nuestras imágenes, estamos usando la plantilla Hific, que tiene una sección donde puedes hablar sobre lo que ofreces y una sección donde puedes mostrar testimonios de clientes.

Cuando encuentres una plantilla que quieras usar, haz clic en ‘Importar este embudo’.

En este punto, FunnelKit podría pedirte que instales algunos complementos adicionales, como su complemento SlingBlocks para el editor de bloques.

Si ves este mensaje, haz clic en ‘Activar’ para obtener los complementos que necesitas.

Después de eso, puedes escribir un nombre para la página de pago de la tienda. Esto es solo para tu referencia, así que puedes usar cualquier cosa que te ayude a identificar la página en el panel de WordPress.

Hecho esto, haz clic en el botón ‘Agregar’.

En la siguiente pantalla, verás todos los pasos incluidos en esta plantilla. Puedes desbloquear pasos adicionales actualizando a FunnelKit Pro.

Dado que estás usando la versión gratuita de FunnelKit, la plantilla incluye una página de pago y una página de agradecimiento personalizada de WooCommerce.

Crear un diseño de pago personalizado

Para continuar y personalizar la página de pago, haz clic en su enlace ‘Editar’.

Ahora puedes hacer clic en ‘Editar plantilla’ para abrir la plantilla en el editor de bloques de WordPress.

Nota: Si estás usando un complemento de constructor de páginas, FunnelKit podría abrir la plantilla en un editor diferente. Si esto sucede, deberás hacer clic en ‘Cambiar al editor de WordPress’ en lugar de ‘Editar plantilla’.

Ahora puedes personalizar la plantilla de la misma manera exacta en que construyes cualquier página de WordPress. Simplemente haz clic en cualquier bloque y luego ajústalo usando la configuración en el menú de la derecha y la barra de herramientas pequeña.

Por ejemplo, normalmente querrás reemplazar el logotipo de marcador de posición con tu propio logotipo personalizado. Para hacer esto, haz clic para seleccionar el bloque de imagen y luego selecciona 'Reemplazar' en la barra de herramientas pequeña.

Ahora, selecciona Abrir biblioteca de medios y elige una imagen de la biblioteca de medios de WordPress, o haz clic en 'Subir' y selecciona un archivo de tu computadora.

Después de elegir una imagen, puedes agregar texto alternativo a la imagen, cambiar el ancho e incluso agregar esquinas redondeadas usando la configuración en el menú de la derecha.

También querrás reemplazar el texto de marcador de posición con información sobre tu propio mercado en línea y testimonios de clientes. Simplemente haz clic en cualquier bloque de texto para hacerlo editable, de la misma manera exacta en que trabajas con texto en el editor de bloques estándar de WordPress.

Con eso hecho, puedes estilizar el texto usando la configuración en el menú de la derecha. Por ejemplo, puedes usar bordes y sombras de caja para que el texto resalte, cambiar la familia de fuentes o cambiar el color del texto en WordPress.

Simplemente repite estos pasos para personalizar todos los bloques estándar en la plantilla de FunnelKit Builder. También puedes agregar más bloques haciendo clic en el ícono de ‘+’ o eliminar cualquier bloque que no necesites.

La mayoría de estos bloques te resultarán familiares, pero FunnelKit viene con algunos bloques personalizados. Dado que estás utilizando una plantilla de pago, el diseño ya tendrá un bloque de Pago de FunnelKit, así que haz clic para seleccionar este bloque.

En el menú de la derecha, verás una lista de todas las diferentes secciones en el bloque de Pago, como Encabezado del Formulario, Cupón y Pasarelas de Pago.

Simplemente haz clic para expandir cada sección y luego realiza tus cambios.

Típicamente, si la sección tiene un encabezado, subencabezado o etiqueta de botón, puedes cambiarlo escribiendo el nuevo texto.

Algunas secciones son opcionales, por lo que puedes habilitarlas y deshabilitarlas usando un interruptor.

Por ejemplo, es posible que desees agregar un resumen de pedido colapsable para que el comprador pueda ver todos los artículos en su carrito.

Puedes agregar más campos al formulario de pago, o eliminar los que no necesites. Por ejemplo, si estás usando WooCommerce para vender descargas digitales, entonces normalmente no necesitas recopilar información de envío.

Personaliza el formulario de pago

Cuando estés satisfecho con el aspecto de la página de pago, es hora de examinar más de cerca los campos del formulario y realizar los cambios necesarios.

Para hacer esto, haz clic en 'Actualizar' para guardar tus cambios y luego selecciona 'Volver a la página de pago'.

Ahora, haz clic en la pestaña 'Campos' para ver todas las diferentes secciones y campos que componen el formulario de pago.

Puedes reordenar estos campos usando arrastrar y soltar.

Para agregar más campos, simplemente arrástralos desde la sección de la derecha y luego suéltalos en tu formulario.

También puedes organizar estos campos en secciones haciendo clic en el botón 'Agregar Sección'.

En la ventana emergente que aparece, simplemente escribe un nombre para la sección. Dado que los clientes verán esto, es una buena idea agregar un encabezado descriptivo y útil.

Hecho esto, haz clic en 'Agregar'.

Ahora puedes agregar campos a la sección usando arrastrar y soltar.

¿Quieres eliminar un campo del formulario de pago? Simplemente coloca el cursor sobre el campo y haz clic en el ícono 'x' rojo cuando aparezca.

Para personalizar cualquiera de los campos de FunnelKit, simplemente haz clic en ese campo.

La configuración que veas puede variar según el campo, pero normalmente puedes cambiar su etiqueta, agregar un valor de marcador de posición o hacer que el campo sea obligatorio marcando la casilla 'Requerido'.

Cuando estés satisfecho con la configuración de los campos de pago, no olvides hacer clic en 'Guardar Cambios' para almacenar tu configuración.

Obtén Más Ventas con las Optimizaciones de FunnelKit

Para obtener más ventas, es una buena idea habilitar algunas de las optimizaciones de FunnelKit haciendo clic en la pestaña 'Optimizaciones'.

Aquí, verás todas las diferentes optimizaciones que pueden hacer que el proceso de pago sea más fácil.

El plugin gratuito FunnelKit viene con botones de pago express para las mejores pasarelas de pago de WooCommerce. Esto permite a los compradores hacer clic en su botón de pago express preferido y pagar usando una cuenta existente, similar a un botón de comprar ahora.

Dado que el cliente no tiene que completar el formulario de pago, esto puede reducir las tasas de abandono del carrito y ayudarte a obtener más ventas.

Para configurar el pago express, selecciona 'Botones de pago express' en el menú de la izquierda. Luego, haz clic en el botón 'Habilitar' y usa el menú desplegable 'Elegir posición' para cambiar dónde aparece el botón en la página de pago.

Solo ten en cuenta que necesitarás habilitar los Botones de Solicitud de Pago para poder usar el botón Apple Pay de Stripe.

A continuación, es posible que desees habilitar el campo de teléfono mejorado. Cuando un cliente escribe su dirección de envío, FunnelKit puede mostrar una bandera del país junto al campo del teléfono.

Esto permite a los compradores saber que han escrito la dirección correcta.

Para agregar esta función, selecciona 'Campo de teléfono mejorado' en el menú de la izquierda y luego haz clic en el botón 'Sí' junto a 'Habilitar'.

En esta pantalla, también puedes validar el número de teléfono usando el país seleccionado por el comprador. Esta es una forma de verificar que el cliente ha escrito un número de teléfono válido.

Para habilitar esta verificación, simplemente selecciona el botón 'Sí' junto a 'Validar número de teléfono'.

Finalmente, puedes elegir si guardar el número de teléfono con el código de país o sin él. Si vendes a una audiencia internacional, generalmente tiene sentido seleccionar 'Con código de país'.

Cuando estés satisfecho con la configuración de las optimizaciones, haz clic en 'Guardar cambios'.

Como puedes ver, FunnelKit tiene muchas más optimizaciones que pueden ayudarte a conseguir más ventas. Esto incluye el autocompletado de la dirección de facturación y envío del comprador, aplicar cupones automáticamente y rellenar previamente el formulario de pago para clientes recurrentes.

Para desbloquear estas potentes optimizaciones de WooCommerce, necesitarás actualizar a FunnelKit Builder Pro.

Publicar la página de pago personalizada de WooCommerce

El plugin gratuito FunnelKit tiene muchas más configuraciones y funciones que pueden ayudarte a crear una página de pago de alta conversión. Sin embargo, esto es todo lo que necesitas para crear una página de pago personalizada de WooCommerce.

Cuando estés satisfecho con la configuración de la página de pago, es hora de publicarla haciendo clic en el botón 'Borrador'.

Si deseas previsualizar la página antes de publicarla, haz clic en 'Vista previa'. Esto abrirá la página de pago personalizada en una nueva pestaña.

Para publicar la página, haz clic en 'Borrador', pero esta vez selecciona 'Publicado'. Ahora, si visitas tu sitio web de WordPress, verás la página de pago personalizada publicada.

Método 2. Personaliza tu página de pago usando SeedProd

También puedes crear una página de pago personalizada de WooCommerce usando SeedProd.

Es el mejor constructor de páginas de destino utilizado por más de 1 millón de sitios web y viene con más de 180 plantillas diseñadas profesionalmente, incluidas plantillas de comercio electrónico que puedes usar para crear páginas de ventas y páginas de captura de leads.

Aún mejor, SeedProd tiene soporte completo para WooCommerce e incluso viene con bloques especiales de WooCommerce que puedes usar para crear una página de pago personalizada rápidamente.

Varias de nuestras marcas asociadas han diseñado sus sitios web completos utilizándolo, y les ha encantado lo fácil de usar que es. Para más detalles, consulta nuestra reseña de SeedProd.

Dado que te permite crear todo tipo de páginas, SeedProd es una excelente opción si deseas personalizar otras páginas, o incluso crear un tema personalizado de WordPress para tu tienda en línea.

Lo primero que necesitas hacer es instalar y activar el plugin. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Después de la activación, ve a SeedProd » Configuración e ingresa tu clave de licencia.

Puedes encontrar esta información en tu cuenta en el sitio web de SeedProd. Después de ingresar la licencia, haz clic en el botón ‘Verificar clave’.

Elige una plantilla de SeedProd

Después de eso, ve a SeedProd » Páginas de destino y haz clic en ‘Agregar nueva página de destino’.

A continuación, necesitas elegir una plantilla para tu página de pago personalizada.

Las plantillas de SeedProd están organizadas en diferentes tipos de campañas, como próximamente y páginas 404. Puedes hacer clic en las pestañas en la parte superior de la pantalla para filtrar las plantillas de SeedProd según el tipo de campaña.

Elegir un diseño que coincida con el tipo de página que deseas crear te ayudará a construirla más rápido. Sin embargo, cada plantilla es completamente personalizable, por lo que siempre puedes ajustar el diseño para que se adapte mejor a tu tienda en línea.

Para esta guía, selecciona la 'Plantilla en blanco' para que puedas empezar desde cero.

Para seleccionar una plantilla, coloca el cursor del ratón sobre ella y luego haz clic en el icono de ‘Marca de verificación’.

A continuación, escribe un nombre para tu página de pago personalizada. SeedProd creará automáticamente una URL basada en el título de la página, pero puedes cambiar esta URL por lo que quieras. Por ejemplo, podrías mejorar tu SEO de WordPress agregando algunas palabras clave relevantes.

Para obtener más información, consulta nuestra guía detallada sobre cómo hacer investigación de palabras clave para tu blog de WordPress.

Cuando estés satisfecho con la información que has introducido, haz clic en el botón ‘Guardar y empezar a editar la página’.

Esto te llevará al editor de arrastrar y soltar, donde puedes crear tu página de pago personalizada de WooCommerce.

Diseña una página de pago de alta conversión

El editor de SeedProd muestra una vista previa en vivo de tu página de pago a la derecha y algunas configuraciones de bloques a la izquierda.

Simplemente comienza creando una cabecera de marca.

Aquí, puedes usar una sección, que es una colección de bloques que a menudo se usan juntos. Simplemente haz clic en la pestaña 'Secciones' y luego selecciona la categoría 'Cabecera'.

Después de eso, pasa el mouse sobre la sección 'Cabecera 1' y haz clic en el ícono 'Más'.

Esto agrega una sección de Cabecera a tu diseño.

Para empezar, querrás reemplazar el marcador de posición 'Tu Logo' haciendo clic para seleccionar ese bloque.

Luego, haz clic en el ícono 'Seleccionar imagen' en el menú de la izquierda.

Ahora puedes elegir una imagen de la biblioteca de medios o subir un nuevo archivo desde tu computadora.

La sección Cabecera 1 viene con un menú de navegación. Sin embargo, esto anima a los visitantes a abandonar la página de pago sin realizar una compra, por lo que es una buena idea eliminarlo.

Para eliminar el bloque de menú de navegación, simplemente haz clic para seleccionarlo. Luego, haz clic en la opción 'Eliminar bloque'.

Una vez que hayas hecho eso, haz clic en el botón de llamada a la acción.

Es inteligente dar a los compradores una forma de volver a la página del carrito y agregar más artículos o cambiar la cantidad. Con esto en mente, escribe el llamado a la acción que deseas usar para este botón, como 'Ver carrito' o similar.

A continuación, escribe la URL de tu página de carrito de WooCommerce en el campo 'Enlace'.

Ahora, los compradores pueden visitar la página del carrito haciendo clic en este botón.

Agregar contenido de venta adicional y venta cruzada

Después de eso, es hora de elegir un diseño para el resto de tu página de pago.

Es una buena idea mostrar algunos productos recomendados en una sección lateral, ya que esto anima a los compradores a agregar más artículos a su carrito. Con esto en mente, haz clic en el diseño de contenido y barra lateral en 'Elige tu diseño'.

Una vez que hayas hecho eso, busca el bloque 'Checkout' en el menú de la izquierda y arrástralo a tu diseño.

Puedes personalizar completamente cómo se ve tu página de pago utilizando la configuración en el menú de la izquierda, incluido el cambio del esquema de color, la elección de fuente, el color del enlace, los botones y más.

Cuando estés satisfecho con cómo se ve la sección de pago, es hora de agregar una sección de productos populares o recomendados. Esto puede generar más ventas al promocionar productos adicionales que los compradores podrían querer comprar.

Para crear esta sección, simplemente arrastra un bloque 'Productos más vendidos' a tu página.

Ahora puedes configurar este bloque usando las configuraciones en el menú de la izquierda. Para más detalles, por favor consulta nuestra guía sobre cómo mostrar productos populares en WooCommerce.

A continuación, es una buena idea agregar un encabezado encima de los productos populares. Simplemente arrastra el bloque 'Encabezado' a tu página y suéltalo encima del bloque de productos populares.

Luego, haz clic para seleccionar el bloque 'Encabezado' y escribe el título que deseas usar.

Mostrar reseñas y calificaciones de clientes

Una vez que hayas hecho eso, te recomendamos mostrar prueba social agregando un bloque de testimonios de clientes. Simplemente busca el bloque 'Testimonios' y arrástralo a tu diseño.

Ahora puedes cambiar la apariencia de los testimonios en tu tienda en línea.

Por ejemplo, en el menú de la izquierda, verás configuraciones para cambiar el color de la burbuja de comentarios, cambiar la alineación y agregar más testimonios de clientes.

Otra gran idea es mostrar una calificación con estrellas debajo de tus testimonios. Esta es una excelente opción si ya tienes muchas reseñas positivas.

Para hacer esto, simplemente busca el bloque 'Calificación con estrellas' y arrástralo debajo del bloque de testimonios.

Publicar la página de pago de WooCommerce

Cuando estés satisfecho con el aspecto de la página de pago de WooCommerce, es hora de publicarla haciendo clic en la flecha desplegable junto a 'Guardar'.

Luego, selecciona la opción 'Publicar'.

Ahora, si visitas tu tienda, verás la página de pago en vivo.

Consejo profesional: El seguimiento de conversiones puede ayudarte a ver qué funciona en tu página de pago y qué no. Luego puedes usar esta información para ajustar tu página de pago usando SeedProd. Para más detalles, consulta nuestra guía sobre cómo configurar el seguimiento de conversiones de WooCommerce.

Asignar tu página de pago a WooCommerce

En este punto, has publicado la página de pago personalizada, pero tu blog de WordPress o sitio web todavía usa el diseño predeterminado. Necesitarás cambiar la configuración de la URL predeterminada para que WooCommerce envíe a los clientes a la nueva página de pago en lugar de la predeterminada.

Para hacer esto, ve a WooCommerce » Ajustes y haz clic en la pestaña 'Avanzado'.

Después de eso, abre el menú desplegable 'Página de pago' y comienza a escribir la URL de la página de pago personalizada que acabas de crear.

Cuando aparezca la página correcta, haz clic para seleccionarla.

Con eso hecho, desplázate hasta el final de la página y haz clic en ‘Guardar cambios’ para almacenar tu configuración. WooCommerce ahora usará la página de pago personalizada.

Bono: Cómo reducir el abandono de la página de pago

El abandono de la página de pago ocurre cuando un cliente inicia el proceso de pago pero no completa su pago.

Similar al abandono del carrito, es un gran problema para las tiendas en línea.

Cuando se trata de reducir las tasas de abandono del pago, crear una página personalizada es un gran comienzo. Sin embargo, hay muchas más formas de aumentar tus ventas.

Evita agregar cargos adicionales al pago

Cuando un cliente va a pagar, espera que el precio total sea similar al precio total del producto. Si llegan a la página de pago y ven impuestos, altos costos de envío y otras tarifas adicionales, entonces hay una buena posibilidad de que no completen la compra.

Algunos clientes podrían continuar con la compra si creen que los costos están justificados. Sin embargo, es mucho mejor ser transparente con tus precios para que los clientes sepan qué esperar.

Si tienes muchas tarifas adicionales, te recomendamos agregarlas a los precios de tus productos. Esto es mucho menos confuso para el cliente.

Siempre que sea posible, también es una buena idea ofrecer envío gratuito.

Haz que la creación de cuenta sea opcional o más sencilla

Obligar a los compradores a crear una cuenta al pagar agrega mucha fricción al proceso de compra y puede aumentar las tasas de abandono del pago.

Puedes permitir el registro de usuarios en tu sitio de WordPress, pero debes evitar que sea obligatorio. En su lugar, puedes permitir que los compradores compren como invitados, pero ofréceles un código de cupón si crean una cuenta.

De esta manera, puedes generar clientes potenciales y hacer crecer tu lista de correo electrónico sin perder ventas.

Ofrece más opciones de pago al finalizar la compra

La mayoría de las personas tienen un método de pago preferido. Esta puede ser la cuenta de PayPal que está guardada en la computadora del comprador o la tarjeta de crédito que tiene a mano.

Los compradores pueden abandonar tu página de pago si no admites su método de pago favorito. Si bien es imposible ofrecer todos los métodos, debes intentar ofrecer las opciones de pago más comunes.

Para más detalles, consulta nuestra lista de las mejores pasarelas de pago de WooCommerce para WordPress.

Mostrar una ventana emergente temporizada

También puedes reducir el abandono del carrito con una ventana emergente temporizada.

OptinMonster es el mejor plugin de ventanas emergentes de WordPress y tiene una tecnología única de Intención de Salida® que puede mostrar ventanas emergentes exactamente cuando un comprador está a punto de abandonar la página de pago.

Incluso puedes usar OptinMonster para ofrecer a los compradores un código de descuento especial si completan la compra ahora.

Configurar notificaciones push de carritos abandonados

Otra excelente manera de reducir el abandono del carrito es configurando notificaciones push web.

Estas notificaciones se muestran en los navegadores móviles y de escritorio de los usuarios, incluso cuando no están en tu sitio web. Esto facilita llegar a los compradores y recordarles que paguen.

PushEngage es utilizado por más de 25,000 propietarios de negocios inteligentes, y es el mejor software de notificaciones push web del mercado. Te permite crear fácilmente campañas de abandono de carritos de WooCommerce.

También puedes configurar campañas de abandono de navegación, alertas de caída de precios, anuncios de nuevos productos, alertas de inventario y más.

Crear una página de carrito de WooCommerce personalizada

Después de optimizar la página de pago de WooCommerce, también podrías considerar personalizar tu página de carrito de WooCommerce.

Al optimizar tanto la página del carrito como la de pago, puedes hacer que todo el proceso de compra se sienta sin esfuerzo para que no pierdas ninguna venta. También puedes diseñar ambas páginas para que tengan la misma marca, de modo que los visitantes obtengan una experiencia de pago coherente.

Para obtener instrucciones detalladas paso a paso, consulta nuestra guía sobre cómo crear una página de carrito de WooCommerce personalizada.

Esperamos que este artículo te haya ayudado a personalizar fácilmente la página de pago de WooCommerce. También podrías consultar nuestra guía sobre cómo crear un popup de WooCommerce para aumentar las ventas y nuestra selección experta de los mejores plugins de WooCommerce para tu tienda.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.