Añadir botón de Añadir al Carrito, Cantidad y Variaciones desde loop de la Tiend

  • Añadir botón de Añadir al Carrito, Cantidad y Variaciones desde loop de la Tiend

    Discusión creada por Lidia Méndez Debén el 11 de diciembre de 2025 en 1:18 PM

    Hola comunidad UXDIVI,

    Estoy actualizando una tienda para un cliente y ya estoy implementando Divi 5, me va todo muy bien, pero el cliente quiere añadir desde las páginas de las categorías, en cada artículo un botón que permita Añadir al Carrito directamente, la Cantidad y si tiene Variaciones sin tener que entrar en el producto.

    ¿Sabéis de algún plugin que haga esto en concreto?

    Estuve probando WooEssential y en caso de no encontrar otro, pondré ese, pero al Seleccionar las opciones en el loop de la página de categorías si es un producto variable, me lleva directamente a la página del producto, en lugar de mostrar las variaciones en cada uno.

    También probé Divi Bodycommerce, pero éste todavía no funcionaba bien con Divi 5.

    ¿Alguna sugerencia?

    El cliente anteriormente usaba Brizzy, un maquetador, pero se le quedaba colgada la web, le iba mal, pero tenía esa función incorporada en los artículos de la tienda.

    Muchas gracias de antemano.

    Saludos!

    Jefferson Maldonado ha respondido hace 21 horas, 11 minutos 2 Miembros · 1 Respuesta
  • 1 Respuesta
  • Jefferson Maldonado

    organizador
    12 de diciembre de 2025 en 4:05 PM

    Hola Lidia

    Buen caso, es una petición bastante común y ahora mismo con Divi 5 hay que enfocarlo bien porque no todo está aún adaptado.

    Te dejo ideas realistas y ordenadas, para que puedas decidir qué nivel de solución aplicar según el proyecto.

    1. Entender la limitación base (importante)

    WooCommerce no está pensado nativamente para mostrar:

    • Selector de cantidad

    • Variaciones

    • Añadir al carrito

    todo junto dentro del loop de categorías.
    Por eso, muchos plugins lo “simulan” o fuerzan comportamientos que acaban redirigiendo al producto, justo lo que te pasa.

    No es que lo estés haciendo mal: es una limitación estructural.

    2. Solución práctica y estable (la que más recomiendo)

    Usar el loop de categorías así:

    • Productos simples → botón “Añadir al carrito” directo

    • Productos variables → botón “Ver opciones” (lleva a la ficha)

    Esto es lo más estable a nivel UX y técnico, y además es lo que hace WooCommerce por defecto por una buena razón.

    Puedes explicárselo al cliente como una decisión de usabilidad:

    “Si hay variaciones, el usuario necesita contexto y elegir bien, por eso se abre la ficha”.

    3. Si el cliente insiste en variaciones en el loop

    Aquí tienes opciones, con sus matices:

    a) WooCommerce Variation Swatches (Premium)
    Permite mostrar variaciones (colores, tallas) en el loop.
    Pros:

    • Funciona bien con categorías

    • No rompe WooCommerce
      Contras:

    • Normalmente no incluye cantidad + add to cart completo en loop

    • No es 100% Divi 5 friendly todavía

    b) WooCommerce Quick View (modal)
    En lugar de meter todo en el loop:

    • Botón “Añadir / Ver opciones”

    • Abre un modal con variaciones + cantidad + add to cart

    Esto suele ser el mejor equilibrio entre:

    • UX

    • Performance

    • Compatibilidad con Divi 5

    Hay plugins específicos de Quick View que funcionan bien incluso sin integrarse al builder.

    4. Por qué WooEssential y similares redirigen

    Lo que viste es normal:

    • El plugin detecta producto variable

    • WooCommerce exige seleccionar variaciones

    • El plugin no puede renderizar todo el formulario en loop
      Resultado: redirección automática.

    No es un bug, es una protección de WooCommerce.

    5. Sobre Divi BodyCommerce

    Coincido contigo:

    • A día de hoy no es buena idea usarlo con Divi 5

    • Aún depende de estructuras de Divi 4
      Mejor esperar versiones compatibles.

    6. Alternativa “semi-custom” (si sabes algo de CSS/JS)

    Algunos proyectos lo resuelven así:

    • Loop normal

    • Botón “Añadir”

    • Al hacer clic, se despliega inline un mini formulario (JS)
      Pero esto ya es desarrollo a medida, no plugin plug-and-play.

    7. Comparación con Brizy

    Brizy hace esto porque:

    • No sigue el flujo estándar de WooCommerce

    • Renderiza formularios completos en loop (a costa de rendimiento)

    Justamente por eso la web “se quedaba colgada”.

    Mi recomendación final

    Para Divi 5 hoy:

    1. Simples → Añadir al carrito en loop

    2. Variables → Quick View o Ver opciones

    3. Nada de BodyCommerce aún

    4. Evitar forzar variaciones completas en categorías

    Es más estable, más rápido y escalable.

Inicia sesión para responder.