WooCommerce: add multiple products to cart from a product table

Customers who order ten or forty items should not have to open ten or forty product pages. WooCommerce itself adds one product per click; to add multiple products to the cart in WooCommerce from one page, a WOOT products table lets the customer tick the rows, set a quantity for each and send them all to the cart with one click. Below is how to set it up, what "Select all" really selects, what happens after adding, and how variable products fit in.

Set up the table to add multiple products to the cart

Everything happens in the Cart column (field key add_to_cart). Add it in the Columns tab of the table; a plain [woot] shortcode without a table ID already includes it. For a simple product, the cell holds:

• a quantity field;
• a checkbox that marks the product for adding;
• the product's own Add to cart button, with a small counter of how many are already in the cart.

The header of the column holds a checkbox with the tooltip Select all products. As soon as at least one row is ticked, an add selected button appears over the header. The customer's routine is:

1. Filter or search the table down to the products they need.
2. Tick the rows (or the header checkbox) and set the quantity in each ticked row.
3. Click add selected.

All ticked products are sent in one request, each with the quantity from its row. The checkboxes are cleared, a message confirms the update, and the counters and the table's cart information are refreshed. The texts add selected, Select all products and Add to cart can be changed in the plugin's Vocabulary.

Both header controls need the header row. When the table is shown in compact view on a narrow screen (the Compact view width option), the header is hidden and customers add products one by one with the buttons in the cards; see the product table on mobile.

What can be selected: simple, variable and grouped products

So a customer can tick several variations of one T-shirt in the popup and add them together, but cannot tick a variable product directly in the main table, because WooCommerce needs to know which variation to add. How the popup looks and which columns it shows is covered in customizing the variations popup.

The quantity field follows the product's limits: when WooCommerce manages the stock, the maximum is the stock quantity, and a product sold individually is fixed at 1. For backorders and minimum or maximum quantities, see backorders and quantity limits.

Select all adds the products on the current page only

The header checkbox ticks the rows that are in the table in the browser at that moment, which means the current page. Products on other pages are not loaded until the customer opens those pages, so they cannot be ticked and the plugin cannot add "all products of all pages" in one action. To let customers add more at once, show more rows:

• Raise Per page default in the table's Options, and offer larger values in Per page values, for example 25,50,100. In a shortcode: [woot id=12 per_page=50 per_page_sel_pp="25,50,100"].
• Turn on Use load more button. Rows loaded with Load More are added below the existing ones, so Select all ticks everything loaded so far.
• Let customers narrow the table with the filter first, then tick everything on one page.

Keep pages reasonable. Every row is built on the server and every ticked product goes through WooCommerce's add-to-cart checks in the same request, so a page of several hundred products loads slowly and adding all of them can reach the server's time limit.

After adding: stay, open the cart or go to checkout

The option After to cart adding in the table's Options has three values: Stay on the same page, Redirect to the cart page and Redirect to the checkout page. It applies to the Add to cart button of simple products in that table, after WooCommerce has confirmed the product is in the cart. add selected and the buttons inside the variations and grouped popups keep the customer on the page, which suits bulk ordering: add several groups of products, then go to the cart.

If every add from a table should open the cart, use the events the table fires after a successful add instead of replacing its click handlers. A redirect started on the click itself leaves before the product is added, which shows up as an empty cart until the next reload.

/*
 * 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
});

To go to checkout instead, replace cart_link with checkout_link.

Show the cart next to the table

Customers who add many products want to see what they have collected without leaving the page.

• Show shop cart (Options) puts a button above the table with the number of items and the subtotal, plus Shop cart and Checkout buttons. A click on the info button opens the cart as a table in a popup, where quantities can be changed, products removed or the whole cart cleared. Cart/Sorting positions chooses its side. The two buttons open in a new tab; opening them in the same tab needs a short script.
• The plugin's Settings decide which columns this cart table has (Shop cart columns) and can hide the two buttons (Hide shop cart button, Hide checkout button).
• The [woot_cart] shortcode shows the same cart table anywhere, for example in a sidebar next to an order form.
• Hide added to cart products (Options) leaves products that are already in the cart out of the table each time it loads rows (another page, a filter, a reload), so a long order list gets shorter as the customer works through it.

The table refreshes its own cart information itself. Whether the theme's mini cart in the header follows depends on the theme; if it does not, see mini cart not updating after add to cart.

If selected products do not reach the cart

• Some of the ticked products are missing. WooCommerce refused them, for example because the quantity is higher than the stock or a product sold individually is already in the cart. The reason is saved as a WooCommerce notice and appears on the next page that shows notices, usually the cart page.
• The header cart changes only after a reload. The products are in the cart, but the theme's mini cart does not follow the table (see the mini cart article linked above), or a page cache serves pages with an old cart. Exclude the cart, the checkout and the pages with tables from page caching.
• Nothing happens on click. Open the browser console: a JavaScript error from another script, or custom code that replaced the table's click handlers, stops the add. Remove such code and use the events shown above.
• A variable product has no checkbox. That is expected: open select [N] and tick the variations in the popup.

If the cart still does not receive the selected products, open a topic on the WOOT support forum with the page link and the steps that fail, and we will look at it.