How to Add Multiple Products to Cart WooCommerce? – 4 Ways

Are you an eCommerce business owner looking to streamline the online shopping experience for your customers? One of the most effective and easiest ways you can try is by letting them add multiple products to their shopping cart from one page. If you are running your business on WooCommerce, you can have different ways to allow customers to add multiple products to their shopping carts.

However, adding multiple products to the cart is not always straightforward, especially for those new to WooCommerce. In this article, we will provide step-by-step guidelines on how to add multiple products to cart WooCommerce. Keep reading to make online shopping a breeze for both you and your customers by offering customers the ability to buy multiple products from a single page.

What does “add multiple products to cart from one page” mean?

“Add Multiple Products to Cart from one page” means the ability to add multiple products to the cart from a single page on an eCommerce website. It is a convenient feature that allows customers to select and purchase multiple items at once, without having to navigate to each single product page to add them to the cart.

This feature saves time and effort for customers and also makes it easier for businesses to upsell related products or bundle deals. In essence, it allows customers to quickly and easily add multiple items to their shopping cart and proceed to checkout with all the items included in one transaction.

Why you should allow customers to add multiple products to cart WooCommerce from one page?

Here are some benefits of allowing customers to add multiple products to the shopping cart from one page in WooCommerce:

• Convenience: Customers can easily browse and add multiple products to the cart without the need to navigate to different pages, making the shopping experience faster and more efficient.
• Increased sales: By making it more convenient for online shoppers to add multiple items to the cart, businesses can increase the likelihood of customers purchasing more items in a single transaction.
• Upsell opportunities: The feature of adding multiple products to the cart from one page can be utilized to recommend related products or bundle deals, encouraging customers to add more items to their cart.
• Better user experience: A streamlined checkout process and easy product selection lead to a better user experience, which results in higher customer satisfaction and loyalty.
• Reduced cart abandonment: A complicated or lengthy checkout process can deter customers from completing their purchase, but the ability to add multiple products to the cart from one page can simplify the process and reduce the likelihood of cart abandonment.

Does WooCommerce allow adding multiple products to the cart from one page by default?

Yes, WooCommerce allows customers to add multiple products to the cart from one page by default.

WooCommerce also provides additional features that allow businesses to enhance this functionality, such as the ability to offer product variations.

However, this default feature of WooCommerce has limited customization options. It does not show variation dropdowns or quantity pickers. This causes a number of issues:

• When it comes to simple products, clicking the add to cart button will only add one item to the customer’s shopping cart. This can reduce your average order value by increasing friction and preventing customers from purchasing in bulk. Consider this: if a customer wants to buy a dozen units of a product from you, they must click the add to cart button 12 times!
• In terms of variable products, the Add to Cart button is replaced by a Select Choices button. This button takes you to the variable product’s single product page. In this case, clients need to go to a separate page to select their product variations. This slows down the purchasing process and may result in higher bounce rates.

If you want to get further advanced adjustment options that make the online shopping experience more convenient and streamlined for customers, you should go for other approaches we discuss in the next section.

How to add multiple products to cart from one page in WooCommerce? – 4 Methods

Below are the top 4 most effective methods to add multiple products to cart from one page in WooCommerce to streamline the shopping experience.

Method #1. Add multiple products to the WooCommerce cart from the shop page (using Woostify’s addons)

The first method is to add multiple products to cart WooCommerce from the shop page. Shop page here means a page displaying many products, such as a category page, product search result page, etc.

As I mentioned earlier, in this case, you can use the default Add To Cart feature of WooCommerce and combine with other additional functions like Variation and Quick View. In this article, I am using Woostify theme Pro to enable Variation Swatches and Quick View add-ons on your WooCommerce shop pages.

Step 1: Enable Add to Cart button on WooCommerce shop page

From the left sidebar menu in your WordPress dashboard, navigate to WooCommerce > Settings > Products tab.

In the Add to cart behaviour section, tick the option “Enable AJAX add to cart buttons on archives” and click on the Save changes button at the page bottom to update your changes.

And now the Add to Cart button will be enabled on the WooCommerce shop page. To get further advanced customizations, you need to install the Woostify theme and/ or edit your theme file.

Download Woostify theme now

Step 2: Further custom the Add to Cart button

Follow the steps below to add multiple products to cart WooCommerce from a shop page.

• Download and install Woostify on your WooCommerce site.
• From your WordPress admin, go to Appearance > Customize.

• On the setting page, click WooCommerce > Shop Archive > ADD TO CART BUTTON

In this section, you can enable the add to cart button and change its position on the shop page.

There are 5 options for you to choose from:

