Cómo añadir un carrito de compras a WordPress (sin código) 

Cuando necesité añadir un carrito de compras a WordPress por primera vez, me sentí frustrado. WordPress no incluye un carrito ni un proceso de pago por defecto, y no quería perder tiempo codificando. La buena noticia es que puedes añadir un carrito de compras a WordPress rápidamente con los plugins adecuados.

En esta guía, te mostraré paso a paso cómo añadir un carrito de compras a WordPress usando WooCommerce. También te mostraré cómo personalizar tu página de carrito con SeedProd para aumentar las conversiones y crear una experiencia de pago fluida.

¿Qué es un carrito de compras de WordPress?

Un carrito de compras de WordPress es un plugin que permite a los clientes añadir productos, gestionar sus selecciones y completar el pago, todo sin salir de tu sitio. WordPress no incluye nada de esto de serie.

Una instalación limpia de WordPress no tiene carrito, ni proceso de pago, ni procesamiento de pagos. Necesitas un plugin de comercio electrónico dedicado para añadir esas funciones.

La opción más utilizada es WooCommerce, que es gratuita y potencia los pasos de esta guía. Crea automáticamente páginas de carrito, pago y cuenta cuando la instalas.

¿Cuál es el mejor plugin de carrito de compras para WordPress?

Hay varios plugins de carrito de compras para WordPress disponibles, pero al que siempre vuelvo es WooCommerce, el plugin de comercio electrónico más popular para WordPress.

WooCommerce es un plugin gratuito y de código abierto que te permite vender productos físicos y digitales en tu sitio de WordPress.

Puedes aceptar pagos con tarjeta de crédito con pasarelas de pago como Stripe, PayPal, Amazon Pay y Authorize.net, junto con opciones offline como contra reembolso y cheque.

Cuando llegan los pedidos, gestionas su estado desde el panel de control. Puedes conectar transportistas como USPS y FedEx, y añadir miles de extensiones para ampliar las capacidades de tu tienda.

WooCommerce funciona con cualquier tema de WordPress y es lo que usaré en esta guía. Vamos a ello.

Cómo añadir un carrito de compras a WordPress con WooCommerce

Para empezar, inicia sesión en tu panel de WordPress y ve a Plugins » Añadir nuevo. Busca “WooCommerce” y haz clic en Instalar ahora, luego en Activar.

Después de activar WooCommerce, se inicia el asistente de configuración.

Paso 1: Describe tu negocio

Primero, tendrás que indicar a Woo en qué etapa te encuentras con tu tienda. Para esta guía, haré clic en “Ya estoy vendiendo” y seleccionaré la opción de vender online en el menú desplegable.

A continuación, puedes elegir la plataforma que estás utilizando, que en este caso es WordPress.

Paso 2: Introduce los detalles de tu tienda WooCommerce

La siguiente pantalla te pide más información sobre tu negocio, incluyendo el nombre de tu tienda, la industria y la ubicación. Rellena tus datos y haz clic en Continuar.

Paso 3: Instala las características opcionales de Woo

La siguiente pantalla te permite instalar automáticamente las características recomendadas. Siempre puedes omitir esto por ahora y configurarlas más tarde una vez que hayas tenido tiempo de revisarlas adecuadamente.

El asistente de configuración ha finalizado. Ahora, volverás a tu panel de WordPress, donde podrás empezar a añadir tus productos.

Paso 4: Añade productos a tu tienda WooCommerce

Con tu tienda configurada, ve a WooCommerce » Inicio y haz clic en la opción “Importar tus productos”.

Hay varias formas de añadir productos a WooCommerce:

• Empezar con una plantilla
• Añadir manualmente cada producto
• Importar productos a través de CSV
• Importar productos de otro servicio

Una de las formas más rápidas es importar productos desde un archivo CSV, así que elegiremos esta opción.

Elige tu archivo CSV de productos y haz clic en Continuar.

WooCommerce te pedirá que mapees los campos del CSV con los campos del producto, como imagen, precio y descripción. Una vez mapeados, haz clic en Ejecutar el importador. Dependiendo del número de productos, esto puede tardar unos minutos.

Paso 7: Configurar sus métodos de pago de WooCommerce

Ve a tu administrador de WordPress y haz clic en la pestaña Pagos. Sigue las instrucciones de configuración para cada método de pago. Stripe, PayPal y otros están disponibles como complementos sugeridos. Haz clic en Guardar cambios cuando hayas terminado.

