How to Add Multiple Products to Cart on Magento 2

If you are a shopper with a long shopping list, adding products to your cart individually would be pretty frustrating. Placing a bulk order or stocking up on essential items would be an annoyingly slow process with such a cumbersome checkout process. Whether you are a developer looking forward to enhancing your store’s user experience, a store owner seeking to streamline the purchasing journey, or a curious Magento enthusiast, this comprehensive guide will walk you through everything you need to know about implementing and optimizing multiple product add-to-cart features. From simple checkbox solutions to advanced custom modules, we shall explore different approachs to transform your Magento 2 store into a conversion powerhouse.

Understanding the Business Benefits

Before diving into the technical implementation, it's essential to understand why adding multiple products to cart functionality is valuable for your eCommerce business:

1. Improved Shopping Efficiency

Shopping gets faster and more convenient as customers can select multiple products without going through the add-to-cart process again and again.

2. Increased Average Order Value (AOV)

Since customers can easily add multiple products, they're more likely to purchase additional items, boosting your AOV.

3. Better B2B Experience

B2B customers often need to purchase multiple products at once, and this functionality is particularly valuable for them.

4. Reduced Cart Abandonment

A cumbersome checkout process is a significant contributor to cart abandonment. By simplifying the initial step of adding items to the cart, you can reduce frustration and encourage customers to complete their purchase.

5. Competitive Advantage

Many eCommerce sites don't offer this feature, giving your store a usability edge over competitors.

6. Catering to Different Purchase Scenarios

Different customers have different needs. A business customer might need to order multiple units of the same product or a variety of SKUs in bulk. A retail customer might want to quickly add several items they've seen on a curated list or during a promotional campaign. Offering multiple methods accommodates these diverse scenarios.

Native Magento 2 Solutions

Magento 2 provides several built-in approaches to implement multiple products to cart functionality:

Quick Order Functionality

Magento Commerce (formerly Enterprise Edition) includes a Quick Order feature specifically designed for B2B customers. This feature allows customers to:

  • Add multiple products by SKU
  • Upload a CSV file with product SKUs and quantities
  • Quickly reorder from previous orders

To access this functionality in Magento Commerce:

  1. Navigate to Stores > Configuration > B2B Features
  2. Enable the Quick Order module
  3. Configure the settings according to your requirements

This functionality isn't available out of the box for Magento Open Source users but can be replicated through custom development or extensions.

Category Page Add to Cart

Magento 2 also allows for adding products to the cart directly from category pages:

  1. Go to Stores > Configuration > Catalog > Category Page
  2. Set the "Add to Cart Button on Category List" to "Yes"

This enables customers to add individual products from category listings without visiting each product page. While this doesn't provide true multi-product selection, it does streamline the shopping process.

Widget-Based Approach

Magento's widget system can be leveraged to create product lists with add-to-cart functionality. Using the Products List widget:

  1. Navigate to Content > Elements > Widgets
  2. Add a new widget of type "Catalog Products List"
  3. Configure the widget to display selected products
  4. Place the widget on the appropriate pages

With some customization to the widget template, you can add checkboxes and "Add Selected to Cart" button to enable multi-product selection.

Extension-Based Solutions

The Magento Marketplace and third-party extension developers offer numerous solutions for adding multiple products to cart.

Popular Extensions Overview

Some popular extensions that provide this functionality include:

1. Mass Product Actions by Amasty

  • Allows customers to select multiple products on category pages
  • Provides bulk add to cart, compare, and wishlist actions
  • Includes AJAX functionality for smooth user experience

2. Quick Order by BSS Commerce

  • Enables customers to add multiple products by SKU or name
  • Provides CSV upload functionality
  • Includes autocomplete for faster product selection

3. Quick Order by MageDelight

  • Offers SKU-based quick order functionality
  • Works on AJAX technology for a smooth user experience
  • Presents with a customizable layout and design

4. Ajax Add to Cart by Aheadworks

  • Provides AJAX-based cart functionality
  • Supports multiple product selection
  • Includes floating cart for improved UX

