¿Verdad que sería genial poder crear enlaces que directamente pongan productos en el carrito? Imagina lo útil que sería poner en el blog de tu web algo así como si quieres comprar este maravilloso producto del que te estoy hablando sólo tienes que pinchar aquí, o quizá incluir un enlace en Facebook que permita a tu audiencia añadir el producto al carrito directamente.
Bueno, pues hay buenas noticias: se puede. En este artículo vamos a ver cómo crear enlaces Añadir al carrito personalizados en WooCommerce, de forma que al pincharlos se ponga en el carrito el producto que hayas enlazado y en la cantidad que hayas establecido.
Y no sólo en tu blog, integrados en el contenido: con esta guía podrás crear páginas de venta, publicaciones en redes sociales o campañas de email marketing con enlaces que directamente vendan el producto. Sí, es cierto, con los shortcodes de WooCommerce puedes añadir un botón Añadir al carrito donde quieras (en tu web), pero esto es mucho más potente ya que estos enlaces funcionan desde fuera de tu web. ¡Vamos a verlo!
Tabla de contenidos
Enlaces para añadir al carrito productos simples
Este es el enlace más sencillo y fácil que podemos realizar de forma personalizada, y permite que tus usuarios añadan una unidad de un producto simple al carrito. Sólo necesitas saber el ID (identificador) del producto. Si no sabes cómo averiguarlo, ya te lo explico yo en este vídeo cortito:
Fácil, ¿verdad? Muy bien, pues una vez que tengas el identificador ya puedes crear una URL personalizada que añada ese producto al carrito directamente de esta forma:
http://www.tutiendachula.com/?add-to-cart=ID
Ahí tienes tu enlace. Puedes enviarlo en un email, ponerlo en Facebook, Twitter, en un post de tu blog o donde te dé la gana. Eso sí, recuerda avisar a tu audiencia de para qué sirve.
Pero, ¿qué pasa si quieres añadir al carrito más de una unidad del producto? Pues no pasa nada, sólo tienes que cambiar mínimamente el enlace por algo así:
http://www.tutiendachula.com/?add-to-cart=ID&quantity=3
Ese enlace pondría tres unidades del producto en el carrito. Claro, la cantidad a continuación de quantity puedes modificarla como te dé la gana para establecer las unidades.
Enlace para añadir el producto al carrito y redirigir después a él
Aún podemos ir un paso más allá, facilitándole a nuestro futuro comprador las cosas más todavía redirigiéndole al carrito después de haber colocado el producto en él. Basta con crear el enlace con la URL del carrito, así:
http://www.tutiendachula.com/carrito/?add-to-cart=ID
Por supuesto, esto es totalmente compatible con lo que ya hemos visto anteriormente para poner en el carrito más de una unidad del producto. Sólo tienes que añadir la variable quantity como ya sabes hacer:
http://www.tutiendachula.com/carrito/?add-to-cart=ID&quantity=3
Sólo tienes que prestar atención a la dirección del carrito. En las últimas instalaciones de WooCommerce en español ya te pone por defecto /carrito/ como URL para la cesta de productos, pero si tu instalación es algo más antigua puede que sea /cart/. En cualquier caso, para comprobarlo sólo tienes que ir al carrito y mirar la URL en la barra de direcciones del navegador.
Enlace que añade un producto al carrito y lleva al checkout
Una vez abierta la caja de Pandora… ¿por qué nos vamos a quedar ahí? ¿Por qué llevar al usuario al carrito, si podemos llevarlo directamente al checkout? ¡Porque podemos! Y es seguro que ya te imaginas cómo:
http://www.tutiendachula.com/finalizar-compra/?add-to-cart=ID&quantity=3
Eso es darle las cosas hechas, ¿no? Del mismo modo que antes, revisa que en tu instalación la pantalla de checkout esté en /finalizar-compra/. Si es más antigua podría estar en /checkout/.
Enlace para añadir un producto al carrito y aplicar un descuento
Para rizar el rizo, podemos crear un enlace que:
- Añada un producto al carrito
- Lleve al usuario a la tienda, al carrito o al checkout, con el producto ya en el carrito
- Aplique un cupón
Eso lo podemos hacer de forma muy sencilla con este plugin, que incluye un generador de enlaces para darnos todo el trabajo hecho:
¿Estás construyendo tu tienda online o eres implementador WordPress?
¿Necesitas plugins de calidad y con soporte para implementar funcionalidades concretas?
Consigue todos los plugins a la venta en la sección de plugins de esta web y todos los que siga añadiendo. Acceso a los 96 plugins (y subiendo) con soporte directo del desarrollador, actualizaciones y uso ilimitado: úsalos en tantas webs como lo necesites.
Enlace para añadir al carrito un producto variable
Bueno, ya has visto lo fácil que es crear un enlace que añada productos simples al carrito. Pero ¿qué hay de los productos variables? Ahora la cosa no es tan sencilla, ya que WooCommerce necesita saber qué variedad del producto debe añadir al carrito.
Para ello hay que indicarle diferentes variables, como el identificador de la variación y el valor de los atributos del producto. Tranquilo, que lo vamos a ver paso a paso.
Identificador de la variación en un producto variable
Dos de los datos que necesitamos para crear el enlace son el identificador de producto (que ya sabemos cómo obtener) y el identificador de la variación. Éste último lo podemos encontrar en la pantalla de edición del producto, en Datos del producto > Variaciones.
Nombre y valor de los atributos del producto
Una vez que tenemos el identificador de producto y el identificador de la variación, sólo nos falta saber el nombre y el valor de los atributos de esa variedad. ¡Ánimo, no es tan complicado y vamos a verlo paso a paso!
Para no complicar las cosas, vamos a ver el ejemplo con un producto variable que tiene sólo un atributo, aunque si quieres hacerlo para un producto con más de un atributo se hace igual. Primero, averiguaremos el nombre del atributo para conocer cómo se llama la variable que hemos de utilizar.
En general, la variable tomará la forma attribute_pa_{nombreatributo}. ¿Te suena a chino mandarín? No te preocupes, ya verás qué fácil es con las imágenes adecuadas. Primero vamos a Productos > Atributos. Ahí, en el cuadro de la derecha, bajo la columna slug, está el dato que buscamos:
Entonces el nombre de la variable que necesitamos utilizar es attribute_pa_color. Visto así no es tan difícil, ¿verdad que no? Vamos ahora a averiguar su valor. Para ello pinchamos en la rueda dentada a la derecha del atributo (se ve en la imagen de arriba) para acceder a los valores del atributo. En este caso usaremos de ejemplo la variedad de color rojo:
Pues ya lo tenemos, necesitamos utilizar la variable attribute_pa_color=rojo. Ahora con todos los datos:
http://www.tutiendachula.com/?add-to-cart=ID&variation_id=ID&attribute_pa_{nombre}={valor}
Por supuesto aquí puedes utilizar todas las variantes que hemos visto antes en cuanto a cantidad y redirecciones, como por ejemplo:
http://www.tutiendachula.com/finalizar-comprar/?add-to-cart=ID&variation_id=ID&attribute_pa_{nombre}={valor}&quantity=6
No era tan difícil después de todo, ¿verdad?
Conclusiones
En realidad hay también un modo de hacerlo con productos agrupados, pero no tiene sentido complicar más la cosa cuando, en realidad, un producto agrupado no es más que varios productos simples en una misma pantalla, y ya sabes cómo se hace para un producto simple.
Como ves no es muy complicado, y además tiene una gran utilidad. Sí, con los shortcodes de WooCommerce te puedes arreglar muy bien en tu propia web, pero sabiendo construir tus propias URL personalizadas podrás crear enlaces a tu tienda que añadan directamente productos al carrito y publicarlos en cualquier sitio, como webs externas, redes sociales, etcétera, o utilizarlos en tus campañas de email marketing, especialmente a la hora de hacer promociones.
Como siempre, si tienes cualquier duda tienes a tu disposición tanto los comentarios como el formulario de contacto.
Próspero ano novo, tive muitos insight’s durante 2016 com os seus artigos e vídeos postados, Obrigado!
Gracias a ti Renato, lo mismo te deseo 🙂
Un abrazo.
Hola!, necesito tu ayuda, cuando uso el boton de agregar directamente a carrito se me va al top de la pagina, me imagino que para hacer la notificación, hay alguna manera de hacer que esta salga como pop up, y que no me mande al top 🙁
Hola Enrique, estoy creando una web para la venta de artículos de automoción y lo primero decirte que me está resultando de gran ayuda la información que brindas, muchas gracias!
Pero de aprender cosas nuevas me surgen dudas jeje. Y esta es la que tengo ahora. Es posible creal un shortcut para añadir un producto al carrito,pero que siga en la misma página donde estaba y en el mismo sitio?
Saludos!
Hola Javier
Me alegra que los contenidos te estén siendo útiles. Sí, no lo he comprobado pero un enlace a #?add-to-cart=ID_producto debería hacer esa función.
Un saludo.
Edito. No, lo acabo de probar y esto no funciona, así que habría que tirar de PHP y usar la función de WordPress get_permalink().
Hola de nuevo Enrique, y gracias otra vez por tu atención. No estoy familiarizado con PHP pero investigaré un poco.
Saludos!
Buenas estoy intentando hacer lo que comentas, pero evidentemente estoy haciendo algo mal, porque me dice: Duration es un campo requerido
Te adjunto el enlace como lo estoy poniento y una captura donde se pueden ver los atributos, en este caso solo estaría activa la suscripción por 1 mes
Muchas gracias por adelantado, y gracias por tu trabajo
Hola Benito
Tendrás que comprobar el slug (1-mes) del atributo duración, parece que es lo que está fallando
Un saludo
Hola Enrique,
¿Es posible añadir varias unidades en un sólo clic como comentas pero que además se aplique un descuento?
Hola Manel
Para hacer eso necesitas este plugin.
Un saludo.
Hola, se pueden agregar varios productos (con distintas ids) con un mismo enlace ? Cómo se podría hacer?
Hola
No, eso no es posible, lo más parecido que se puede hacer es lo que hace este plugin, pero no funciona a través de enlaces.
Un saludo.
Hola Enrique, sabes cómo indicarle a Woocommerce que dos productos comparten el mismo stock? (Cuando uno se termina el otro tampoco está disponible), gracias
Hola Manel
Sí, claro, pero requiere programación: hay que hacer una función que compruebe tras cada venta si se ha comprado uno de los dos productos, y actualice el stock del otro.
Un saludo.
Buenas tardes,
Estoy realizando el enlace de manera que se añade al carrito y se queda en la misma url en la que estoy, el problema es que no me sale arriba el mensaje de se ha añadido al carrito. ¿Que puedo hacer para que salga?
Muchas gracias, un saludo
Hola Javier
No es cosa del enlace, sino (posiblemente) de tu plantilla. Si de das cuenta, al añadir el producto desde la tienda nunca muestra el mensaje.
Un saludo.
Buenas Enrique!
¿Una pregunta, y qué código se utiliza para enviar directamente un producto al checkout sin pasar por carrito?
Yo utilizo elementor y agrego el código pero no termina de funcionar como yo quiero.
Gracias!
Hola Joel
Cómo construir un enlace así está explicado en este mismo post. Si lo que quieres es que el usuario sea dirigido al checkout al añadir un producto al carrito, incluso con los botones estándar de WooCommerce, puedes usar este plugin.
Un saludo.
Enrique tus posts siempre tan útiles y claros. Gracias. De más de un lío me has sacado 😉
Hola qué tal!
Muy buen post!!!
He entrado al sitio que tienes de ejemplo y yo estoy haciendo una tienda así, en donde seleccionas “lo quiero” y después te aparece el mensaje de “ver carrito”.
El problema es que si le picas muchas veces a “lo quiero” se agregan al carrito los articulos, las veces que le piques, pero el cliente no se da cuenta hasta que se dirige al carrito.
Hay alguna forma en la que te aparezca cuántos productos seleccionaste y la opción de elegir más (o de quitar en el caso de que le hayas apretado muchas veces a “lo quiero”) antes de dirigirte al carrito?
Muchas gracias!
Hola Edith
Pues eso depende de cómo estés generando ese Lo quiero. En cualquier caso, el botón estándar de WooCommerce permite seleccionar la cantidad de artículos.
Un saludo.
Hola enrique muy buen sitio! Quería saber como poder agregar en ese mismo enlace un comentario a la compra o algo por el estilo, supongamos que es un producto como una franela o taza que necesito que le usuario me indique el texto que llevara impreso.
Como puedo pasar ese texto, para colocarlo como comentario en el checkout ?
(suponiendo que ya tengo todo el código armado para traerme el texto en el enlace)
Hola Jose
No puedes hacer eso a través de un enlace.
Un saludo.
Hola Enrique! Excelente post. Tengo una duda, ¿sabes si podría crear de manera similar un botón para un producto reservable que tenga un calendario? Pero quiero editar este botón ya que quiero que exclusivamente este me redirija a otra página después de hacer la compra. O si sabes algún proceso mejor para hacer esto. Estoy utilizando el plugin Bookings de WooCommerce.
Gracias de antemano un saludo!
Hola Alberto
Esto en principio no es posible, aunque siempre puedes usar el shortcode [products] para insertar la página de producto donde quieras.
Un saludo
Hola Enrique, excelente post.
Tengo un problemilla, tal vez puedas ayudarme. Intente lo mencionado anteriormente y para un producto simple me funciono perfecto de tal manera mediante php:
/checkout/?add-to-cart=
Ahora el problema viene con un producto variable:
/checkout/?add-to-cart=&variation_id=ID&attribute_pa_{nombre}={valor}
Donde necesito tomar automaticamente el ID de la variación el atributo y su valor correspondiente. No he podido lidiar con ello.
Podrías echarme una mano?
Saludos desde Colombia! 🙂
Hola Andrés
Relee el artículo, está explicado paso a paso.
Un saludo
Buenas Enrique
primero de todo decirte que los productos que te he comprado con anterioridad… todo perfecto! gran trabajo!
estoy implementando el codigo que propones para añadir a la cesta 1 unidad de un producto y que vaya a la pantalla de cesta directamente
/cesta?add-to-cart=1771
pero cuando no hay existencias va a la pantalla y sale “cesta vacia”, sabes si seria posible que anunciara que no se ha podido añadir a la cesta por falta de existencias? o que el boton que creo con el shortcode aparezca o no segun queden existencias, la cantidad siempre es 1 unidad
muchas gracias!
Eduard
Hola Eduard
No es posible hacer eso con algo tan sencillo como un enlace; se puede hacer pero es necesario programarlo como parte del código del shortcode.
Un saludo
Hola Enrique.
Estoy intentando averiguar como hacer dos cosas:
1.- Que pueda seleccionar mediante un formulario cuantas unidades puedo añadir, justo como en el boton inbuilt de la pagina de producto de woocommerce
2.- Que, al pulsar sobre “añadir al carrito” no actualice la página, tal como hacen ciertas plantillas de woocommerce.
Se que esto requiere código y he visto varias soluciones en foros, pero no tengo ni idea de como implementar ajax, o donde implementarlo.
¿Sería mucho pedir una guía rápida de donde hay que poner las funciones y como llamarlas?
Tus guías son muy muy buenas y me estan haciendo aprender mucho, gracias 😀
Buenos días Moisés
Para lo segundo tienes que activar el AJAX al añadir al carrito en las opciones de WooCommerce. En cuanto a lo primero, no conozco ningún plugin para hacer algo así.
Un saludo,
Hola Enrique muchas gracias por tu post, tengo una duda yo tengo el enlace que agrega al carrito y envía al checkout directamente, hasta hay funciona normal, el problema viene es que cada vez que recargo la pagina se me añade un producto mas, osea si recargo la pagina se me añade otro producto y este a su vez el precio se incrementa, hay alguna posibilidad de que esto no ocurra?
hola lograste solucionarlo
hola!, sabes si es posible con un boton incluir un producto y aplicar un codigo de descuento ?? todo al mismo tiempo? saludos y gracias!
Hola Alonso
Sí, puedes hacerlo con este plugin.
Un saludo
hola muy buen aporte, me ayudaste mucho pero tengo una consulta como puedo agregar una descripcion corta por medio de un enlace, hay alguna varibale como quantity para descripcion?
Hola Esteban
No entiendo muy bien lo que quieres hacer. Estos enlaces envían un producto al carrito, no tiene nada que ver con la descripción.
Saludos
Hola Enrique
Genial tu articulo, pero que hacer cuando haces el proceso de los enlaces y siempre te dice (Carrito esta vacio). Si me retrocedo y vuelvo a probar el mismo CTA u otro y allí si funciona, si me agrega el producto y deja seguir el proceso para que el usuario pueda finalizar la compra.
Ya probe barrando la caché, desactive plugins, verifique los ajustes avanzados de Woocommerce, limpie los datos temporales del plugin, revise los estados de WooCommerce pero no funciona bien a la primera
Hola Enrique, excelente post! He insertado el primero link que comenta a un botòn de elementor. Funciona pero siempre me añade 2 productos aunque pongo quantity=1. Si no pongo el valor quantity siempre añade 2 unidades de cualquier producto.
Sabes como podría arreglarlo? Mil gracias!
Hola Enrique, excelente post!, tengo una consulta. Quiero que haya únicamente un producto en la cesta. Por lo tanto si ya tengo un producto “A”pero deseo agregar el producto “C”, quisiera que el “A” se elimine y dejar únicamente el “C”, es posible hacer esto mediante un link?
Tomando en cuenta que “A” lo agregué usando el link que explicas en el post.
El motivo es porque quiero que las personas me compren el producto C, ya que dicho producto es la combinación del A y B a precio reducido.
Espero se entienda 🙂
Hola Jose
No, no es posible hacer eso con un enlace, algo así necesita ser programado.
Un saludo
Hola Enrique. Desde ya gracias por compartir conocimiento. Queria consultarte lo siguiente:
El enlace /checkout/?add-to-cart=(id producto) funciona perfecto para un producto.
Pero, en lugar del “id” del producto, sería posible agregar una variable (o como se llame) que busque entre un rango de ids de productos, a la id del producto que se esta visualizando.
En mi caso la pagina del producto es una plantilla que funciona igual para todos los productos. Si hago un cambio en ella, cambian todos los productos.
Desde ya te agradezco.
Hola Diego
Eso es sólo un enlace, no una función, no puede hacer ese tipo de cosas.
Un saludo
Muchisimas Gracias Enrique! veré como lo soluciono. Saludos
Hola diego lograste solucionarlo también uso plantillas para mi pagina de productos ?
Hola Enrique una pregunta acaso sabrás como añadir dos productos distintos en un enlace, quedo pendiente de tu respuesta gracias