WooCommerce: añadir varios productos al carrito desde una tabla de productos

Un cliente que pide diez o cuarenta artículos no debería tener que abrir diez o cuarenta páginas de producto. WooCommerce añade un solo producto por clic; para añadir varios productos al carrito en WooCommerce desde una misma página, una tabla de productos WOOT permite marcar las filas, indicar la cantidad de cada una y enviarlas todas al carrito con un clic. A continuación verás cómo configurarla, qué selecciona realmente «Seleccionar todos», qué ocurre después de añadir y cómo encajan los productos variables.

Configurar la tabla para añadir varios productos al carrito

Todo sucede en la columna Carrito (Cart) (clave de campo add_to_cart). Añádela en la pestaña Columnas (Columns) de la tabla; un shortcode [woot] sin ID de tabla ya la incluye. En un producto simple, la celda contiene:

• un campo de cantidad;
• una casilla que marca el producto para añadirlo;
• el propio botón Añadir al carrito (Add to cart) del producto, con un pequeño contador de cuántas unidades hay ya en el carrito.

La cabecera de la columna contiene una casilla con la información emergente Seleccionar todos los productos (Select all products). En cuanto hay al menos una fila marcada, aparece un botón añadir seleccionados (add selected) sobre la cabecera. La rutina del cliente es esta:

1. Filtrar o buscar en la tabla hasta quedarse con los productos que necesita.
2. Marcar las filas (o la casilla de la cabecera) e indicar la cantidad en cada fila marcada.
3. Hacer clic en añadir seleccionados (add selected).

Todos los productos marcados se envían en una sola solicitud, cada uno con la cantidad de su fila. Las casillas se desmarcan, un mensaje confirma la actualización y se refrescan los contadores y la información del carrito de la tabla. Los textos añadir seleccionados (add selected), Seleccionar todos los productos (Select all products) y Añadir al carrito (Add to cart) se pueden cambiar en el Vocabulario (Vocabulary) del plugin.

Ambos controles de la cabecera necesitan la fila de cabecera. Cuando la tabla se muestra en vista compacta en una pantalla estrecha (la opción Ancho de la vista compacta (Compact view width)), la cabecera se oculta y los clientes añaden los productos uno a uno con los botones de las tarjetas; consulta la tabla de productos en el móvil.

Qué se puede seleccionar: productos simples, variables y agrupados

Así, un cliente puede marcar en la ventana emergente varias variaciones de una misma camiseta y añadirlas juntas, pero no puede marcar un producto variable directamente en la tabla principal, porque WooCommerce necesita saber qué variación añadir. Cómo se ve la ventana emergente y qué columnas muestra se explica en personalizar la ventana emergente de variaciones.

El campo de cantidad respeta los límites del producto: cuando WooCommerce gestiona el stock, el máximo es la cantidad en stock, y un producto vendido individualmente (sold individually) queda fijado en 1. Para las reservas de productos agotados y las cantidades mínimas o máximas, consulta reservas y límites de cantidad.

«Seleccionar todos» añade solo los productos de la página actual

La casilla de la cabecera marca las filas que en ese momento están en la tabla del navegador, es decir, la página actual. Los productos de otras páginas no se cargan hasta que el cliente abre esas páginas, de modo que no se pueden marcar y el plugin no puede añadir «todos los productos de todas las páginas» en una sola acción. Para que los clientes añadan más a la vez, muestra más filas:

• Aumenta Por página por defecto (Per page default) en las Opciones (Options) de la tabla y ofrece valores mayores en Valores por página (Per page values), por ejemplo 25,50,100. En un shortcode: [woot id=12 per_page=50 per_page_sel_pp="25,50,100"].
• Activa Usar botón cargar más (Use load more button). Las filas cargadas con Cargar más (Load More) se añaden debajo de las existentes, de modo que Seleccionar todos (Select all) marca todo lo cargado hasta ese momento.
• Deja que los clientes acoten primero la tabla con el filtro y luego marquen todo en una página.

Mantén las páginas en un tamaño razonable. Cada fila se construye en el servidor y cada producto marcado pasa por las comprobaciones de añadir al carrito de WooCommerce en la misma solicitud, por lo que una página de varios cientos de productos se carga despacio y añadirlos todos puede alcanzar el límite de tiempo del servidor.

Después de añadir: quedarse, abrir el carrito o ir a la caja