Understanding MageDelight Quick Order Extension for Magento 2

The MageDelight Quick Order Extension for Magento 2 is engineered to streamline the process of adding multiple products to the cart, particularly for customers who know the SKUs or product names of the items they wish to purchase. It provides a user-friendly interface that significantly speeds up the shopping experience for specific purchase scenarios.

Quick Order

Key Features and How They Facilitate Adding Multiple Products

  • SKU-Based Quick Order: It lets customers directly enter the SKUs (Stock Keeping Units) of the products they want to purchase, along with the desired quantities. This works well for repeat customers, B2B buyers, or anyone with a predefined product list.
  • Product Name-Based Quick Order: Considering the fact that not all customers remember SKUs, the MageDelight extension often includes the ability to search and add products based on their names. As the customer types, the extension typically provides auto-suggestions, making it easy to find and select the desired items.
  • Multiple Row Input: The Magento 2 Quick Order add multiple products interface provides multiple rows for entering different SKUs or product names and their corresponding quantities. Customers can easily add more rows as needed, allowing them to add numerous unique products at once.
  • Ajax-Based Functionality: The extension often utilizes Ajax technology, meaning that product information and cart updates happen without full page reloads. This provides a smoother and faster user experience.
  • Configurable Product Support: The MageDelight Quick Order extension typically supports configurable products. On entering the SKU or name of a configurable product, it may present options (like size, color, etc.) for the customers to select before adding the specific variation to the cart.
  • Out-of-Stock Management: The extension usually provides clear indicators if a requested product or quantity is out of stock, preventing frustration during the ordering process.
  • Customizable Layout and Design: The appearance of the Quick Order interface can often be customized to match your store's branding and design.
  • Guest Customer Support: The Quick Order functionality is usually available to both registered customers and guest users.
  • Integration with Other Magento Features: The extension seamlessly integrates with other Magento features like pricing rules, discounts, and tax calculations.

How the MageDelight Quick Order Extension Enhances Multi-Product Addition?

  1. Direct SKU Input for Efficiency: For customers who know exactly what they need (e.g., restocking items), the ability to directly input SKUs and quantities is incredibly fast and efficient, bypassing the need to browse through categories.
  2. Quick Addition of Multiple Unique Items: Unlike adding items one by one from listing pages, the Quick Order allows customers to add several different products to their cart on a single interface.
  3. Streamlined B2B Ordering: Business customers who often work with product codes will find the SKU-based Quick Order a significant time-saver for placing bulk orders.
  4. Facilitates Repeat Purchases: Returning customers can quickly reorder frequently purchased items by simply entering their SKUs.
  5. Reduces Search Time: For customers who have a specific list in mind but might not want to navigate through the entire catalog, the Quick Order provides a direct route to adding those items.

Example Scenario Using the MageDelight Quick Order Extension:

Imagine a business customer needs to reorder several office supplies. They have a list of the SKUs and quantities they need. Instead of navigating through different stationery categories and adding each item individually, they can simply go to the Quick Order page (provided by the MageDelight extension), enter each SKU and the corresponding quantity in separate rows, and click "Add to Cart." This entire process can take mere seconds, significantly improving their ordering efficiency.

Comparing MageDelight Quick Order with Native Magento Features:

Feature Native Magento 2 "Add to Cart" on Listings Native Magento 2 Product Detail Page MageDelight Quick Order Extension
Adding Multiple Unique Items Yes (one click per item) No Yes (via SKU or Name input)
Adding Multiple Quantities of Same Item No (requires visiting product page) Yes Yes (quantity field per SKU/Name)
Speed for Known Products Moderate (requires browsing) Moderate (requires product page visit) High (direct SKU/Name input)
Best Use Case General browsing, discovering products Adding specific quantities of a single item Repeat orders, B2B, known product lists
SKU Input No No Yes
Product Name Search Yes (via site search) Yes (on product page) Often Included
Bulk Addition Interface No No Yes (multiple rows)


