Cómo Crear una Página de Pago Personalizada de WordPress (Sin Código) 

Si alguna vez has perdido una venta porque tu página de pago era lenta, confusa o carecía de la opción de pago correcta, sabes lo frustrante que es. Una página de pago personalizada en WordPress soluciona eso y ofrece a los compradores una forma fluida y confiable de pagar.

Alrededor del 70% de los compradores abandonan sus carritos antes de pagar, según la media continua del Instituto Baymard. Un proceso de pago que controlas es la solución, ya sea que estés creando una página nueva desde cero o personalizando la página de pago de WooCommerce que ya tienes.

Primero te mostraré la configuración gratuita de WooCommerce. Luego te guiaré para crear una página de pago totalmente personalizada con SeedProd, en unos 15 minutos, sin tocar código.

Cómo personalizar la página de pago de WooCommerce sin un plugin

WooCommerce incluye algunas configuraciones gratuitas para el pago, y vale la pena revisarlas antes de instalar nada.

Esto es lo que puedes cambiar sin instalar nada:

• Pago para invitados: permite a los clientes pagar sin crear una cuenta (WooCommerce » Ajustes » Cuentas y privacidad)
• Campo de cupones: muestra u oculta el cuadro de código de cupón en el pago (WooCommerce » Ajustes » General)
• Página de pago: elige qué página sirve como tu página de pago (WooCommerce » Ajustes » Avanzado » Configuración de página)
• Básicos de los campos: algunos campos de dirección se pueden activar o desactivar, pero añadir o quitar campos requiere un plugin

Estos ajustes cambian cómo funciona tu pago, no cómo se ve. El diseño, los colores y la marca provienen de la plantilla de tu tema, y WooCommerce no te proporciona un editor visual para nada de esto.

En el resto de esta guía, te guiaré para reemplazar el pago predeterminado con una página que diseñes tú mismo.

Cómo Crear una Página de Pago en WordPress (Sin Código)

Para este tutorial, usaremos SeedProd para crear una página de pago de WordPress. SeedProd es el mejor constructor de sitios web de WordPress con arrastrar y soltar, utilizado por más de 1 millón de sitios web.

Con SeedProd, puedes crear cualquier página de destino de WordPress sin escribir una sola línea de código. Su integración con WooCommerce cubre el resto de tu tienda también, para que puedas personalizar tu página de carrito y página de tienda de la misma manera.

Esto significa que en lugar de usar el pago de una sola página predeterminado de WooCommerce, puedes crear una página completamente personalizada y optimizada para conversiones. Y antes de lanzar, puedes crear una página de "próximamente" de WooCommerce para generar clientes potenciales.

Así que si quieres crear una página de pago en WordPress para principiantes, aquí te explicamos cómo hacerlo con SeedProd.

Tutorial en vídeo

Paso 1: Instalar y Activar SeedProd

El primer paso es instalar y activar el plugin SeedProd.

Si necesitas ayuda con este paso, sigue esta guía paso a paso sobre cómo instalar un plugin de WordPress.

Después de activar SeedProd, ve a SeedProd » Ajustes e introduce tu clave de licencia.

Esta información es fácil de encontrar en la sección Descargas de su cuenta en el sitio web de SeedProd.

Luego, puede continuar y hacer clic en el botón Guardar y empezar a editar la página.

Después de activar su clave de licencia, navegue a SeedProd » Páginas desde su panel de WordPress. En esta página, verá una descripción general de los diferentes modos de página de SeedProd y un área para agregar nuevas páginas de destino.

Con los modos de página, puede instantáneamente:

• Crear y activar una página de "próximamente"
• Activar el modo de mantenimiento
• Crear una página 404 personalizada
• Configurar una página de inicio de sesión personalizada de WordPress
• Crear una página de destino de WordPress independiente

Cada modo agrega funcionalidad para la que de otro modo necesitarías un plugin de WordPress independiente.

Para esta guía, queremos crear una página de pago de WordPress independiente. Para hacerlo, haga clic en el botón Agregar nueva página de destino.

