Cada cierto tiempo recibo un correo electrónico preguntándome si tengo algún plugin para añadir un campo para seleccionar la cantidad desde la página de la tienda en WooCommerce. Y mi respuesta siempre es la misma: no tengo ninguno porque ya hay uno que lo hace muy bien. Y es gratuito.
Así que voy a explicar cómo poder añadir un campo para seleccionar la cantidad del producto y añadirlo al carrito desde las páginas de archivo (ya sabes: tienda, categorías, etiquetas, resultados de búsqueda)… De esta forma podré remitir aquí a todo el que me pregunte a partir de ahora. 🙂
Tabla de contenidos
Comprar desde la página de la tienda
La experiencia de usuario, ésa es la cuestión. Es normal que antes de comprar un online un cliente quiera conocer todos los detalles del producto, ver imágenes, leer bien una descripción completa… Al fin y al cabo, no puede ver ni tocar lo que va a comprar, así que lo único que tiene es la información.
Pero cuando se trata de productos que ya conocen, compras recurrentes, clientes habituales, la cosa cambia: ya saben lo que quieren y lo han comprado otras veces o incluso lo hacen periódicamente. ¿Qué sentido tiene hacerles entrar en los detalles del producto?
La respuesta es ninguno, y por eso WooCommerce incluye un botón Añadir al carrito para productos simples en las páginas de archivo.
¿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.
Añadir un campo de cantidad al botón Añadir al carrito en la tienda
Pero hay un pero: este botón no cuenta con un campo para seleccionar la cantidad. Es simplemente un botón que, al pulsarlo (recuerda marcar la opción Activar botones AJAX de añadir al carrito en los archivos en WooCommerce > Ajustes > Productos > General para que no haya recarga de página) introduce en el carrito una unidad del producto.
Pero a veces, según el tipo de producto de que se trate, esto no es suficiente. Seguramente si vendes cartuchos de tinta tu cliente tenga suficiente con buscar el suyo en la categoría apropiada y pulsar ese botón, pero si vendes maquinillas de afeitar desechables quizá quiera seleccionar una cantidad, con lo que igualmente tendrá que entrar a los detalles del producto sin, en realidad, necesitar hacerlo.
Y aquí es cuando surge esta necesidad.
Quantity Field on Shop Page for WooCommerce
Necesidad que está más que cubierta por un plugin gratuito, sencillo pero terriblemente efectivo: Quantity Field on Shop Page for WooCommerce.
Tan sencillo como que no necesita configuración: basta con activarlo para que los productos simples (piensa que con el resto de productos no tiene tanto sentido) muestren un campo para elegir la cantidad a añadir al carrito en las páginas de archivo (es decir, en la página de la tienda y las de categorías, etiquetas, atributos -si las hay- y resultados de búsqueda).
Vídeo: Añadir el selector de cantidad en la página de la tienda
Como verlo es más fácil que contarlo, aquí te dejo este vídeo para que lo veas por ti mismo:
Excelente plugin muy importante toda la información que ofreces como siempre
Hola buenas enrique, estoy teniendo problemas con el campo de la cantidad de mi página web. Resulta que cuando voy a mi tienda tengo el boton de añadir al carrito pero no me aparece el boton de la cantidad… entonces solo puedo añadir 1 unidad de ese producto y no modificarlo…
Alguna posible solución?
cambiando en el producto que solo se venda por una unidad…
SOLUCIONADO
Hola!, como estas? En mi pagina tengo el problema que el + y el – al hacerle click no modifica la cantidad de mi producto. Pero si escribo en el campo numerico si puedo modificarlo y comprar la cantidad que deseo.
¿Como puedo hacer para que funcionen los botones de sumar o restar?
Hola Lucas
Muchas plantillas ocultan las flechas nativas del input y las cambian por esos botones para que se vean más bonitos. Estos botones suelen funcionar con JavaScript, generalmente con jQuery, con lo que si un error de jQuery interrumpe su ejecución, estos dejan de funcionar. Echa un vistazo a la consola del navegador para ver si es el caso. Si es así (lo cual es muy probable) te dará información sobre qué componente está causando ese error.
Un saludo.
Hola
Interesante post, yo tengoe en mi web el campo cantidad pero deseo que salga arriba la palabra CANTIDAD, Sabes de que forma puedo hacerlo?
Un saludo, Gracias
Hola Mariano
Pues eso depende de cómo lo hayas hecho.
Un saludo
Saludos. el plugin que necesito es para que en la pagina de la tienda siempre me muestre la cantidad adicionada al carro de cada producto.
para poder fácilmente si ya adicione ese producto al carro y cual es la cantidad de ese producto que hay en el carro. tambien me permita aumentar o disminuir la cantidad que hay en el carro de cada producto adicionado.
agradezco si alguien sabe cual puede ser..
gracias
Hola Enrique, a mi me gustaria colocar el añadir cantidad al carrito encima del botón de carrrito en la página de producto simple. Por defecto se coloca a la izquierda. ¿cómo puedo colocarlo encima (arriba del botón)?
Gracias
Disculpa, en mi comentario justo anterior me refería a otro plugin que vi, justo al buscar el que comentas en esta página. Mil perdones!
Igualmente, si me puedes ayudar con este problema te estaría muy agradecida!
Gracias de nuevo! y disculpa la molestia
Saludos,
Virginia
Ha desaparecido el primer comentario, disculpa, quizá es porque llevaba un enlace a la web.
Para no andar con líos lo pongo de nuevo y bien.
Buscando el plugin que comentas aquí, he encontrado otro de un selector de cantidad (+ – ) que me va muy bien, pero tengo un problema y es que aparece en todos los productos de la tienda y necesitaría que solo apareciera en los simples y no en los variables, ya que los variables ya llevan un desplegable con rangos de precios por cantidad y resultaría muy confuso que haya dos selectores.
¿Es posible hacer que ese selector solo aparezca en los productos simples y no en los variables? Si no es así, ¿conoces algún plugin que sí que lo haga?
Muchas gracias de antemano.
Un saludo,
Virginia
Hola Virginia
Lo ignoro, entre otras cosas porque no sé qué plugin estás usando. Deberías consultarlo directamente al desarrollador del plugin.
Un saludo
hola aparece un mensaje de Item Added, en ingles, he buscado con el loco translate, en todos sitios para su traducción al español y no lo encuentro,, por favor, alguna ayuda ? gracias
Hola Linda
Busca con Loco Translate en la plantilla, posiblemente es la que está mostrando ese mensaje.
Un saludo
Buenas noches Enrique he visto una gran cantidad de tus videos por no decir casi todos y en primer lugar quería agradecerte y felicitarte por ello.
Estamos creando una tienda bajo woocommerce y necesito una «función» que no encuentro en ningún pluggin y te escribo dada tu experiencia por si me puedes orientar o echar un cable.
Se trata de que vamos a vender productos cortados a medida, por lo que en la hoja de producto necesitamos tener varias lineas donde se indique: Ancho, Alto, Grosor, Cantidad y que el sistema calcule cuantos m2 está pidiendo en total y multiplicarlo por el precio m2 con el fin de que el cliente vea el total del coste y a nosotros a la hora de hacer el pedido nos llegue todo el desglose.
Además, como versión 2.0. a lo anterior y queriendo ser optimistas de poder hacerlo, nos gustaría poder contar con alguna herramienta que haga el ajuste de cuantos tableros serian necesarios para poder cortar todo lo que el cliente pide y así ver cuanto producto está pidiendo en general y que mermas puede generar para que el cliente decida si se las queda también o no.
Espero haberme explicado con claridad y que me puedas orientar.
Muchas gracias de antemano.
Saludos.
Hola Lidia
Para eso se utiliza un plugin como WooCommerce Measurement Price Calculator. Ahora bien, lo del cálculo de tableros, las mermas, etcétera me temo que no hay nada que lo haga, al menos que yo conozca.
Un saludo
Buenas consulta. Se puede agregar el botón + – con código CSS ?
Saludos
Hola Fernando
Para que esos botones tengan funcionalidad es necesario añadir JavaScript.
Un saludo
Hola!!
Tengo el pluguin y funciona genial, el problema me radica cuando tengo un pak de productos («Una promo formada de varios productos unitarios»), en ese caso el botón se oculta automáticamente.
ufff que bien, graciassss solo tengo meses de experiencia, ya que me dedico mas a desarrollar es en php 5.6 sin framework pero me encanta wordpress y woommcomerce ya tengo mi tiendita online me fantaba eso, y tengo unos encargos y me piden eso, gracias saludos
Hola, muy bueno el video. lo instale y funciona pero al ver la pagina en modo smarphone desaparece que puede ser?
Hola, probé el plugingy el Campo de cantidad NO es visible para productos Variables, solo sirve para productos simples, cómo puedo hacer que se vea el Campo de cantidad en mis productos variables disculpa?
Hola Oscar
No es posible, ya que en un producto variable es necesario seleccionar una variación antes de añadir el producto al carrito.
Un saludo
Cesar Arreaza
Buen contenido. Tengo una duda que parece nadie la tiene. Y es como haces para que aparezca la cantidad de productos que ya llevas en tu carrito.
En ti página aparece en la parte superior derecha. Desde ya muchas gracias
Hola Cesar
Echa un vistazo a esta entrada, puede serte de ayuda.
Un saludo
Hola muy buen contenido tienes en esta web, tengo una pregunta en la actualidad (15/07/2021), aun funciona el plugins pero en mi web me da unos estilos diferentes a los que te dio a ti en el ejemplo, es posible manipular esto? Me refiero a los colores del boton y el tamaño de el + y -, tambien su alinacion hacerlos ver centrado etc..
Hola Daniel
Eso depende de los estilos de la plantilla. Se puede cambiar con CSS personalizado.
Un saludo
Actualmente trabajo con el tema WD Oswad Market, y con CSS logro darle estilos pero solo en modo web, el plugins parece no hacer efecto en modo movil alguna recomendacion?