Implementing and Optimizing the MageDelight Quick Order Extension:

  1. Installation and Configuration: Follow the installation instructions provided by MageDelight. Once installed, configure the extension settings according to your store's needs (e.g., enabling SKU and/or name-based search, customizing the layout).
  2. Placement and Accessibility: Ensure the link to the Quick Order page is easily accessible to your customers, typically in the header, footer, or within their account dashboard.
  3. User Guidance: Provide clear instructions or tooltips on the Quick Order page to guide customers on how to use the functionality effectively.
  4. Performance Monitoring: Regularly monitor the performance of the Quick Order page to ensure it loads quickly and functions smoothly, especially during peak traffic times.
  5. Gather Customer Feedback: Encourage customers to provide feedback on their experience using the Quick Order feature and make improvements based on their suggestions.

Evaluating the Right Extension

When selecting an extension to add multiple product to cart in Magento 2, consider the following factors:

  1. Compatibility: Ensure the extension is compatible with your Magento version and other installed extensions.
  2. Feature Set: Look for features like bulk add to cart, CSV upload, quick order forms, and support for all product types.
  3. Performance Impact: Test the extension's impact on page load times and server resources.
  4. Support and Updates: Choose extensions from developers with a track record of regular updates and responsive support.
  5. Price vs. Value: Consider the cost relative to the expected business benefit.
  6. Reviews and Reputation: Check marketplace reviews and community feedback.

B2B-Specific Considerations

B2B customers often have unique requirements for adding multiple products:

Magento B2B Module Features

Magento Commerce B2B Edition includes several features specifically designed for bulk ordering:

  1. Quick Order Functionality: Allows B2B customers to quickly order multiple products by SKU or product name.
  2. Requisition Lists: Similar to wishlists but designed for repeated business ordering.
  3. Order by SKU: Enables customers to add products directly by entering SKUs.

To enable these features:

  1. Navigate to Stores > Configuration > B2B Features
  2. Enable the appropriate modules:
    • Company
    • Shared Catalog
    • Quick Order
    • Requisition Lists
  3. Save configuration and flush cache

Requisition Lists

Requisition lists are particularly useful for B2B customers who regularly order the same products:

namespace Vendor\Module\Controller\RequisitionList;

use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\RequisitionList\Api\RequisitionListRepositoryInterface;
use Magento\RequisitionList\Model\RequisitionListItem\Options\Builder as OptionsBuilder;
use Magento\Catalog\Api\ProductRepositoryInterface;

class AddMultiple extends Action
{
    protected $requisitionListRepository;
    protected $optionsBuilder;
    protected $productRepository;
    
    public function __construct(
        Context $context,
        RequisitionListRepositoryInterface $requisitionListRepository,
        OptionsBuilder $optionsBuilder,
        ProductRepositoryInterface $productRepository
    ) {
        $this->requisitionListRepository = $requisitionListRepository;
        $this->optionsBuilder = $optionsBuilder;
        $this->productRepository = $productRepository;
        parent::__construct($context);
    }
    
    public function execute()
    {
        $listId = $this->getRequest()->getParam('list_id');
        $selectedProducts = $this->getRequest()->getParam('selected_products', []);
        $productData = $this->getRequest()->getParam('product', []);
        
        if (!$listId || empty($selectedProducts)) {
            $this->messageManager->addErrorMessage(__('Invalid request parameters.'));
            return $this->_redirect('*/*/');
        }
        
        try {
            $requisitionList = $this->requisitionListRepository->get($listId);
            
            foreach ($selectedProducts as $productId) {
                try {
                    $product = $this->productRepository->getById($productId);
                    $qty = isset($productData[$productId]['qty']) ? $productData[$productId]['qty'] : 1;
                    
                    $options = $this->optionsBuilder->build($product, []);
                    
                    $requisitionList->addItem($product, $qty, $options);
                } catch (\Exception $e) {
                    $this->messageManager->addErrorMessage(__('Error adding product ID %1: %2', $productId, $e->getMessage()));
                }
            }
            
            $this->requisitionListRepository->save($requisitionList);
            $this->messageManager->addSuccessMessage(__('Selected products were added to the requisition list.'));
        } catch (\Exception $e) {
            $this->messageManager->addErrorMessage($e->getMessage());
        }
        
        return $this->_redirect('*/*/view', ['id' => $listId]);
    }
}