En la siguiente pantalla, puede elegir entre cientos de plantillas de página de destino receptivas.

Puedes filtrar los diseños haciendo clic en las pestañas de la parte superior:

• Todos
• Próximamente
• Modo de Mantenimiento
• Página 404
• Ventas
• Seminario web
• Captación de Leads
• Iniciar sesión

El mejor enfoque es buscar una plantilla que coincida estrechamente con el diseño que deseas. Y si no es una coincidencia perfecta, puedes personalizarla en el siguiente paso sin PHP, CSS o shortcodes.

Para este tutorial, usaremos la plantilla En blanco para mostrarle lo fácil que es crear su página de pago de WordPress sin contratar a un desarrollador.

Para elegir la plantilla, pase el mouse sobre la miniatura y haga clic en el icono de marca de verificación naranja.

Después, aparece una ventana emergente pidiéndole que ingrese un nombre y una URL para su página.

Luego, haz clic en el botón Guardar y empezar a editar la página.

Paso 3: Agregar contenido a su página de pago

Después de importar tu plantilla, se abrirá en el editor visual de páginas de SeedProd y se verá similar al ejemplo a continuación.

En mis pruebas de GTmetrix, una página creada con SeedProd cargó en 556 ms, en comparación con 1882 ms para la misma página creada con Elementor. Una página de pago más rápida significa menos abandonos antes del pago.

Verá una vista previa en vivo de su página a la derecha. Y a la izquierda hay un panel de opciones donde puede elegir diferentes bloques, secciones y personalizar su diseño.

Encabezado de la página de pago

Primero, agregaremos un encabezado a su página de pago para que pueda mantener la coherencia de su marca en todo su sitio web.

Para hacer esto, haga clic en la pestaña Secciones en el panel izquierdo y haga clic en la categoría Encabezado. Desde allí, pase el mouse sobre cualquier sección de encabezado y haga clic en el icono más para agregarla a su página.

A continuación, haga clic en el área de la imagen de su nueva sección de encabezado. Aquí puede cargar una imagen de su computadora o de la biblioteca de medios de WordPress para usarla como el logotipo de su sitio.

También recomendamos eliminar el menú de navegación de tu página de pago. Menos rutas de salida significan más pagos completados.

Para eliminar el menú de navegación, pasa el ratón sobre el bloque de navegación y haz clic en el icono de la papelera.

Ahora personalicemos el botón de llamada a la acción (CTA). En lugar de enviar a los usuarios fuera de la página, puedes usar este botón para recordarles el contenido de su carrito de la compra.

Así que haz clic en el botón CTA para abrir la configuración a la izquierda y reemplazar el texto predeterminado. En nuestro caso, lo cambiamos a 'Ver carrito'.

Luego, puedes añadir la URL de tu página de carrito de WooCommerce en el campo Enlace. Si lo deseas, puedes hacer que el enlace no siga o que se abra en una nueva pestaña seleccionando la casilla.

Bloque de Finalización de Compra de WooCommerce

Con tu marca en su lugar, es hora de agregar el formulario de pago en sí. Primero, arrastra un nuevo bloque de Columna a tu página.

Luego, elige tu diseño preferido.

A continuación, desplázate por el panel izquierdo hasta la sección WooCommerce. Desde allí, elige el bloque Checkout y arrástralo a tu página.

Haz clic en cualquier lugar del bloque de pago para abrir su configuración.

La pestaña Estilo te da control preciso sobre cómo se ve el formulario:

• Diseño: un formulario de pago de 1 o 2 columnas
• Encabezado: fuentes y colores para los encabezados de pago
• Campos: fondo, texto, borde y estilo de etiqueta, además de espaciado entre filas
• Botón: estilo (plano, 2D, vintage, fantasma o enlace), color y radio del borde
• Alertas: colores de resaltado para mensajes de información, error y éxito
• Carrito: bordes, fondos, fuentes y estilo del encabezado
• Sección de pago: fondo, color de texto y familia de fuentes

Para un inicio más rápido, haz clic en la pestaña Plantillas. Contiene estilos predefinidos para tus campos de pago, y con un solo clic los aplicas a todo el formulario.

