WooCommerce

URL para añadir al carrito en WooCommerce (directa)

Jefferson Maldonado
Por Jefferson Maldonado 24 May 2022 7 min de lectura 2 comentarios

En este videotutorial te mostramos cómo crear una URL para añadir un producto al carrito en WooCommerce de forma directa. Aprenderás a generar enlaces personalizados para que se agreguen uno o más productos al carrito sin que el usuario tenga que ir a la página del producto primero.

Quizá te pueda interesar saber cómo añadir productos a carrito y redirigir a finalizar compra automáticamente con un plugin premium y múltiples opciones.

Además, también podrás crear URLs que, al añadir al carrito, redirijan directo al carrito o a finalizar compra, en función de lo que necesites.

Este tutorial explica cómo lograr eso para productos simples, y también para tipos de productos variables.

¿Cuándo usar URLs directas de añadir al carrito?

Las URLs de añadir al carrito son especialmente útiles en estos casos de uso:

  • Campañas de email marketing: incluir en el correo un botón que añade el producto directamente al carrito reduce la fricción del proceso de compra y mejora la conversión.
  • Páginas de aterrizaje: en una landing page enfocada en un solo producto, este tipo de URL permite ir directo al checkout sin pasar por la tienda.
  • Upsells y cross-sells manuales: incluir un enlace en el contenido del post o en la descripción del producto que añade directamente un producto complementario.
  • Botones en cualquier parte del sitio: puedes colocar un botón «Comprar ahora» en cualquier página o widget sin necesidad de mostrar el módulo de tienda completo.

URL Añadir a carrito para productos simples

Los productos simples son muy fáciles de añadir al carrito a través de una URL personalizada. Simplemente busca el ID del producto colocando el cursor sobre el título del producto en WooCommerce > Productos y luego usa los siguientes patrones de enlace.

Cómo encontrar el ID de producto en WooCommerce

URL para añadir un producto simple:

https://tudominio.com/?add-to-cart=25

Asegúrate de cambiar el dominio y el número 25 por el ID real del producto. Se agregará 1 unidad del producto al carrito.

URL para añadir un producto simple con cantidad de 5 unidades:

https://tudominio.com/?add-to-cart=25&quantity=5

Se agregará 1 producto con ID = 25 y cantidad = 5 al carrito. Nota: no puedes agregar 2 productos diferentes al carrito con una sola URL.

URL para añadir un producto simple y luego redirigir al carrito:

https://tudominio.com/carrito/?add-to-cart=25

Importante: si has cambiado la URL del carrito, asegúrate de ajustar /carrito/ por la URL que le hayas asignado a esa página. Para que esto funcione, también debes marcar la opción «Habilitar botones para agregar AJAX al carrito en archivos» en WooCommerce > Configuración > Productos > General.

URL para añadir un producto simple y luego redirigir a finalizar compra:

https://tudominio.com/finalizar-compra/?add-to-cart=25

Para que funcione, debes habilitar el AJAX en WooCommerce y deshabilitar «Redirigir a la página del carrito después de una adición exitosa»:

Configuración de WooCommerce para URL añadir a carrito

URL para añadir a carrito a productos variables

Para productos con variaciones (talla, color, etc.) el proceso es más sencillo de lo que parece: solo necesitas el ID de la variación específica, no el ID del producto padre.

ID de variación en WooCommerce

Una vez que tienes el ID de la variación, puedes usar las mismas URL que para los productos simples, simplemente sustituyendo el ID del producto por el ID de la variación:

URL para añadir un producto variable al carrito:

https://tudominio.com/?add-to-cart=88

Aquí estamos agregando solo el ID de la variación (88) según el ejemplo en la imagen anterior.

URL para añadir un producto variable al carrito con cantidad de 5 unidades:

https://tudominio.com/?add-to-cart=88&quantity=5

URL para añadir un producto variable y luego redirigir al carrito:

https://tudominio.com/carrito/?add-to-cart=88

URL para añadir un producto variable y luego redirigir a finalizar compra:

https://tudominio.com/finalizar-compra/?add-to-cart=88

Resumen de todos los patrones de URL

Para que tengas todo en un solo lugar, esta tabla resume los patrones más comunes:

AcciónPatrón de URL
Añadir simple (sin redirigir)/?add-to-cart=ID
Añadir simple con cantidad/?add-to-cart=ID&quantity=N
Añadir + ir al carrito/carrito/?add-to-cart=ID
Añadir + ir a checkout/finalizar-compra/?add-to-cart=ID
Variación (mismo patrón)/?add-to-cart=ID_VARIACION

Solución de problemas frecuentes

Si la URL no funciona como esperas, revisa estos puntos:

  • El producto no se añade: verifica que el ID del producto (o variación) sea correcto. Puedes comprobarlo al pasar el cursor por el nombre en WooCommerce > Productos.
  • Redirige al carrito en lugar de a checkout: desactiva la opción «Redirigir a la página del carrito después de una adición exitosa» en la configuración de WooCommerce.
  • El producto se añade pero el carrito queda vacío al ver la tienda: puede ser un conflicto de sesión o de caché. Prueba desactivando el caché temporalmente.
  • La URL no funciona para un producto variable: asegúrate de estar usando el ID de la variación específica, no el ID del producto padre variable.