• None: do not select this option, as it will hide the add to cart button on the shop page.
• Bottom: This will show the add to cart button under the product price but without border and background.
• Bottom Visible: This will show the add to cart button under the product price with border and background.
• Image: This will show the add to cart button in the center of the product image with border and background.
• Icon: This will show the add to cart button as a cart icon appearing at the top right of the product image whenever customers hover their mouse over that product.

With the Woostify theme, you can also adjust the color of the add to cart button as follow.

• Once finished, remember to save the changes by hitting the Publish button at the top page.

Step 3: Allow customers to add variable products to their cart from the shop page

As you can see in the picture above, the Add to Cart button of the variable products will automatically turn into “Select options“. This option will drive your customers to the single product page, so they can’t add the product variant to the cart directly from the shop page. To allow online shoppers to add variable products to their cart from the shop page, we can use the Quick View addon of the Woostify Pro version.

Please follow the steps below to enable this feature.

• From the left sidebar menu, go to Woostify > Add-ons.

• Then, scroll down to the Quick View add-on, and turn on the green icon to enable the Quick View feature on your site.

From your WordPress dashboard, head to Appearance > Customize > WooCommerce > Shop Archive > QUICK VIEW BUTTON.

• In this area, you can change the position of the Quick View button, background color, text color, and border radius of the button.
• Once you have finished, click Update to save your changes. Now, let’s look at the store frontend to check if it works properly.

Method #2. Add multiple products to cart in WooCommerce from a single product page with a WooCommerce frequently bought together plugin

The second method to enable the “add multiple products to cart WooCommerce” is by using a WooCommerce frequently bought together plugin. In this tutorial, I will use the Iconic Sales Booster for WooCommerce. With this plugin, you can add the Frequently Bought Together addon to product pages. However, this is a paid plugin that costs $79 per year.

What does it mean by “Frequently Bought Together”?This is a function that displays various products under the primary Add to cart button for the client to choose from. Once customers have selected their desired items, they can click the Add Selected to Cart button, and all of the products they have picked up are added to their cart. It is also compatible with various products and variations.

You manually added the products shown in the ‘Frequently Bought Together’ section. You can, therefore, combine some products together on particular product pages.

So, to allow clients to add multiple products to cart WooCommerce with the Frequently Bought Together feature, simply follow the instructions below.

Step 1: Install Iconic Sales Booster

• This plugin is not available in WordPress plugin library. So you need to buy and download the plugin file to your computer.
• From your WordPress administrator dashboard, go to Plugins > Add New > Upload

• Choose the downloaded zip file, upload it, and then click Activate.
• After activation, you must enter your license key.

Now that we’ve installed Iconic Sales Booster, we can go on to picking products so that customers in your WooCommerce store can add numerous products to their cart.

Step 2: Add products to bundle for selling together

To choose which products to group together in the Frequently Bought Together section, perform the following:

• Go to Products > All Products in your WordPress admin area.
• Select to edit the product you wish to include in the Frequently Bought Together group.
• Scroll down to the Product Data portion of the page (which is normally located behind the main text/product description area).
• Select the Sales Booster tab.

Here, you can make some settings and customizations of the Frequently Bought Together.

• To add a product to a group of Frequently Bought Together, you need to enter the product name, SKU, or ID of the product.
• Click the item when it displays or press Enter to add it.

• Optional: If customers add additional items to their carts in your WooCommerce store, you can optionally offer an additional discount. To do this, enter a numerical amount and choose whether you want a fixed or % discount in the text box next to Discount (optional).
• Last but not least, you may alter the text that appears in the “Frequently Bought Together” section to further entice customers. Simply add the text you want to appear in the Sales Pitch Text area to do this.
• When satisfied, click Update in the Publish section of the page.

Step 3: Preview

Here is the result you can get when trying method #2.

Please take note that the “Frequently Bought Together” feature only appears on product pages where you have added “Frequently Bought Together” products.

Method #3. Add multiple products to the WooCommerce cart from the product table with a WooCommerce product table plugin

The third way to add multiple items from 1 page is to make a table that lists all of your products on a single page. With only one click, the customer can swiftly explore the list, choose the products they want to buy, and add them to their shopping cart.

This approach is quite effective for: Restaurants, retailer wholesale, B2B retailers, and any retailer that handles large purchases.

A typical product table containing a number of products is displayed. The table has columns for the product name, short description, image, price, category, in addition to one place where the client can select the quantity for each item.

Online shoppers can also choose numerous products using the checkbox on the left-hand side of the table, and then use the button at the bottom of the table to add them all to the cart at once.