Recuerda hacer clic en Guardar para almacenar tus cambios.

Cambiar los campos que aparecen en el pago

La configuración del bloque de pago controla cómo se ve tu formulario, no qué campos muestra. WooCommerce decide los campos, por lo que no puedes eliminar el Nombre de la empresa ni reordenar el formulario desde el panel de SeedProd.

Para agregar, eliminar o reordenar campos de pago, usa un plugin editor de campos dedicado como Checkout Field Editor for WooCommerce. La versión gratuita maneja lo básico.

Una cosa a tener en cuenta: los fragmentos de PHP que editan los campos de pago solo funcionan en el pago con shortcode clásico. El pago con bloques más nuevo de WooCommerce ignora esos filtros silenciosamente, razón por la cual los tutoriales de código antiguos a menudo dejan de funcionar.

Productos Populares de WooCommerce

Si deseas mejorar las ventas, puedes añadir productos populares a tu página de finalización de compra de WordPress a continuación. Esto puede animar a los compradores a añadir más artículos a su carrito antes de pagar.

Para añadir productos populares, elige el bloque de Productos Más Vendidos de la sección de WooCommerce y arrástralo a tu página.

Desde allí, puedes editar el número de columnas, añadir paginación y ajustar otras configuraciones desde los menús desplegables.

Agrega un bloque de Encabezado encima de la cuadrícula y cámbialo a algo como "Productos populares". De esa manera, los compradores saben exactamente lo que están viendo.

Reseñas y Testimonios

Las reseñas y testimonios tranquilizan a los compradores de que otras personas confían en tus productos. Esa tranquilidad es lo más importante al pagar, justo cuando los compradores se echan atrás.

Puedes agregarlos con SeedProd. Dirígete a los bloques Avanzados y arrastra el bloque Testimonios a tu página de pago.

En la configuración, puedes personalizar el bloque. Por ejemplo, puedes añadir una foto de testimonio o un cargo y convertirlo incluso en un carrusel desplazable con múltiples testimonios.

También puedes colocar un bloque de Valoración con estrellas debajo del testimonio para obtener pruebas sociales adicionales.

Insignias de confianza funcionan de la misma manera. Un icono de candado o una garantía de devolución de dinero cerca del botón de pago es una pequeña adición que puede calmar las dudas de último minuto.

Paso 4: Publica tu Página de Finalización de Compra de WordPress

Una vez que estés satisfecho con tu página, comprueba cómo se ve en el móvil. La mayoría de los compradores navegan en sus teléfonos, por lo que un proceso de pago que falla en pantallas pequeñas te cuesta ventas. Asegúrate de que todo esté optimizado para móviles antes de publicarlo.

SeedProd tiene una vista previa móvil incorporada para esto. Haz clic en el icono del móvil en la barra de navegación inferior.

Verás la página como la vería un comprador móvil, y puedes arreglar cualquier cosa que se vea apretada antes de publicarla.

Cuando estés satisfecho con cómo se ve todo, haz clic en la flecha desplegable junto al botón verde Guardar y haz clic en Publicar para que tu página de pago esté activa.

En lugar del proceso de pago predeterminado de WooCommerce, ahora tienes un proceso de pago que es realmente tuyo.

Paso 5: Asigna tu página de pago a WooCommerce

El paso final es indicar a WooCommerce que use tu nueva página. Este es un ajuste en el panel de control de WooCommerce.

Ve a WooCommerce » Ajustes y haz clic en la pestaña Avanzado. Luego, junto al encabezado Página de pago, busca la página que acabas de crear.

Cuando la encuentres en la lista desplegable, haz clic en ella para asignarla como tu página de pago oficial. Asegúrate de hacer clic en Guardar cambios en la parte inferior de la pantalla para conservar tus ajustes.

Ahora, cuando un visitante haga clic en 'Proceder al pago', aterrizará en la página que acabas de crear. Esto funciona tanto si tu tienda utilizaba el bloque como el proceso de pago clásico anteriormente.