Algo que vale la pena señalar para los lectores que se preguntan por el coste: WooCommerce en sí es completamente gratuito. WooCommerce Payments (para aceptar tarjetas de crédito) también es gratuito, sin cuota mensual. Solo pagas tarifas por transacción.

Si quieres una opción más sencilla, WordPress Simple Shopping Cart es un plugin gratuito para tiendas básicas de PayPal o Stripe sin la configuración completa de WooCommerce.

Ahora que tu tienda WooCommerce está configurada, puede que te preguntes por tu carrito de la compra. WooCommerce crea automáticamente páginas para:

• Página del carrito
• Página de pago
• Página de mi cuenta

No necesitas tomar ninguna medida adicional. Pero con una página de carrito de WooCommerce personalizada, puedes aumentar significativamente las ventas y las conversiones.

Según el Baymard Institute, casi 7 de cada 10 compradores abandonan su carrito antes de completar una compra. Optimizando la página de carrito de WooCommerce por defecto, puedes conseguir más ventas sin aumentar tu tráfico actual.

Cuando los visitantes tienen artículos en su carrito, están muy cerca de finalizar la compra. Tu página de carrito de WooCommerce debería hacer todo lo posible para que eso suceda.

Teniendo esto en cuenta, veamos cómo crear una página de carrito de WooCommerce personalizada con SeedProd.

¿Cómo personalizar una página de carrito de WooCommerce con SeedProd?

Una vez configurado WooCommerce, puedes usar SeedProd, un creador de sitios web de arrastrar y soltar utilizado por más de 1 millón de sitios web, para diseñar una página de carrito de la compra personalizada que convierta mejor.

Te permite crear una página de carrito de WooCommerce personalizada para generar más ventas sin contratar a un desarrollador. También puedes usarlo para crear cualquier página de destino en WordPress, e incluso configurar una página de "próximamente" de WooCommerce antes del lanzamiento.

Tutorial en vídeo

Paso 1: Instalar y Activar SeedProd

Para empezar, instala y activa el plugin SeedProd. Haz clic aquí para empezar con SeedProd.

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

Nota: Existe una versión gratuita de SeedProd, pero para este tutorial usaremos la versión Pro porque incluye los bloques de WooCommerce que necesitamos.

Después de activar el plugin, ve a SeedProd » Ajustes e introduce tu clave de licencia de producto. Puedes encontrarla en el panel de tu cuenta en el sitio web de SeedProd.

Paso 2: Crea una nueva página de carrito personalizada de WooCommerce

Una vez que hayas verificado tu clave de licencia, ve a SeedProd » Páginas y haz clic en el botón ‘Añadir nueva página de destino’.

Verás una biblioteca de plantillas de páginas de destino que puedes usar para añadir rápidamente un diseño prefabricado.

Hay docenas de plantillas diseñadas profesionalmente para casi cualquier objetivo comercial. Pasa el ratón sobre una plantilla y haz clic en el icono de la marca de verificación para seleccionarla.

Usaremos la Plantilla en blanco para esta guía, ya que queremos añadir solo los elementos esenciales de la página.

En la ventana emergente que aparece, introduce un nombre para tu página de carrito de compras. Luego haz clic en Guardar y empezar a editar la página.

Paso 3: Personaliza el Diseño y la Estructura de tu Página de Carrito

Después de nombrar tu página, SeedProd abre el constructor de arrastrar y soltar donde juntarás las partes clave de tu página de carrito.

Añadir un Logotipo

Empieza añadiendo un bloque de imagen para poder subir un logotipo. Puedes ajustar este bloque para que se parezca al encabezado de tu sitio web sin convertirlo en un enlace clicable.

Mantener la coherencia de la marca y ofrecer a los usuarios menos lugares para salir de tu página te ayuda a reducir el abandono del carrito de compras.

Selecciona el Bloque de imagen y arrástralo a la vista previa de tu página en la derecha. Sube un logotipo desde tu ordenador o la biblioteca de medios de WordPress.

Al hacer clic en el bloque se abre el panel izquierdo donde puedes personalizar completamente el tamaño, la alineación y el comportamiento del enlace de tu logotipo.

Añade tu Carrito de Compras

Ahora añade una nueva columna para el diseño de tu página de carrito. Elegimos la opción de contenido y barra lateral en la sección “Elige tu diseño”.

Este diseño te da una sección para tu carrito de compras y un área para mostrar reseñas y testimonios. Añadamos primero el carrito.