To do this, we need a product table plugin. In this article, we are using WooCommerce Product Table Ultimate plugin. Follow the steps below to create a table of products.

Step 1: Install and activate the WooCommerce Product Table Ultimate plugin

• After purchasing the plugin, you will receive an email with a download link for the plugin’s.zip file as well as the license key for activating the plugin. Using the link, download the plugin and install it on your WooCommerce site by going to Plugins > Add New.
• Choose the downloaded zip file, upload it, and then click Activate to activate it on your site.
• After activating the WooCommerce Product Table Ultimate plugin, go to WooCommerce > Settings > Product Table Ultimate and click on the Licence link at the top.

Copy and paste the license key into the Licence Key text field, then click the Activate this license button. When you’re finished, make sure you click the Save changes option to proceed.

Step 2: Create a WooCommerce custom product table

• Navigate to WooCommerce > Settings > Product Table Ultimateand hit the General link to make some settings below.

• Columns: You can add numerous columns that will be displayed for products on your custom product table. Using custom fields, you can enter comma-separated values and display as much information as you need on your product table.
• Show quantities on add-to-cart column: In this section, you can display a quantity selector on each product’s row.
• Product Source: Here, you can also choose which WooCommerce products should be shown in product tables.
• Variations Display: Thisdropdown menu allows you to select how product variations are shown on the custom product table.
• Order table byand the Order: In these sections, you can set the order in which products will be listed in the product table.
• Enable add selected button and Enable add all button: Set these options to YES if you want to provide clients with the option to add multiple products to cart WooCommerce at once.
• Override pages: You can override the default shop pages to display custom product tables. For example, if you choose Category pages, all products on your online store’s category pages will be displayed in custom product tables.

• Once finished, make sure to update your changes by clicking on the Save changesbutton.

Step 3: Preview

Take a look at what you have done.

Method #4. Add multiple products to cart WooCommerce via URL

WooCommerce provides you with the ability to do practically anything. Creating a custom link to add multiple things to the cart is part of this. Refer to the process below to learn how to add multple products to cart WooCommerce via URL.

Step 1: Create and copy the function code

Below is the code you will use to create the product URL. Just copy it and we will paste it into your child theme’s functions.php file.

function webroom_add_multiple_products_to_cart( $url = false ) {
        // Make sure WC is installed, and add-to-cart qauery arg exists, and contains at least one comma.
        if ( ! class_exists( 'WC_Form_Handler' ) || empty( $_REQUEST['add-to-cart'] ) || false === strpos( $_REQUEST['add-to-cart'], ',' ) ) {
                return;
        }

        // Remove WooCommerce's hook, as it's useless (doesn't handle multiple products).
        remove_action( 'wp_loaded', array( 'WC_Form_Handler', 'add_to_cart_action' ), 20 );

        $product_ids = explode( ',', $_REQUEST['add-to-cart'] );
        $count       = count( $product_ids );
        $number      = 0;

        foreach ( $product_ids as $id_and_quantity ) {
                // Check for quantities defined in curie notation (<product_id>:<product_quantity>)
                
                $id_and_quantity = explode( ':', $id_and_quantity );
                $product_id = $id_and_quantity[0];

                $_REQUEST['quantity'] = ! empty( $id_and_quantity[1] ) ? absint( $id_and_quantity[1] ) : 1;

                if ( ++$number === $count ) {
                        // Ok, final item, let's send it back to woocommerce's add_to_cart_action method for handling.
                        $_REQUEST['add-to-cart'] = $product_id;

                        return WC_Form_Handler::add_to_cart_action( $url );
                }

                $product_id        = apply_filters( 'woocommerce_add_to_cart_product_id', absint( $product_id ) );
                $was_added_to_cart = false;
                $adding_to_cart    = wc_get_product( $product_id );

                if ( ! $adding_to_cart ) {
                        continue;
                }

                $add_to_cart_handler = apply_filters( 'woocommerce_add_to_cart_handler', $adding_to_cart->get_type(), $adding_to_cart );

                // Variable product handling
                if ( 'variable' === $add_to_cart_handler ) {
                        woo_hack_invoke_private_method( 'WC_Form_Handler', 'add_to_cart_handler_variable', $product_id );

                // Grouped Products
                } elseif ( 'grouped' === $add_to_cart_handler ) {
                        woo_hack_invoke_private_method( 'WC_Form_Handler', 'add_to_cart_handler_grouped', $product_id );

                // Custom Handler
                } elseif ( has_action( 'woocommerce_add_to_cart_handler_' . $add_to_cart_handler ) ){
                        do_action( 'woocommerce_add_to_cart_handler_' . $add_to_cart_handler, $url );

                // Simple Products
                } else {
                        woo_hack_invoke_private_method( 'WC_Form_Handler', 'add_to_cart_handler_simple', $product_id );
                }
        }
}

