El proceso de pago predeterminado de WooCommerce tiene el mismo aspecto que el de cualquier otra tienda de WooCommerce. Sin identidad de marca, sin señales de confianza, sin control sobre el diseño. Esa desconexión entre tu tienda y el proceso de pago es una de las razones por las que los clientes abandonan la compra en el último paso.
En esta guía, te mostraré cómo rediseñar la página de pago de WooCommerce con SeedProd. Podrás controlar el diseño, los colores, la tipografía, el estilo de los botones y el aspecto general sin tener que tocar ni una sola línea de PHP.
- Por qué deberías personalizar la página de pago de WooCommerce
- Configuración del proceso de pago de WooCommerce (opciones gratuitas)
- 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
- Personalización de los campos de pago de WooCommerce con SeedProd
- 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
- Preguntas frecuentes
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. Es más importante que casi cualquier otra página de tu tienda: de media, el 70 % de los compradores abandona el carrito antes de pagar, y un proceso de pago confuso o lento es una de las principales razones.
- Reducir el abandono: un proceso de pago confuso o mal diseñado es una de las principales razones por las que los clientes abandonan la página antes de completar una compra.
- Añade tu imagen de marca: una página de pago genérica de WooCommerce rompe la experiencia visual que los clientes han ido creando mientras navegan por tu tienda.
- Aprovecha el momento oportuno para ofrecer productos complementarios: una página de pago personalizada te permite mostrar productos relacionados justo cuando los clientes ya están listos para comprar. Echa un vistazo a los mejores plugins de WooCommerce para ventas complementarias y saca aún más partido a esta función.
- Fomenta la confianza: incluir testimonios, sellos de confianza y un diseño sencillo en la página de pago reduce el abandono de los compradores que se echan atrás en el último momento.
La buena noticia es que no hace falta programar nada de esto. Te enseñaré cómo hacerlo todo con un editor de arrastrar y soltar.
Configuración del proceso de pago de WooCommerce (opciones gratuitas)
Antes de instalar nada, conviene saber qué opciones te permite modificar WooCommerce de serie. Estos ajustes son gratuitos y están disponibles en todas las instalaciones de WooCommerce.
Ve a WooCommerce > Ajustes > General / Cuentas y privacidad / Avanzado para acceder a estas opciones:
- Pago como invitado: activa o desactiva la opción de pagar sin crear una cuenta (WooCommerce > Ajustes > Cuentas y privacidad)
- Campo de cupón: Mostrar u ocultar el campo del código de cupón en la página de pago (WooCommerce > Ajustes > General)
- Configuración de la página de pago: elige qué página quieres que sirva como página de pago (WooCommerce > Ajustes > Avanzado > Configuración de la página)
- Texto del botón: El texto predeterminado del botón «Realizar pedido» se puede modificar mediante un sencillo filtro de WooCommerce en el archivo functions.php de tu tema.
- Campos de dirección: En WooCommerce se puede activar o desactivar la visibilidad de algunos campos. Para un control más avanzado de los campos, se necesita un complemento.
Si necesitas un mayor control, como diseños de campos personalizados, cambios en el diseño o una renovación visual completa, ahí es donde entra en juego SeedProd. El tutorial que aparece a continuación explica el enfoque sin código. Si quieres obtener una visión más amplia sobre cómo optimizar todo tu proceso de pago, consulta los mejores plugins de embudo de ventas para WooCommerce.
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 un creador de sitios web para WordPress con función de arrastrar y soltar. Te permite crear y personalizar visualmente cualquier página en WordPress.
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 cuenta con bloques para páginas de destino específicos para tiendas WooCommerce, entre los que se incluyen botones para añadir al carrito, proceso de pago, carrito de la compra y cuadrículas de productos flexibles. Esto significa que puedes crear fácilmente páginas versátiles de productos, carrito y proceso de pago para tu tienda de comercio electrónico sin necesidad de contratar a un desarrollador. También puedes utilizar SeedProd para personalizar la página de tu tienda WooCommerce mediante el mismo método de arrastrar y soltar.
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
Nota sobre el proceso de pago con bloques de WooCommerce: WooCommerce ahora incluye de forma predeterminada un proceso de pago basado en bloques (desde la versión 8.x). Este tutorial funciona tanto con el proceso de pago con bloques como con el clásico proceso de pago mediante shortcode. Sustituirás el tipo de proceso de pago que esté activo actualmente asignando tu página de SeedProd en el paso 7.
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 el formulario de pago de WooCommerce directamente en el diseño de tu página de destino.
Personalización de los campos de pago de WooCommerce con SeedProd
Al hacer clic en el bloque «Checkout» del editor de SeedProd, la pestaña «Estilo» te permite controlar con precisión el aspecto de tu formulario de pago. Aquí te ocupas del diseño visual: SeedProd se encarga del estilo, mientras que WooCommerce se encarga de los campos que aparecen.
Esto es lo que puedes modificar en la pestaña «Estilo»:
- Diseño: alternar entre diseños de formulario de 1 columna y de 2 columnas
- Encabezado: Tipografía y color
- Campos: color de fondo, color del texto, color del borde, grosor del borde, color de la etiqueta, tipografía de la etiqueta y espaciado entre filas
- Botón: estilo (plano, 2D, vintage, fantasma o enlace), color y radio del borde
- Alertas: Color de resaltado para los mensajes de información, error y éxito
- Carrito: color, ancho y radio del borde; color de fondo; color del texto; fuentes; fuente, color y color de fondo del encabezado
- Sección de pago: color de fondo, color del texto y tipo de letra
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.
Nota: la pestaña «Estilo» solo controla la apariencia. Desde aquí no puedes reorganizar los campos, cambiar las etiquetas de los campos ni ocultar el «Nombre de la empresa». Para realizar cambios a nivel de campo como esos, necesitarás un plugin independiente, como Checkout Field Editor para WooCommerce.
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 excelente de aportar confianza y credibilidad a tu página de pago. Si los clientes potenciales ven que la gente valora positivamente tus productos, es más probable que completen su compra. La encuesta a consumidores realizada por BrightLocal en 2026 reveló que el 85 % de los consumidores afirma que las valoraciones positivas les animan a recurrir a una empresa.
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 > Ajustes > Avanzado > Configuración de la página. Busca el menú desplegable «Página de pago» y selecciona la página que acabas de crear en SeedProd.
No olvide hacer clic en el botón Guardar cambios para almacenar la configuración.
Nota para los usuarios del proceso de pago por bloques: WooCommerce 8.x incluye el proceso de pago por bloques activado de forma predeterminada. Esta configuración sigue funcionando. SeedProd sustituye visualmente la página de pago, independientemente de si antes utilizabas el proceso de pago por bloques o el clásico.
¡Y ya está!
Ahora ya sabes cómo personalizar la página de pago de WooCommerce con el creador de páginas de destino de SeedProd. La integración de SeedProd con WooCommerce facilita el control del diseño de tu tienda online.
El plugin es rápido y no tiene elementos innecesarios. Los principiantes pueden crear una tienda personalizada sin necesidad de contratar a un desarrollador.
Una vez que tu proceso de pago esté activo, también podrás personalizar la página de agradecimiento de WooCommerce para realizar ventas adicionales, recopilar opiniones o fomentar que se comparta en redes sociales tras la compra.
Preguntas frecuentes
¿Cómo elimino campos de la página de pago de WooCommerce?
La pestaña «Estilo» de SeedProd controla el diseño visual de tu formulario de pago, pero no los campos que aparecen. Para eliminar u ocultar campos como «Nombre de la empresa» o «Dirección, línea 2», utiliza un plugin específico para editar campos, como Checkout Field Editor para WooCommerce (hay una versión gratuita disponible).
Si utilizas el proceso de pago clásico con códigos cortos, también puedes eliminar campos mediante un filtro PHP en el archivo functions.php. Este método no funciona con el proceso de pago por bloques.
¿Puedo personalizar el proceso de pago de WooCommerce de forma gratuita?
WooCommerce incluye opciones gratuitas listas para usar: ocultar el campo del cupón, habilitar el pago como invitado o cambiar la página que se utiliza para el proceso de pago. Para realizar cambios en el diseño visual, personalizar la disposición de los campos o eliminar campos específicos, necesitarás un plugin.
SeedProd requiere un plan Pro para poder utilizar las funciones de WooCommerce.
¿Cómo puedo configurar el proceso de pago de WooCommerce en una sola página?
Un proceso de pago de una sola página auténtico muestra el carrito, los datos de facturación y el resumen del pedido en una sola página, sin necesidad de recargar la página. Con SeedProd, puedes crear un diseño con el bloque «Checkout» y asignar esa página como URL de pago en la configuración de WooCommerce.
Para crear una experiencia de carrito y pago en una sola página, combina los bloques «Carrito» y «Pago» en la misma página de SeedProd.
¿Por qué no funciona mi código para personalizar la página de pago de WooCommerce?
Si utilizas filtros de PHP como woocommerce_checkout_fields y no funcionan, lo más probable es que tu tienda utilice el proceso de pago por bloques. Los hooks de PHP que funcionan con el proceso de pago clásico mediante shortcode se ignoran de forma silenciosa en el proceso de pago por bloques.
La solución: vuelve al proceso de pago clásico o utiliza un plugin visual como SeedProd, que sustituye la página de pago sin depender de los hooks de PHP.
¿Funciona SeedProd con el proceso de pago por bloques de WooCommerce?
Sí. SeedProd crea una página de pago totalmente personalizada, y tú la asignas como URL de pago en la configuración de WooCommerce. Esto sustituye el tipo de pago que estuviera activo anteriormente (en bloque o clásico) por tu diseño de SeedProd.
No es necesario cambiar los modos de pago de WooCommerce. SeedProd gestiona el formulario de pago a través de su propia integración con el bloque de WooCommerce.
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.