También puedes combinar este sistema con el botón de añadir al carrito en la tienda de Divi para una experiencia de compra más completa. Y si necesitas personalizar el texto de ese botón, tenemos un tutorial específico sobre cómo cambiar el texto de «añadir al carrito» en WooCommerce.

Usar estas URLs en campañas de email marketing

Uno de los casos de uso más efectivos de las URLs directas de añadir al carrito es el email marketing. Cuando un suscriptor recibe un correo con un botón «Comprar ahora» que añade directamente el producto al carrito, se elimina la fricción habitual de llegar a la tienda, buscar el producto y añadirlo manualmente. Ese paso extra tiene un impacto directo en la conversión.

Para aprovechar esto al máximo:

  • Black Friday y campañas de temporada: en lugar de enviar a la página de la tienda, el botón del correo lleva directamente al carrito con el producto agregado y redirige al checkout. El usuario solo tiene que ingresar sus datos de pago.
  • Secuencias de recuperación de carrito abandonado: si usas una herramienta de automatización de email, puedes construir la URL con el producto que el usuario dejó en el carrito y enviársela con un descuento adicional.
  • Upsells post-compra: en el correo de confirmación de pedido, incluye un botón para añadir un producto complementario al siguiente pedido. Es una de las técnicas con mejor ROI en eCommerce.

Herramientas como MailerLite, ActiveCampaign o Klaviyo te permiten incluir este tipo de URLs directamente en los botones de los correos. Solo asegúrate de que la URL incluya el protocolo completo (https://) para que el botón funcione correctamente en todos los clientes de email.

Si estás usando WooCommerce para tu tienda y quieres una visión completa de cómo optimizar el flujo de compra, revisa la actualización de módulos de carrito y checkout de Divi que explica cómo integrar estos elementos de forma visual.

Preguntas frecuentes

¿Puedo añadir varios productos al carrito con una sola URL?

No directamente con el parámetro estándar de WooCommerce. Para añadir múltiples productos con una sola URL necesitas un plugin adicional como «Direct Checkout for WooCommerce» o similares. Con la URL estándar solo puedes añadir un producto (o variación) a la vez, aunque puedes especificar la cantidad.

¿Estas URLs funcionan con cupones de descuento?

No de manera nativa. Sin embargo, puedes combinar la URL de añadir al carrito con la URL de aplicación de cupón usando el parámetro coupon_code en algunos plugins de carrito avanzado. La integración estándar de WooCommerce no incluye esto, pero hay extensiones que lo permiten.

¿Funciona este método con suscripciones de WooCommerce?

Sí, en la mayoría de los casos. Los productos de suscripción de WooCommerce Subscriptions tienen su propio ID de producto y puedes usar la misma estructura de URL. Sin embargo, algunos tipos de suscripción con trials o configuraciones especiales pueden requerir ir a la página del producto para configurar correctamente la suscripción antes de añadirla al carrito.

Conclusiones

Como ves, crear una URL personalizada para añadir al carrito es bastante sencillo y útil si quieres crear elementos dinámicos en tu sitio. Este sistema fue el que usamos para crear las URLs personalizadas de nuestros cursos de venta individual, y ha funcionado muy bien.

Para completar el flujo de tu tienda, combina esta técnica con el tutorial de cómo cambiar el texto del botón «añadir al carrito» y cómo agregar el botón directamente en la tienda de Divi. Los tres tutoriales juntos resuelven los casos de uso más comunes del carrito en WooCommerce con Divi.

¿Quieres ir más allá? En nuestro tutorial premium de redirección a checkout cubrimos variantes más avanzadas con plugins y automatización del flujo de compra.

// ¿Te sirvió este tutorial?

Imagina lo que aprenderás
con los cursos completos

En UXDivi llevamos los tutoriales del blog al siguiente nivel: proyectos reales de principio a fin, recursos descargables y soporte directo conmigo. Todo por menos del costo de un curso individual en otra plataforma.

+44 cursos +1116 alumnos 4.7 en Trustpilot Garantía 7 días
Jefferson Maldonado
// Escrito por

Jefferson Maldonado

UX Director · Founder UXDivi, MUX Studio y UXDivi Templates

UX Director | fundador de UXDivi y MUX Studio

Comentarios

2 comentarios

Para dejar un comentario, accede a tu cuenta de UXDivi.

Acceder a mi cuenta
Alejandro Hace 4 años

Hola y si quiero agregar dos o tres productos al mismo tiempo en un solo link, cómo se podría hacer. ??

Jefferson M. Autor Hace 4 años

Que tal Alejandro, usariamos la misma URL pero agregando una variable de cantidad al final de la URL personalizada, por ejemplo:

href=”https://yourdomain.com/?add-to-cart=25&quantity=3″

href=”https://yourdomain.com/cart/?add-to-cart=25&quantity=5“

href=”https://yourdomain.com/checkout/?add-to-cart=25&quantity=2“

Espero que esta info te sea de ayuda. Para cualquier otra cosa, aquí me tienes 😉🖐