La página de carrito predeterminada de WooCommerce funciona, pero es básica y a menudo no coincide con tu estilo.
Durante nuestras pruebas de varios constructores de páginas, descubrimos que SeedProd facilita sorprendentemente la creación de una página de carrito personalizada sin tocar una sola línea de código.
Hemos explorado las funciones de WooCommerce de SeedProd y descubrimos que personalizar la página de carrito es más simple y potente de lo que esperábamos. Lo que antes requería un desarrollador, ahora se puede hacer con solo unos pocos clics usando su interfaz de arrastrar y soltar.
En esta guía, te mostraremos exactamente cómo crear una página de carrito personalizada de WooCommerce sin necesidad de codificación.
💡Respuesta Rápida: Crea una página de carrito personalizada en 6 pasos
Antes de detallar los pasos, aquí tienes un resumen rápido de los pasos principales que seguirás:
- Instala y activa el plugin SeedProd Pro.
- Crea una nueva página de destino y elige una plantilla inicial.
- Diseña la estructura básica de la página con un encabezado y columnas.
- Arrastra y suelta el bloque principal de 'Carrito' de WooCommerce en tu página.
- Agrega elementos de conversión como testimonios o un temporizador de cuenta regresiva.
- Publica la página y asígnala como tu página de carrito en la configuración de WooCommerce.
¿Por qué crear una página de carrito personalizada de WooCommerce en WordPress?
WooCommerce viene con una página de carrito incorporada. Simplemente instala y activa este plugin, y tu tienda en línea comenzará a usar la página de carrito predeterminada automáticamente.
Cuando tus visitantes tienen artículos en sus carritos, están muy cerca de realizar una compra. Sin embargo, la investigación muestra que **casi siete de cada diez clientes** abandonarán sus carritos y nunca volverán.
Teniendo esto en cuenta, tu página de carrito debe hacer todo lo posible para asegurar la venta.
Al reemplazar el diseño predeterminado con una página de carrito personalizada, a menudo puedes mejorar las tasas de conversión en tu tienda en línea.
Incluso personalizar la página con tu propia marca y logotipo personalizado puede mejorar la experiencia del cliente y aumentar tus tasas de conversión.
Teniendo esto en cuenta, te mostraremos cómo puedes personalizar tu página de carrito de WooCommerce sin código. Aquí tienes un resumen rápido de todo lo que cubriremos en las siguientes secciones:
- How to Create a Custom WooCommerce Cart Page in WordPress (Step-by-Step)
- Tutorial en video
- Bonus Tip: How to Further Improve WooCommerce Cart Page Conversions
¡Vamos a empezar!
Cómo crear una página de carrito de WooCommerce personalizada en WordPress
La forma más fácil de crear páginas personalizadas para tu tienda de WooCommerce es usando SeedProd.
Es el mejor constructor de páginas de WordPress y viene con más de 300 plantillas diseñadas profesionalmente. Estas incluyen plantillas de comercio electrónico para crear páginas de ventas y páginas para recopilar suscripciones por correo electrónico.
Aún mejor, SeedProd ofrece soporte completo para WooCommerce e incluye bloques especiales de WooCommerce que te permiten mostrar tus productos más vendidos, artículos populares, últimas ofertas y más.
Varias de nuestras marcas asociadas han construido sus sitios web completos utilizando el plugin y han recibido excelentes comentarios de sus usuarios sobre los nuevos diseños. Para obtener más información, consulta nuestra reseña de SeedProd.
Paso 1: Instala y activa SeedProd Pro
Ahora, lo primero que necesitas hacer es instalar y activar el plugin. Para más detalles, puedes ver nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Nota: Existe una versión gratuita de SeedProd, pero para esta guía, usaremos la versión Pro porque tiene los bloques de WooCommerce integrados que necesitamos. También se integra con todos los servicios de marketing por correo electrónico que ya podrías estar usando para obtener más ventas y conversiones.
Al activar, naveguemos a SeedProd » Ajustes e ingresemos tu clave de licencia.
Puedes encontrar esta información en tu cuenta en el sitio web de SeedProd. Después de ingresar la licencia, procede a hacer clic en el botón 'Verificar clave'.
Paso 2: Crea una Nueva Página de Destino
Una vez que hayas hecho eso, querrás ir a SeedProd » Landing Pages y hacer clic en el botón ‘Add New Landing Page’.
Después de eso, necesitas elegir una plantilla de página de carrito.
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 según el tipo de campaña.
Cuando encuentres una plantilla que quieras usar, deberás pasar el cursor sobre ella y hacer clic en el ícono de ‘Marca de verificación’.
Para este tutorial, vamos a usar la ‘Plantilla en blanco’ ya que nos permite agregar solo las secciones que queremos.
En la siguiente pantalla, le pondrás nombre a tu página de carrito.
SeedProd creará automáticamente una URL basada en el título de la página, pero puedes cambiar esta URL a lo que quieras.
Cuando estés satisfecho con la información que ingresaste, hagamos clic en el botón ‘Guardar y empezar a editar la página’.
Paso 3: Diseña la estructura de la página del carrito
Esto cargará el constructor de páginas de SeedProd. Es un editor simple de arrastrar y soltar que muestra una vista previa en vivo de tu página de carrito personalizada a la derecha y algunas configuraciones a la izquierda.
💡 Consejo de experto: Si diseñar una página de carrito te parece demasiado trabajo, puedes usar el Constructor de IA de SeedProd para hacerlo más fácil. Todo lo que necesitas hacer es describir el tipo de página de carrito que deseas en pocas palabras, y la IA generará una página de carrito personalizada para ti.
Además, puedes usar las funciones de IA del plugin para generar automáticamente contenido e imágenes, ahorrándote aún más tiempo.
Para empezar, consulta nuestro tutorial sobre cómo crear un sitio web de WordPress con IA.
Para empezar, agregaremos una imagen en la parte superior de la página. Recomendamos usar una imagen que se parezca al encabezado habitual de tu tienda, ya que esto mantendrá tu marca en su lugar y será consistente.
Queremos que la imagen del encabezado ocupe todo el ancho de la página del carrito, así que hagamos clic en el primer diseño en el cuadro 'Elige tu diseño'.
Esto creará un diseño de ancho completo.
Ahora, selecciona el bloque 'Imagen' en el menú de la izquierda y arrástralo al diseño.
Para subir tu imagen, haz clic para seleccionar el bloque 'Imagen'.
En el menú de la izquierda, hagamos clic en 'Usar tu propia imagen' y selecciona una imagen de la biblioteca de medios o sube un archivo nuevo desde tu computadora.
La configuración de la izquierda te permite personalizar aún más la imagen. Por ejemplo, puedes agregar texto alternativo de imagen y cambiar el tamaño de la imagen.
Cuando estés satisfecho con la apariencia del encabezado, puedes hacer clic en el ícono 'Agregar columnas' en la sección 'Arrastra un nuevo bloque aquí'.
Ahora puedes elegir el diseño que deseas usar para el área principal de la página del carrito.
Continúa y haz clic en el diseño de contenido y barra lateral.
Esto te permite crear una sección para tu carrito y un área donde puedes mostrar testimonios de clientes para aumentar las conversiones.
Paso 4: Agrega bloques de carrito de WooCommerce
En el menú de la izquierda, querrás desplazarte hasta la sección ‘WooCommerce’. Aquí, busquemos el bloque ‘Carrito’ y arrástralo a tu diseño.
Después de eso, puedes personalizar cada parte del carrito usando el menú de la izquierda.
Esto incluye cambiar las fuentes, colores, botones y más.
Cuando estés satisfecho con el aspecto del área del carrito, es hora de agregar un bloque de testimonios.
Esta es una forma de prueba social que ayuda a los compradores a sentirse más seguros en su decisión al mostrar que otras personas han tenido una experiencia positiva con tus productos.
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 tu testimonio.
Para hacer esto, simplemente busca el bloque 'Calificación con estrellas' y arrástralo debajo del bloque de testimonios.
Paso 5: Agrega elementos que impulsan la conversión
La escasez puede animar a tus clientes a realizar una compra ahora, en lugar de esperar y arriesgarse a perder la oportunidad. Con esto en mente, es posible que desees agregar un temporizador de cuenta regresiva que cuente los minutos hasta que expire el carrito del visitante.
Para crear esta sensación de urgencia, busca el bloque 'Cuenta regresiva' y arrástralo a la parte superior de tu carrito.
Queremos mostrar un temporizador nuevo a cada visitante, así que querrás abrir el menú desplegable 'Tipo de cuenta regresiva' y seleccionar 'Temporizador para visitante (siempre activo)'.
Esto asegura que la cuenta regresiva comience de nuevo para cada persona, creando un sentido de urgencia genuino y personal.
Por defecto, el temporizador comienza en 30 minutos, pero puedes cambiar esto escribiendo un nuevo número en la sección 'Establecer temporizador para'.
Queremos que los compradores sepan que su carrito expirará cuando el temporizador llegue a 0, así que agreguemos un bloque de 'Encabezado' encima de él.
Luego puedes escribir el texto que deseas mostrar a los compradores.
Puedes animar a las personas a agregar más artículos a su carrito de compras creando una sección de productos populares.
Para promocionar los productos más vendidos de tu tienda, simplemente arrastra y suelta un bloque de 'Productos más vendidos' en tu diseño.
Por defecto, este bloque mostrará tus productos más populares, pero puedes usar la configuración para mostrar productos en oferta, tus productos más recientes y más.
Para hacer esto, simplemente abre el menú desplegable 'Tipo' y elige una nueva opción.
Para más detalles, consulta nuestra guía sobre cómo mostrar productos populares en WooCommerce.
Paso 6: Publica tu página de carrito personalizada
Cuando estés satisfecho con el aspecto de la página del carrito, es hora de publicarla. Haz clic en la flecha desplegable junto a 'Guardar' y luego selecciona la opción 'Publicar'.
A continuación, deberás cambiar la URL del carrito en la configuración de WooCommerce.
Simplemente ve a WooCommerce » Ajustes y luego cambia a la pestaña 'Avanzado'.
En esta pestaña, querrás abrir el menú desplegable 'Página del carrito' y empezar a escribir la URL de tu página personalizada.
Cuando aparezca la página correcta, simplemente haz clic en ella para seleccionarla.
Tutorial en video
Si aprendes mejor de forma visual, quizás quieras ver nuestro tutorial en video sobre cómo crear una página de carrito personalizada de WooCommerce:
Consejo adicional: Cómo mejorar aún más las conversiones de la página de carrito de WooCommerce
Una vez que hayas creado una página de carrito personalizada de WooCommerce, hay muchas maneras de reducir el abandono del carrito y conseguir más ventas. Esto te ayuda a ganar más dinero con tu tráfico existente.
Aquí tienes algunas formas sencillas de hacerlo.
1. Rastrea tus conversiones
El abandono del carrito es un gran problema para todas las tiendas en línea. De hecho, la investigación muestra que casi el 70% de las personas que agregan artículos a su carrito no compran. (Fuente: Estadísticas de abandono de carritos)
El seguimiento de conversiones te ayuda a entender qué funciona en tu página del carrito y qué no. Luego puedes usar SeedProd para ajustar tu página del carrito personalizada para que más clientes completen sus compras.
La forma más fácil de rastrear las conversiones de WooCommerce es con MonsterInsights, el mejor plugin de Google Analytics para WordPress.
Viene con un complemento de comercio electrónico que permite el seguimiento de conversiones con solo unos pocos clics, para que pueda ver sus datos sin escribir código ni salir de su panel.
Para rastrear las conversiones de tu carrito de WooCommerce, consulta nuestra guía paso a paso sobre cómo configurar el seguimiento de conversiones de WooCommerce.
2. Reduce el abandono del carrito con pop-ups temporizados en WooCommerce
También puede reducir el abandono del carrito con una ventana emergente programada. La forma más fácil y efectiva de hacerlo es con OptinMonster, el mejor plugin de ventanas emergentes de WordPress para la generación de leads y la optimización de conversiones.
Su exclusiva tecnología Exit-Intent® muestra ventanas emergentes exactamente cuando un comprador está a punto de abandonar la página del carrito. Incluso puede usar este software para ofrecer a los compradores un código de descuento especial si completan la compra ahora.
OptinMonster tiene un potente conjunto de funciones de segmentación y personalización.
Por ejemplo, si ya le has ofrecido un cupón al comprador, entonces puedes mostrarle un pop-up educativo en su lugar. Por ejemplo, podrías animarle a que se ponga en contacto y haga cualquier pregunta que pueda tener sobre tus productos.
OptinMonster te permite crear diferentes campañas, incluyendo pop-ups, tapetes de bienvenida a pantalla completa, barras flotantes, cajas de desplazamiento y deslizamientos.
Por ejemplo, si un cliente añade un artículo a su carrito y no completa la compra, entonces puedes ofrecerle un cupón para ese producto exacto usando un deslizamiento.
Para más detalles, consulta nuestra guía sobre cómo crear un pop-up de WooCommerce para aumentar las ventas.
3. Impulsa las ventas con notificaciones de actividad social en WooCommerce
Las notificaciones de actividad social muestran todos los productos que los compradores están comprando en tiempo real. Esto puede tranquilizar a los compradores de que eres un sitio web popular y de confianza, y también utilizar el FOMO (miedo a perderse algo) para impulsarles a comprar.
La forma más sencilla de añadir notificaciones de prueba social a tu página de carrito es con TrustPulse. Es el mejor plugin de prueba social para WordPress y WooCommerce y ha demostrado aumentar las conversiones hasta en un 15%.
Nuestras marcas asociadas lo están utilizando para mostrar compras en vivo en sus tiendas, lo que ha mejorado sus tasas de conversión. Para más detalles sobre sus características, consulta nuestra reseña de TrustPulse.
Puedes agregar el plugin a tu sitio en solo unos minutos y comenzar a mostrar una burbuja de notificación cada vez que alguien compra un producto, inicia una prueba gratuita y más.
Para más detalles, consulta nuestra guía sobre cómo usar FOMO en tu sitio de WordPress.
Esperamos que este artículo te haya ayudado a crear una página de carrito de WooCommerce personalizada sin escribir código. También te puede interesar nuestra guía paso a paso sobre cómo personalizar la página de inicio de sesión de WooCommerce 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.
Dennis Muthomi
This guide couldn’t have come at a better time! I’ve implemented custom cart pages across several online stores, and combining SeedProd’s customization with social proof elements has been a game-changer.
One client’s cart abandonment rate dropped by 23% after we added a clean, branded design with testimonials and the TrustPulse notifications. The countdown timer feature mentioned in the article is particularly effective – it creates just enough urgency without being pushy.
Definitely SHARING this comprehensive guide to my colleagues
Pismai Peeters
Por favor, no uses la palabra 'simplemente' en tus publicaciones. Si no sabes cómo hacer algo y estás buscando una solución, nunca es 'simplemente'.... Me pone nerviosa y me hace sentir estúpida, lo cual no soy.
Soporte de WPBeginner
Thank you for your feedback, we will look to improve our phrasing. Everyone has their own knowledge so what can be simple to one person can be complex to another. Our goal is to try to make the steps involved as simple as possible for our users
Administrador
Mrteesurez
El diseño y la apariencia de la página de carrito predeterminada de WooCommerce no es atractiva en la mayoría de los temas, por lo que es esencial aprender a estilizarla o crear una personalizada que esté en línea con el diseño del tema.
Esto dará la oportunidad de eliminar elementos no esenciales de la página. Es bueno que Seedprod pueda hacer esto. Gracias por la guía.