Antes de publicar, prueba el proceso de pago utilizando el modo de prueba incorporado de WooCommerce. En WooCommerce » Ajustes » Pagos, habilita una pasarela de prueba y realiza un pedido de prueba para confirmar que todo funciona.

Si tus métodos de pago no se muestran en la página, es ahí donde debes comprobar primero. SeedProd muestra las pasarelas que hayas activado allí, incluidas Stripe, PayPal y cualquier otra que hayas activado.

Preguntas frecuentes sobre las páginas de pago de WordPress

¿Necesito conocimientos de codificación para personalizar una página de pago de WooCommerce?

No. Con el constructor de arrastrar y soltar de SeedProd, puedes personalizar la página de pago de WooCommerce sin tocar código. Cambia el diseño, estiliza el formulario y añade señales de confianza utilizando controles visuales. No se necesita PHP ni CSS.

¿Puedo añadir pasarelas de pago adicionales a mi página de pago personalizada?

Sí. WooCommerce admite múltiples pasarelas de pago, incluidas Stripe, PayPal, Apple Pay y opciones de Paga Ahora, Paga Después. Habilítalas en WooCommerce » Ajustes » Pagos, y SeedProd las mostrará automáticamente en tu página de pago personalizada.

¿Cómo hago que el pago de WooCommerce sea de una sola página?

Crea una página con SeedProd que incluya los bloques de Carrito y Pago, y asígnala como tu página de pago en WooCommerce » Ajustes » Avanzado. Los compradores verán su carrito, los detalles de facturación y el resumen del pedido en una sola página sin recargas.

¿Por qué no funciona mi código para personalizar la página de pago de WooCommerce?

Lo más probable es que tu tienda esté utilizando el pago por bloques de WooCommerce, que ignora silenciosamente los filtros PHP como woocommerce_checkout_fields. O bien, vuelve al pago clásico con shortcode, o utiliza un constructor visual como SeedProd que reemplaza la página de pago sin depender de los hooks de PHP.

¿SeedProd funciona con el pago con bloques de WooCommerce?

Sí. SeedProd crea una página de pago personalizada separada, y asignarla en la configuración de WooCommerce reemplaza cualquier tipo de pago que estuviera activo antes, ya sea por bloques o clásico. No necesitas cambiar los modos de pago de WooCommerce primero.

¿Cómo puedo mejorar las tasas de conversión en mi página de pago?

Mantén el formulario simple, ofrece múltiples opciones de pago y añade insignias de seguridad y testimonios de clientes. Eliminar los menús de navegación evita que los compradores abandonen el proceso a mitad de camino. El constructor visual de SeedProd realiza todos estos ajustes sin necesidad de código.

¿Cómo pruebo mi página de pago de WooCommerce antes de publicarla?

Habilita una pasarela de prueba en WooCommerce » Ajustes » Pagos. Tanto Stripe como PayPal ofrecen modos de prueba (sandbox). Realiza un pedido de prueba para confirmar que la página de pago se carga correctamente, procesa los pagos y envía correos electrónicos de confirmación del pedido antes de publicarlo.

Crea tu página de pago personalizada en WordPress

Crear una página de pago personalizada en WordPress es más que diseño. Hace que el proceso de compra sea claro y rápido, para que más compradores completen sus pedidos.

Con SeedProd, puedes diseñar una página de pago que coincida con tu marca y elimine distracciones, sin escribir código. Y una vez que esté activa, puedes personalizar tu página de agradecimiento de WooCommerce junto con ventas adicionales o para recopilar reseñas después de la venta.

Configura tu página personalizada hoy mismo y convierte más visitantes en clientes de pago.

Si buscas más consejos sobre WooCommerce, consulta estas publicaciones:

• Cómo habilitar el modo de mantenimiento para las páginas de la tienda WooCommerce
• Cómo hacer que WordPress sea rápido
• Cómo configurar el seguimiento de conversiones de WooCommerce para tu tienda

Mientras estás aquí, no olvides seguirnos en Twitter, YouTube y Facebook para obtener más contenido útil para hacer crecer tu negocio.