Desplázate hacia abajo hasta la sección de bloques de WooCommerce. Arrastra el bloque Carrito a la columna de contenido. Tu carrito de WooCommerce se muestra automáticamente en la vista previa.

Al hacer clic en el bloque puedes personalizar cada parte de tu carrito: etiquetas de los botones, colores, fondos de los campos y más.

Incluye Testimonios de Clientes

Añade el bloque Testimonios de SeedProd para mostrar prueba social y convencer a los usuarios de que completen la compra desde tu columna de barra lateral. Encuéntralo en los bloques Avanzados y arrástralo a su lugar.

Este bloque te da control total sobre el aspecto de los testimonios. Puedes añadir múltiples testimonios, elegir fotos personalizadas y configurar un carrusel deslizante.

Para duplicar la prueba social, a tildeada un bloque de Valoraci ilde{n> con estrellas debajo de sus testimonios.

Desde allí, puedes personalizar el icono de valoración, los colores, la posición y más.

T ilde{cticas de conversi ilde{n> para su p ilde{agina> de carrito

Si desea animar a los compradores a actuar, puede a tildeadir un temporizador de escasez a su carrito. El bloque Temporizador de cuenta atr ilde{s> de SeedProd a tildeade un reloj de cuenta atr ilde{s> personalizado que cuenta hacia atr ilde{s> en tiempo real.

Arrastre el bloque Temporizador de cuenta atr ilde{s> encima de su carrito de compras. En el panel de configuraci ilde{n>, elija la opci ilde{n> Temporizador para visitantes. Esto reinicia el temporizador para cada visitante individual en lugar de usar una cuenta atr ilde{s> global compartida.

Esa distinci ilde{n> es importante porque un temporizador espec ilde{fico> para visitantes crea una urgencia genuina porque est ilde{a> ligado a la sesi ilde{n> de ese comprador, no a una fecha que ya ha pasado. WooCommerce est ilde{a>ndar no incluye esta funci ilde{n>.

En el panel de configuraci ilde{n> Avanzada, puede hacer coincidir los colores del temporizador con el resto del dise tildeo> de su carrito.

A tildeada un titular encima del temporizador notificando a los compradores cu ildea>nto tiempo se reservar ilde{a> su carrito. Arrastre el bloque Titular a su lugar e introduzca su texto.

Recuerde: casi 7 de cada 10 compradores abandonan antes de finalizar la compra. Una cuenta atr ilde{s> visible combinada con prueba social en la barra lateral es una de las formas m ilde{a>s> efectivas de cerrar esa brecha.

Añadir Productos Populares

Otra excelente funci ilde{n> que puede a tildeadir es una secci ilde{n> de productos populares. Esto ayuda a mejorar las ventas recomendando otros productos que podr ilde{a>n> gustarle a sus clientes.

Arrastre el bloque Productos m ilde{a>s> vendidos desde la secci ilde{n> WooCommerce a su p ilde{agina>.

Tambi ilde{n> puede a tildeadir otros bloques de productos a esta ilde{a>rea>, incluyendo:

• Productos Recientes
• Productos en Oferta
• Productos destacados
• Productos mejor valorados

Para más detalles sobre la configuración de estos bloques, consulta nuestra guía sobre cómo mostrar productos nuevos en WooCommerce.

Paso 4: Publica y Conecta tu Página de Carrito Personalizada en WooCommerce

Cuando su dise tildeo> de carrito personalizado est ilde{e> terminado, haga clic en la flecha desplegable junto al bot ilde{o>n> verde Guardar y haga clic en Publicar.

Antes de hacer visible su carrito para los clientes, cambie la URL de su carrito en la configuraci ilde{n> de WooCommerce.

Vaya a WooCommerce ilde{»> Configuración y haga clic en la pesta tildea> Avanzada.

Seleccione la nueva URL de la p ilde{agina> del carrito que cre ilde{o> con SeedProd y haga clic en Guardar cambios.

Despu ilde{s> de hacer clic en el bot ilde{o>n> A tildeadir al carrito en la p ilde{agina> de un producto, los compradores pueden hacer clic en ilde{«> Ver carrito ilde{»> y ver su nuevo dise tildeo> de carrito personalizado.

Para rastrear las conversiones de su carrito de WooCommerce, consulte nuestra gu ilde{a>a> sobre c ilde{o>mo> configurar el seguimiento de conversiones de WooCommerce.

Poner en marcha su carrito es el primer paso. As ilde{i> es como conseguir que convierta.

Cómo optimizar tu carrito de compras de WordPress para más ventas

Una p ilde{agina> de carrito activa es solo el punto de partida. Estas cinco t ilde{cticas> pueden aumentar significativamente el n ilde{u>mero> de compradores que completan realmente su compra.

1. Muestre un icono de carrito en su encabezado. Los compradores que pueden ver lo que hay en su carrito de un vistazo es menos probable que pierdan la pista y se vayan. SeedProd lo soporta de forma nativa con el bloque Carrito de WooCommerce para que el recuento de art ilde{culos> est ilde{e> siempre visible en el encabezado de su sitio.
2. Habilite el pago para invitados. Forzar la creaci ilde{n> de una cuenta antes de finalizar la compra es uno de los mayores puntos de fricci ilde{o>n> en el comercio electr ilde{o>nico>. En WooCommerce, vaya a Configuraci ilde{o>n> ilde{»> Cuentas y privacidad y habilite ilde{«> Permitir a los clientes realizar pedidos sin una cuenta. ilde{»>
3. Muestra precios transparentes. Las tarifas sorpresa al finalizar la compra son el principal motivo por el que los compradores abandonan, según el Baymard Institute. Muestra las estimaciones de envío y cualquier tarifa en la página del carrito, antes de que el cliente llegue a la caja.
4. Añade prueba social cerca del carrito. Los testimonios y las valoraciones de estrellas colocados junto al carrito reducen la vacilación de último minuto que mata las conversiones. El diseño de barra lateral de SeedProd del Paso 3 está hecho exactamente para esto.
5. Optimiza para móviles. La mayoría de las tiendas WooCommerce ven el 60% o más de su tráfico en móviles. Prueba tu carrito en un teléfono antes de publicarlo. El constructor de SeedProd te permite previsualizar y ajustar los diseños móviles sin salir del editor.

Preguntas Frecuentes Sobre Carritos de Compra de WordPress

¿Tiene WordPress un carrito de compras incorporado?

No. WordPress no incluye un carrito de compras por defecto. Necesitas un plugin para añadir funcionalidad de carrito y pago a tu sitio.

WooCommerce es la opción más utilizada. Es gratuito y crea automáticamente páginas de carrito, pago y cuenta cuando lo instalas.

¿Necesito WooCommerce para añadir un carrito de compras a WordPress?

En la mayoría de los casos, sí. WooCommerce es el estándar para el comercio electrónico de WordPress y potencia los pasos de esta guía.

Para tiendas muy sencillas, WordPress Simple Shopping Cart es una alternativa gratuita que maneja transacciones básicas de PayPal y Stripe sin la configuración completa de WooCommerce.

¿Puedo añadir un carrito de compras a WordPress gratis?

Sí. WooCommerce es gratuito, y WooCommerce Payments (para aceptar tarjetas de crédito) no tiene cuota mensual. Solo pagas tarifas por transacción. La configuración básica del carrito de compras y el pago no cuesta nada.

SeedProd también tiene una versión gratuita, aunque los bloques de personalización del carrito de WooCommerce cubiertos en esta guía requieren el plan Pro.

¿Cómo añado un carrito de WooCommerce a una página usando un shortcode?

WooCommerce proporciona el shortcode [woocommerce_cart] para incrustar el carrito en cualquier página. Añade un bloque de Shortcode en el editor de WordPress y pégalo.

Ten en cuenta que esto renderiza el diseño predeterminado del carrito de WooCommerce. Para un diseño personalizado, usa el bloque Carrito de WooCommerce de SeedProd en su lugar.

¿Cómo reduzco el abandono del carrito en mi tienda de WordPress?

Las tácticas más efectivas son habilitar el pago para invitados, mostrar precios transparentes antes del pago y añadir prueba social cerca del carrito. Un temporizador de cuenta atrás específico para el visitante (disponible en SeedProd) también crea una urgencia real sin una fecha límite falsa.

Para un desglose completo de las tácticas de conversión, consulta la sección "Cómo optimizar tu carrito de compras de WordPress para más ventas" de arriba.

Tu tienda WooCommerce está en línea y tu página de carrito está optimizada para conversiones. Si deseas un mayor control sobre cómo convierte tu carrito, SeedProd facilita la creación y prueba de diseños personalizados sin código. Consigue SeedProd ahora para empezar.

También te puede interesar este tutorial paso a paso sobre cómo habilitar el modo de mantenimiento para las páginas de la tienda WooCommerce.

¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.