¿Quieres crear una página de pago personalizada para tu tienda WooCommerce?
Imagine perder 7 de cada 10 ventas potenciales sólo porque los clientes se quedan atascados en la caja. Eso es lo que les ocurre a muchas tiendas online, y a menudo se debe a que sus páginas de pago son confusas o difíciles de usar.
Pero no te preocupes, hay una solución sencilla. Mejorando la página de pago de tu WooCommerce, puedes convertir más de esas casi-ventas en dinero real en tu bolsillo. Es como suavizar los baches del camino para que más clientes puedan cruzar fácilmente la línea de meta.
En esta guía, le mostraré exactamente cómo mejorar su página de pago, paso a paso. ¿Y lo mejor de todo? No necesita saber ningún código informático complicado para hacerlo. Voy a hacer que sea fácil para usted para crear una página de pago que ayuda, no obstaculiza, sus clientes.
Cómo personalizar la página de pago de WooCommerce:
- 1. Instalar y activar SeedProd
- 2. Crear una nueva página de destino
- 3. Añada el bloque de pago a su página
- 4. Personalice el diseño de su página de pago
- 5. Configuración de la página de pago
- 6. Publique su página de pago personalizada
- 7. Asigne su página de pago en WooCommerce
Por qué deberías personalizar la página de pago de WooCommerce
La página de pago es lo último que ven los clientes antes de completar su compra. Puede suponer la diferencia entre convertir o abandonar la tienda.
Por eso es esencial que te asegures de que tu página de pago de WooCommerce está bien diseñada y funciona de forma que fomente las conversiones.
La página de pago predeterminada de WooCommerce es un buen punto de partida para las tiendas más pequeñas. Tiene todo lo que necesitas para empezar una tienda online.
Pero a medida que su negocio crezca, pronto descubrirá que puede ofrecer una experiencia mejor:
- Incluya su marca personalizada
- Añadir campos personalizados al formulario de pago
- Cambiar el diseño y la maquetación de la página
- Vinculación directa de los productos a la página de pago
- Cambiar las etiquetas de los campos de entrada y el texto de los botones
- Venta de otros productos o servicios
Ya sea que quieras rediseñar toda tu página de pago de WooCommerce o hacer algunos cambios menores, hay una cosa que debes tener en mente. ¡Debe ser fácil!
Por suerte, la siguiente solución permite personalizar la página de pago de WooCommerce sin esfuerzo.
Cómo personalizar la página de pago de WooCommerce
Si no tienes tiempo para aprender a programar o presupuesto para contratar a un programador, personalizar tu página de pago puede parecer casi imposible.
Pero lo cierto es que no lo es con las herramientas adecuadas a mano.
En el siguiente tutorial, le mostraremos cómo personalizar su página de pago WooCommerce con SeedProd.
SeedProd es el mejor constructor de páginas de aterrizaje de WordPress con funcionalidad de arrastrar y soltar. Le permite construir y personalizar cualquier página en WordPress visualmente.
Esto significa que puedes utilizar el editor de páginas de arrastrar y soltar para crear páginas personalizadas y ver los resultados en tiempo real. Esto elimina la necesidad de codificar la página manualmente, lo que es una excelente noticia para las personas con conocimientos técnicos y de diseño limitados.
SeedProd viene con cientos de plantillas de páginas de aterrizaje diseñadas profesionalmente para empezar rápidamente. A continuación, puede personalizar cada plantilla en el editor visual utilizando bloques de página flexibles como:
- Formularios de suscripción y de inicio de sesión
- Imágenes y vídeos
- Texto y títulos
- Perfil en las redes sociales y botones para compartir
- Formularios de contacto personalizados con plugins de terceros como WPForms
- Regalos de RafflePress
- Testimonios y clasificación por estrellas
- Temporizadores y barras de progreso
- Menús de navegación y acordeones
- Y mucho más.
SeedProd también tiene bloques de página de destino dedicados a las tiendas WooCommerce, incluyendo botones de añadir al carrito, pago, carrito de compras, y rejillas de productos flexibles. Esto significa que puede crear fácilmente páginas versátiles de productos, carrito y pago para su tienda de comercio electrónico sin contratar a un desarrollador.
Con esto en mente, veamos cómo personalizar la página de pago de WooCommerce con SeedProd.
1. Instalar y activar SeedProd
El primer paso es empezar con SeedProd y descargar el plugin en tu ordenador. Para acceder a las funciones de integración de WooCommerce de SeedProd, necesitarás al menos un Plan Pro de SeedProd.
Después de descargar SeedProd, necesitas instalar y activar el plugin en tu sitio web WordPress. Puedes seguir estos pasos para instalar un plugin de WordPress si necesitas ayuda.
Después de activar el plugin, verás una pantalla de bienvenida.
La pantalla le pedirá que introduzca su clave de licencia de SeedProd. Puede encontrar su clave iniciando sesión en su cuenta SeedProd y haciendo clic en el enlace Ver clave de licencia, detalles y descargas.
Desde ahí, puedes copiar la clave para guardarla en el portapapeles. Después, pega la clave en el campo de clave de licencia y haz clic en el botón Verificar clave.
Ahora desplázate un poco hacia abajo en la página y haz clic en el botón Crear tu primera página.
Esto le lleva al panel de control de la página de aterrizaje de SeedProd. En la parte superior de la página hay 4 modos de página diferentes:
- Próximamente
- Modo de mantenimiento
- 404
- Inicio de sesión
Cada modo de página le permite activar páginas de destino específicas con un solo clic.
Por ejemplo, puede activar el modo Próximamente para añadir una página que informe a los usuarios sobre su nueva tienda. O puedes activar el modo Página 404 para añadir una página de error 404 personalizada a tu sitio.
Debajo de esa sección es donde verás una lista de cualquier otra página que hayas creado con SeedProd. Como aún no hemos creado ninguna, haga clic en el botón Crear nueva página de destino para empezar.
2. Crear una nueva página de destino
Después de hacer clic en el botón para crear una nueva página de destino, verá la biblioteca de plantillas de páginas de destino de SeedProd.
Puedes filtrar las plantillas por objetivo o sector haciendo clic en las pestañas de la parte superior.
Cada plantilla es multifuncional. Como tal, puede utilizar cualquier diseño y personalizarlo en el editor de arrastrar y soltar para que tenga el aspecto que desee.
Para esta guía, le mostraremos cómo crear y personalizar su página de pago WooCommerce desde cero utilizando la plantilla en blanco. Esto le dará una excelente visión general de lo fácil que es utilizar SeedProd.
Pase el ratón por encima de la miniatura de la plantilla en blanco y haga clic en el icono de la marca.
A continuación, aparecerá una ventana emergente pidiéndote que introduzcas un nombre y una URL para tu página. Puedes cambiar esta configuración más adelante, así que ponle el nombre que quieras.
Ahora haga clic en el botón Guardar y empezar a editar la página para iniciar su página.
En la siguiente pantalla, verá el editor de páginas de destino de SeedProd.
Tiene un diseño sencillo de 2 paneles:
- Panel izquierdo: Bloques de página y secciones para construir y personalizar tu página.
- Panel derecho: Vista previa del aspecto de tu página de aterrizaje en tiempo real.
Añadir contenido a tu página es tan sencillo como arrastrar un bloque desde la izquierda y soltarlo en su lugar a la derecha. Te mostraremos cómo hacerlo en el siguiente paso.
3. Añada el bloque de pago a su página
Antes de empezar a personalizar tu página de pago de WooCommerce, vamos a configurar una estructura básica de página de pago.
En el panel derecho, elija un diseño de página haciendo clic en cualquiera de las opciones de columna.
Como puede ver a continuación, añade un marco simple a su página. Aquí es donde se ubicarán los elementos de página que añadas.
A continuación, tienes que añadir tu pago WooCommerce a tu página. En el panel de la izquierda, desplázate hasta la sección WooCommerce. A continuación, haz clic en el bloque Pago y arrástralo a una de las columnas que creaste anteriormente.
Ahora deberías ver tu formulario de pago de WooCommerce justo dentro del diseño de tu página de destino. Cuando hagas clic en tu formulario de pago, verás los ajustes de estilo del formulario en el panel de la izquierda.
En esta área, puede personalizar su formulario de pago WooCommerce por:
- Hacer el diseño a 1 o 2 columnas
- Cambiar las fuentes y los colores de la cabecera
- Editar las fuentes, colores, espaciado y bordes de los campos de pago
- Cambiar el estilo, la fuente y el color del botón de pago
- Añadir un color de alerta personalizado
- Cambiar el texto, los colores, los bordes y los tipos de letra del carrito
- Añadir fuentes y colores personalizados a la sección de datos de pago
Ahora haz clic en la pestaña Plantillas, y verás una variedad de estilos personalizados para tus campos de pago. Haz clic en cualquier estilo para añadirlo a tu formulario de pago al instante.
Antes de continuar, haz clic en el botón verde Guardar situado en la esquina superior derecha de la pantalla para guardar tus progresos.
4. Personalice el diseño de su página de pago
Ahora que tu página de destino se parece más a lo que debería, veamos otras formas de personalizar tu página de pago de WooCommerce.
Cómo añadir un encabezado a la página de pago de WooCommerce
Para ayudar a los clientes a encontrar su camino, es una buena práctica añadir un encabezado a su página de pago. SeedProd ofrece una manera fácil de hacer esto con Secciones.
Junto al panel de bloques, haz clic en la pestaña Secciones. Esto muestra varios diseños prefabricados que puedes añadir a tu página con un solo clic.
Por ejemplo, si haces clic en la sección Encabezados, verás 3 estilos de encabezado diferentes. Elige un diseño que te guste y haz clic en el icono más para importarlo a tu diseño.
Por defecto, cualquier sección nueva se añade a la parte inferior de la página. Para moverla a la cabecera, sitúe el ratón sobre ella y haga clic en el icono de mover sección. A continuación, arrastre toda la sección a la parte superior de la página.
Después, puedes hacer clic en cualquier elemento de la sección de cabecera para ver las opciones de personalización en el panel izquierdo. Por ejemplo, si haces clic en el bloque de imagen de la sección de cabecera, podrás subir una nueva imagen para utilizarla como logotipo.
Incluso puedes eliminar el bloque de botones de la cabecera y sustituirlo por los iconos de tus perfiles sociales.
Añadir productos sugeridos a la página de pago de WooCommerce
Con la potente integración de WooCommerce de SeedProd, es fácil realizar ventas cruzadas y promocionar tus productos y servicios desde cualquier página de destino. La gama de bloques de cuadrícula de productos le permite mostrar:
- Productos recientes
- Venta de productos
- Productos más vendidos
- Productos destacados
- Los productos mejor valorados
Sólo tienes que seleccionar el bloque Rejilla de productos y arrastrarlo a su sitio en la página. A continuación, puedes hacer clic en el bloque para ver la configuración en el panel de la izquierda.
En este panel, puede elegir cuántas columnas de productos mostrar y añadir paginación a su cuadrícula de productos. También puede filtrar los productos que ven los visitantes eligiendo un tipo de consulta en el menú desplegable.
Después, puede establecer el orden de los productos por:
- Fecha
- ID
- Menú Pedidos
- Popularidad
- Al azar
- Clasificación
- Título
También puede elegir mostrarlos en orden ascendente o descendente.
Añadir testimonios a la página de pago
Los testimonios y las valoraciones con estrellas son otra forma estupenda de añadir confianza y credibilidad a su página de pago. Si los clientes potenciales ven que la gente valora positivamente tus productos, es más probable que completen el proceso de compra en lugar de abandonar el carrito.
Para añadir testimonios de clientes a tu página de pago de WooCommerce, arrastra el bloque Testimonio desde el panel izquierdo y suéltalo en su lugar en tu página. A continuación, puedes hacer clic en el bloque para ver la configuración y añadir los testimonios de tus clientes.
Puede incluir tantos testimonios como desee e incluso mostrarlos como un carrusel de testimonios deslizante.
Ajustes globales de personalización
La configuración de personalización global de SeedProd le permite cambiar el aspecto general de su página de pago WooCommerce.
Haga clic en el icono de engranaje situado en la esquina inferior izquierda de la pantalla. Esto muestra un panel de Configuración Global para fuentes, colores, fondo y CSS personalizado.
Fuentes
Si despliegas el encabezado Fuente, podrás cambiar las fuentes y los pesos del encabezado y del cuerpo. Es tan fácil como elegir una fuente de Google en el menú desplegable.
O puedes hacer clic en el botón Temas de fuentes para ver ejemplos de diferentes combinaciones de fuentes. A partir de ahí, solo tienes que hacer clic para aplicarlos a tu página.
Colores
La sección Colores es similar. Haga clic en cualquier color para ver un cuentagotas de colores y seleccionar colores individuales para encabezados, texto, botones, etc.
También puede hacer clic en el botón Paletas de colores para elegir entre más de 20 combinaciones de colores prediseñadas.
Fondo
En la sección Fondo , puedes cambiar el color, el degradado y la imagen de fondo. Incluso puedes añadir un fondo de vídeo o una presentación de diapositivas de ancho completo.
CSS personalizado
Y por último, en la sección CSS personalizado, puedes añadir código personalizado para personalizar aún más la página de pago de WooCommerce.
Cuando estés satisfecho con el aspecto de todo, haz clic en el botón Guardar.
5. Configuración de la página de pago
Una vez realizadas las personalizaciones, veamos otras opciones que puede cambiar en la página de pago.
Conecte su lista de correo electrónico
En primer lugar están los ajustes de marketing por correo electrónico. SeedProd le permite conectar su página de destino a su lista de correo electrónico fácilmente.
Haga clic en Conectar en la parte superior de la pantalla y verá una amplia gama de servicios populares de marketing por correo electrónico. Así que si quieres pedir a los usuarios que se suscriban a tu boletín en la página de pago, utiliza este panel para vincular tu servicio de marketing por correo electrónico.
Sólo tienes que elegir tu proveedor favorito y seguir los pasos de nuestra documentación de integración de correo electrónico para configurarlo.
En la misma pantalla, puedes vincular tu página de pago a miles de apps a través de Zapier, controlar el rendimiento de tu sitio con Google Analytics y protegerlo del spam con Recaptcha.
Configuración de la página
Después de conectar su lista de correo electrónico, haga clic en la pestaña Configuración de la página para ver otros ajustes que puede configurar en SeedProd. Normalmente hay 5 secciones en la página de configuración, pero esto depende del tipo de página que construya y de su plan SeedProd.
Ajustes generales
Los ajustes generales te permiten cambiar el nombre y la URL de la página de pago de WooCommerce. También puedes cambiar entre publicado y borrador.
Si quieres evitar conflictos entre plugins y acelerar tu página, puedes activar el Modo Aislamiento. Esto evita que se ejecuten secuencias de comandos de encabezado y pie de página específicas e interfieran en el rendimiento.
SEO y analítica
En la pestaña SEO, puedes utilizar un plugin WordPress SEO para configurar la etiqueta del título de tu página de destino, la meta descripción, etc. Uno de los mejores plugins para esto es All In One SEO.
Lo mismo ocurre con la pestaña Analytics. Aquí puedes conectar tu plugin favorito de Google Analytics y monitorizar el rendimiento de tu página de aterrizaje. ¿Por qué no pruebas MonsterInsights para Google Analytics?
Si quieres más detalles, siempre puedes consultar nuestra reseña de MonsterInsights.
Guiones
En el área Scripts, puedes añadir código a la cabecera, cuerpo y pie de página de tu página. Puede ser cualquier cosa, como las cookies de seguimiento, el píxel de seguimiento de Facebook o incluso el script de análisis.
Dominio personalizado
Si eres usuario del Plan Pro de SeedProd, puedes dar a cualquier página de aterrizaje un dominio personalizado que no esté conectado a tu sitio web existente.
Por ejemplo, si desea lanzar un nuevo sitio web y aún no lo ha configurado, puede crear una página próximamente en SeedProd en su sitio web existente y dirigirla a su nuevo sitio.
Con esta táctica, puede conseguir nuevos suscriptores para la lista de su futuro sitio web sin tener que instalar WordPress.
Una vez configurados los ajustes, guarde los cambios y vuelva a la pestaña Diseño.
6. Publique su página de pago personalizada
Antes de lanzar su página de pago, es una buena idea probarla en dispositivos móviles. Si la página de pago no responde a dispositivos móviles, no se verá ni funcionará igual de bien en pantallas táctiles pequeñas como las de tabletas y smartphones.
Incluso podría provocar que los usuarios abandonaran sus carritos de la compra por frustración.
La buena noticia es que SeedProd incorpora una opción de previsualización móvil para que puedas comprobar que tu página es apta para móviles. Solo tienes que hacer clic en el icono de móvil de la parte inferior de la pantalla.
Ahora puedes ver cómo se ve tu página de pago en móvil y cambiar cualquier cosa que no se vea o funcione correctamente.
Cuando todo esté bien, es hora de publicar. Haz clic en la flecha hacia abajo situada junto al botón verde Guardar y haz clic en Publicar.
Ahora puede visitar la página para verlo en acción.
¡Buen trabajo! ¡Ahora tienes una impresionante página de pago WooCommerce personalizada!
7. Asigne su página de pago en WooCommerce
Hay 1 paso más hasta que tu nueva página de pago esté lista para aceptar pedidos. Necesitas establecerla como tu página de pago por defecto en WooCommerce.
Para ello, ve a WooCommerce " Configuración y haz clic en la pestaña Avanzado. A continuación, ve al apartado Página de pago y elige la página que acabas de seleccionar en el menú desplegable.
No olvide hacer clic en el botón Guardar cambios para almacenar la configuración.
¡Y ya está!
Ahora ya sabes cómo personalizar la página de pago de WooCommerce con el constructor de páginas de aterrizaje de SeedProd. La integración con WooCommerce de SeedProd hace que controlar el diseño de tu tienda online sea súper fácil.
El plugin no sólo es rápido y no se hincha, sino que también es tan fácil de usar que incluso los principiantes pueden crear una tienda personalizada sin contratar a un desarrollador.
¿Por qué no lo prueba usted mismo?
Ya que estás aquí, puede que también te resulten útiles las siguientes guías de WooCommerce:
- Cómo personalizar la pestaña de información adicional de WooCommerce
- Cómo añadir el botón Ver carrito en WooCommerce
- Cómo cambiar el título de la página de la tienda en WooCommerce
- Cómo crear una impresionante galería de imágenes de productos en WooCommerce
- Cómo añadir estrellas a las páginas de productos de WooCommerce
- Cómo mostrar productos relacionados en WooCommerce
- Cómo mostrar categorías de productos y etiquetas en WooCommerce
- Cómo obtener y mostrar descripciones de productos en WooCommerce
- Cómo mostrar productos destacados en WooCommerce
- Cómo Arreglar WooCommerce Ver Cesta No Funciona
- Cómo personalizar el botón Add-to-Cart de WooCommerce
- Cómo añadir un icono de carrito de la compra WooCommerce en los menús
- Cómo personalizar las páginas de categorías de productos en WooCommerce
- Cómo añadir una sección de WooCommerce de nuevos productos a WordPress
Gracias por leernos. Nos encantaría conocer tu opinión, así que no dudes en unirte a la conversación en YouTube, X y Facebook para obtener más consejos y contenidos útiles para hacer crecer tu negocio.