La opción Después de añadir al carrito (After to cart adding) de las Opciones de la tabla tiene tres valores: Quedarse en la misma página (Stay on the same page), Redirigir a la página del carrito (Redirect to the cart page) y Redirigir a la página de finalizar compra (Redirect to the checkout page). Se aplica al botón Añadir al carrito (Add to cart) de los productos simples de esa tabla, una vez que WooCommerce ha confirmado que el producto está en el carrito. añadir seleccionados (add selected) y los botones de las ventanas emergentes de variaciones y de productos agrupados mantienen al cliente en la página, lo que conviene a los pedidos al por mayor: añadir varios grupos de productos y después ir al carrito.

Si cada vez que se añade algo desde una tabla debe abrirse el carrito, usa los eventos que la tabla lanza tras una adición correcta en lugar de sustituir sus controladores de clic. Una redirección iniciada en el propio clic se marcha antes de que el producto se añada, lo que se manifiesta como un carrito vacío hasta la siguiente recarga.

/*
 * WOOT: open the cart page after every add from a products table:
 * the Add to cart buttons (also in the variations popup) and "add selected".
 * Child theme functions.php or a code snippets plugin.
 */
add_action('wp_footer', function () {
    ?>
    <script>
    (function () {
        var openCart = function () {
            if (typeof woot_woo_js_vars !== 'undefined') {
                window.location.href = woot_woo_js_vars.cart_link;
            }
        };
        var bulkAdding = false;

        // a product or variation was added with its own button
        document.addEventListener('woot-added-to-cart', openCart);

        // "add selected" was clicked ...
        document.addEventListener('click', function (e) {
            if (e.target.closest('.woot-add-to-cart-all-btn')) {
                bulkAdding = true;
            }
        });

        // ... and the table has reloaded the cart after adding
        document.addEventListener('woot-woo-cart-refreshed', function () {
            if (bulkAdding) {
                openCart();
            }
        });
    })();
    </script>
    <?php
});

Para ir a la caja en su lugar, sustituye cart_link por checkout_link.

Mostrar el carrito junto a la tabla

Los clientes que añaden muchos productos quieren ver lo que han reunido sin salir de la página.

• Mostrar carrito de la tienda (Show shop cart) (Opciones) coloca sobre la tabla un botón con el número de artículos y el subtotal, además de los botones Carrito de la tienda (Shop cart) y Finalizar compra (Checkout). Un clic en el botón de información abre el carrito como una tabla en una ventana emergente, donde se pueden cambiar las cantidades, quitar productos o vaciar todo el carrito. Posiciones del carrito/ordenación (Cart/Sorting positions) elige su lado. Los dos botones se abren en una pestaña nueva; abrirlos en la misma pestaña requiere un pequeño script.
• Los Ajustes (Settings) del plugin deciden qué columnas tiene esta tabla del carrito (Columnas del carrito de la tienda (Shop cart columns)) y pueden ocultar los dos botones (Ocultar botón del carrito de la tienda (Hide shop cart button), Ocultar botón de finalizar compra (Hide checkout button)).
• El shortcode [woot_cart] muestra la misma tabla del carrito en cualquier lugar, por ejemplo en una barra lateral junto a un formulario de pedido.
• Ocultar productos añadidos al carrito (Hide added to cart products) (Opciones) deja fuera de la tabla los productos que ya están en el carrito cada vez que esta carga filas (otra página, un filtro, una recarga), de modo que una lista de pedido larga se va acortando a medida que el cliente avanza.

La tabla actualiza por sí misma su información del carrito. Que el minicarrito del tema, en la cabecera, la siga depende del tema; si no lo hace, consulta el minicarrito no se actualiza tras añadir al carrito.

Si los productos seleccionados no llegan al carrito

• Faltan algunos de los productos marcados. WooCommerce los rechazó, por ejemplo porque la cantidad supera el stock o porque un producto vendido individualmente ya está en el carrito. El motivo se guarda como un aviso de WooCommerce y aparece en la siguiente página que muestre avisos, normalmente la del carrito.
• El carrito de la cabecera cambia solo tras una recarga. Los productos están en el carrito, pero el minicarrito del tema no sigue a la tabla (consulta el artículo sobre el minicarrito enlazado arriba), o una caché de páginas sirve páginas con un carrito antiguo. Excluye de la caché de páginas el carrito, la caja y las páginas con tablas.
• No ocurre nada al hacer clic. Abre la consola del navegador: un error de JavaScript de otro script, o código personalizado que haya sustituido los controladores de clic de la tabla, impide la adición. Elimina ese código y usa los eventos mostrados arriba.
• Un producto variable no tiene casilla. Es lo esperado: abre seleccionar [N] (select [N]) y marca las variaciones en la ventana emergente.

Si el carrito sigue sin recibir los productos seleccionados, abre un tema en el foro de soporte de WOOT con el enlace de la página y los pasos que fallan, y lo revisaremos.