Company Account Management

For company accounts, you can create dedicated ordering interfaces with special features:

namespace Vendor\Module\Block\Company;

use Magento\Framework\View\Element\Template;
use Magento\Framework\View\Element\Template\Context;
use Magento\Company\Api\CompanyManagementInterface;
use Magento\Customer\Model\Session;

class QuickOrder extends Template
{
    protected $companyManagement;
    protected $customerSession;
    
    public function __construct(
        Context $context,
        CompanyManagementInterface $companyManagement,
        Session $customerSession,
        array $data = []
    ) {
        $this->companyManagement = $companyManagement;
        $this->customerSession = $customerSession;
        parent::__construct($context, $data);
    }
    
    public function isCompanyUser()
    {
        $customerId = $this->customerSession->getCustomerId();
        if (!$customerId) {
            return false;
        }
        
        $company = $this->companyManagement->getByCustomerId($customerId);
        return $company !== null;
    }
    
    public function getCompanyId()
    {
        $customerId = $this->customerSession->getCustomerId();
        if (!$customerId) {
            return null;
        }
        
        $company = $this->companyManagement->getByCustomerId($customerId);
        return $company ? $company->getId() : null;
    }
    
    public function getCompanyName()
    {
        $customerId = $this->customerSession->getCustomerId();
        if (!$customerId) {
            return null;
        }
        
        $company = $this->companyManagement->getByCustomerId($customerId);
        return $company ? $company->getCompanyName() : null;
    }
}

Testing and Optimization

Proper testing ensures your implementation works correctly and performs well:

Performance Considerations

For optimal performance when handling multiple products:

1. Use AJAX (Asynchronous JavaScript and XML) Where Possible: Add products asynchronously to prevent full page reloads.

2. Batch Processing: Handle large product quantities in batches:

$batchSize = 20;
$batches = array_chunk($selectedProducts, $batchSize);

foreach ($batches as $batch) {
    foreach ($batch as $productId) {
        // Process product
    }
    $this->cart->save();
}

3. Optimize Database Queries: Minimize database interactions by retrieving products in bulk:

$productCollection = $this->productCollectionFactory->create()
    ->addIdFilter($selectedProducts)
    ->addAttributeToSelect('*');

foreach ($productCollection as $product) {
    // Process product
}

Cache Product Data: Cache product information to reduce database load:

$productData = [];
foreach ($selectedProducts as $productId) {
    if (!isset($productData[$productId])) {
        $productData[$productId] = $this->productRepository->getById($productId);
    }
    
    $product = $productData[$productId];
    // Use product
}

User Experience Testing

Test your implementation across different scenarios:

  1. Various Product Types: Test with simple, configurable, bundle, and grouped products.
  2. Different Quantities: Test with single items and large quantities.
  3. Edge Cases: Test with out-of-stock products, products with custom options, etc.
  4. Error Handling: Ensure proper error messages are displayed when issues occur.

Mobile Responsiveness

Ensure your implementation works well on mobile devices:

@media (max-width: 767px) {
    .quick-order-page .sku-entry-table {
        display: block;
        width: 100%;
    }
    
    .quick-order-page .sku-entry-table thead {
        display: none;
    }
    
    .quick-order-page .sku-entry-table tbody,
    .quick-order-page .sku-entry-table tr,
    .quick-order-page .sku-entry-table td {
        display: block;
        width: 100%;
    }
    
    .quick-order-page .sku-entry-row {
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #ccc;
    }
    
    .quick-order-page .sku-entry-row td {
        padding: 5px 0;
    }
    
    .quick-order-page .sku-entry-row td:before {
        content: attr(data-label);
        font-weight: 600;
        display: block;
        margin-bottom: 5px;
    }
}

Best Practices and Common Pitfalls

UX/UI Recommendations

