Enlace para añadir producto carrito en WooCoomerce de WordPress

¿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!

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 en donde obtenerlo:

  • Primero tienes que ir a la lista de tus productos de woocommece en la ruta: productos/todos los productos y poner el cursor sobre el producto que deseas obtener el ID se desplegara los detalles del producto y después del título aparecerá el ID.

buscar id de producto woocommerce

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://localhost/tuwebb2/?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://localhost/tuwebb2/?add-to-cart=ID&quantity=3

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://localhost/tuwebb2/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://localhost/tuwebb2/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 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://localhost/tuwebb2/carrito/?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://localhost/tuwebb2/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?,  si tienes cualquier duda tienes a tu disposición tanto los comentarios.

Deja un comentario