// Fire before the WC_Form_Handler::add_to_cart_action callback.
add_action( 'wp_loaded', 'webroom_add_multiple_products_to_cart', 15 );


/**
 * Invoke class private method
 *
 * @since   0.1.0
 *
 * @param   string $class_name
 * @param   string $methodName
 *
 * @return  mixed
 */
function woo_hack_invoke_private_method( $class_name, $methodName ) {
        if ( version_compare( phpversion(), '5.3', '<' ) ) {
                throw new Exception( 'PHP version does not support ReflectionClass::setAccessible()', __LINE__ );
        }

        $args = func_get_args();
        unset( $args[0], $args[1] );
        $reflection = new ReflectionClass( $class_name );
        $method = $reflection->getMethod( $methodName );
        $method->setAccessible( true );

        //$args = array_merge( array( $class_name ), $args );
        $args = array_merge( array( $reflection ), $args );
        return call_user_func_array( array( $method, 'invoke' ), $args );
}

Step 2: Edit theme functions.php file

Before making any changes to the Theme File functions.php file, you should create a child theme and activate it instead of the main one. This will help you avoid the unexpected issues happening to your main theme.

• To get access to the functions.php file, from your WooCommerce dashboard, you should go to Appearance > Theme File Editor.

• Paste the code you have copied in the first step in the code editing area

• Hit the Update File button.

Step 3: Preview and check

It’s time to see and test the result. You should visit your WooCommerce store front-end and click on a single product page. Your single product URL for adding multiple products to the shopping cart will look like this:

https://www.example.com/cart/?add-to-cart=12345,43453

As you can see in the ?add-to-cart=12345,43453 part where you add your product ids. If you want to add 2 items of the same product, just type twice its product id:

https://www.example.com/cart/?add-to-cart=12345,12345,12345

How to get the product ID? You can find the product’s ID by navigating to Products > All Products from your WooCommerce dashboard, then hovering the mouse over the product you want to buy. The product ID is under the product name as in the picture below.

Or you can add the following string: “&quantity=3″ in the last part of the URL. The result you can get will look like this:

https://www.example.com/cart/?add-to-cart=12345&quantity=3

Add Multiple Products to Cart WooCommerce: FAQs

How do I add related products to my cart page in WooCommerce?

To add related products to the cart page in WooCommerce, you can use a plugin called “WooCommerce Related Products”. Here’s how to use it:

• Install and activate the “WooCommerce Related Products” plugin from the WordPress plugin repository.
• Go to WooCommerce > Settings > Products > Related Products.
• Check the box for Display on cart page to display the related products on the cart page.
• Customize the settings for related products displayed as desired.
• Save changes, and the related products will now appear on the cart page.

How do I upload multiple products to WooCommerce?

To upload multiple products to WooCommerce, you can use the built-in CSV Importer tool. Here’s how to use it:

1. First, create a CSV file with the product data you want to upload to WooCommerce. You can use Excel or Google Sheets to create the CSV file.
2. Go to WooCommerce > Products > Import.
3. Choose the CSV file you created and click “Upload file and import“.
4. Map the CSV columns to the corresponding WooCommerce product fields.
5. Click “Run the importer” to start importing the products to your WooCommerce site.

How do I create a bundle product in WooCommerce?

To create a bundle product in WooCommerce, you can use a plugin called “WooCommerce Product Bundles”. Here’s how to use it:

1. Install and activate the WooCommerce Product Bundles plugin from the WordPress plugin repository.
2. Navigate to WooCommerce > Products > Add new product.
3. Select “Product Bundle” as the product type.
4. Add the products you wish to include in the product bundle.
5. Customize the bundle pricing, layout, and other settings as desired.
6. Save the bundle product, which will now be available on your WooCommerce store.

Bottom line,

That is how to add multiple products to cart WooCommerce. It is clear that this feature is an essential aspect of any successful eCommerce business. With the ability to add multiple items to the shopping cart from one page, customers can easily navigate through products and make their purchases quickly, leading to increased sales and customer satisfaction.

Additionally, as an online business owner, you can leverage this feature to upsell related products, provide bundle deals, and simplify the checkout process. By following one of the 4 methods outlined in this article, you can enable the Add to Cart button on your WooCommerce shop page and make online shopping a breeze for both you and your customers. So why wait? Start implementing this feature today and watch your business grow.

Please share your thoughts with us by leaving a comment below if you have any questions or recommendations about this topic.