Follow these best practices for an optimal user experience with Magento 2 add multiple products to cart feature:

  1. Clear Instructions: Provide clear instructions on how to use the multiple add to cart functionality.
  2. Visual Feedback: Show clear visual indicators when products are selected or added to cart.
  3. Progressive Enhancement: Ensure the feature works without JavaScript, with improved functionality when JavaScript is enabled.
  4. Keyboard Navigation: Make the interface accessible via keyboard for improved usability.
  5. Consistent Styling: Maintain consistent styling with the rest of the Magento store.

Security Considerations

Implement proper security measures:

1. Form Key Validation: Always include form key validation to prevent CSRF attacks:

if (!$this->formKeyValidator->validate($this->getRequest())) {
    return $this->resultRedirectFactory->create()->setPath('*/*/');
}

2. Input Validation: Validate all user inputs to prevent injection attacks:

$sku = $this->escaper->escapeHtml($this->getRequest()->getParam('sku'));
$qty = (int)$this->getRequest()->getParam('qty');

3. Access Control: Ensure proper access control for B2B features:

if (!$this->authorization->isAllowed('Magento_Company::manage')) {
    return $this->_redirect('*/*/');
}

Avoiding Common Mistakes

Watch out for these common pitfalls in the functionality of Magento 2 add multiple products to cart programmatically:

  1. Not Handling Product Types Properly: Different product types (configurable, bundle, etc.) may require special handling.
  2. Ignoring Inventory Validation: Always check product availability before adding to cart.
  3. Forgetting Error Handling: Implement comprehensive error handling to provide useful feedback to users.
  4. Performance Issues: Large product quantities can cause performance problems if not handled efficiently.
  5. Neglecting Mobile Users: Ensure the interface works well on mobile devices.

Case Studies


Case Study 1: B2B Manufacturing Supplier

A manufacturing supplies company implemented a custom quick order page that allowed B2B customers to:

  • Enter multiple SKUs at once
  • Upload orders from their ERP system via CSV
  • Save frequently ordered product lists

Results:

  • 35% increase in average order value
  • 28% reduction in order placement time
  • 15% increase in overall sales within three months

Key Takeaway: Streamlining the ordering process for repeat B2B customers significantly improved efficiency and sales.

Case Study 2: Electronics Retailer

An electronics retailer implemented checkbox selection on category pages, allowing customers to select multiple items before adding them to cart.

Results:

  • 18% increase in items per order
  • 22% increase in revenue per session
  • 5% decrease in cart abandonment rate

Key Takeaway: Even simple implementations can yield significant improvements in retail eCommerce settings.

Case Study 3: Wholesale Fashion Distributor

A fashion wholesaler implemented a matrix ordering system that allowed customers to select multiple size/color combinations at once.

Results:

  • 42% faster order completion time
  • 31% increase in order completeness (fewer size/color options missed)
  • 25% reduction in order errors

Key Takeaway: Industry-specific implementations that address unique ordering patterns can provide exceptional results.

Wrapping Up

Implementing Magento 2 add multiple product to cart programmatically can significantly enhance the shopping experience for your customers, leading to higher conversion rates, increased average order values, and improved customer satisfaction. Whether you choose to use native Magento features, third-party Magento 2 extension add multiple products to cart programmatically, or custom development, the key is to focus on creating an intuitive, efficient, and reliable user experience.

For B2B stores, features like quick order forms, CSV uploads, and requisition lists are particularly valuable for streamlining the procurement process. For B2C stores, category-level selection and simplified multi-product interfaces can encourage customers to purchase more items in a single order.

When implementing this functionality, consider performance, security, and user experience. Test thoroughly with different product types and quantities to ensure a robust solution that handles all scenarios properly.

By following the approaches outlined in this guide, you can create a multiple products to cart solution that aligns with your business needs and provides tangible benefits to your bottom line. Remember that the ultimate goal is to make shopping easier and more efficient for your customers – when you achieve that, increased sales will naturally follow.

Whether you're a developer looking to implement this feature, a store owner seeking to understand the options, or an eCommerce manager planning your next site enhancement, we hope this guide has provided valuable insights into adding multiple products to cart in Magento 2.