Magento Shopping Cart and Checkout — Complete Sales Workflow

In this tutorial, you'll learn how Magento handles the shopping cart and checkout process, from adding products to the cart through order confirmation, including guest checkout and checkout customization.

What You'll Learn

• How the add-to-cart mechanism works with custom options
• Managing the mini cart and shopping cart page
• The Magento checkout workflow step by step
• Guest checkout configuration and behavior
• Shipping step with address form and method selection
• Payment step with billing address and order summary
• Order review, placement, and confirmation
• Checkout customization with layout XML and Knockout JS

Why It Matters

The checkout process is where revenue happens. Every extra step, every confusing field, every page load reduces conversion rates. Magento's checkout is highly optimized but also highly customizable. Understanding how each step works lets you optimize the checkout flow for your specific store — reducing abandonment and increasing sales.

Real-World Use

An online store notices that 70% of users who add items to the cart do not complete the purchase. The checkout has six steps, requires account creation, and asks for unnecessary fields. By enabling guest checkout, removing an unnecessary step, and pre-filling shipping information from the customer's saved addresses, the store reduces abandonment to 50% — a 20% increase in completed orders.

Learning Path

flowchart LR
  A["Inventory & Stock"] --> B["Cart & Checkout
← You are here"]:::current
  B --> C["Payment Gateways"]
  C --> D["Shipping"]
  D --> E["Tax Configuration"]

  classDef current fill:#38bdf8,color:#0f172a,stroke-width:2px

Add to Cart Mechanism

When a customer clicks "Add to Cart" on a product page, the browser sends a POST request to the Magento server:

POST /checkout/cart/add/
  product: 123
  qty: 1
  options: {color: "red", size: "medium"}
  uenc: aHR0cDovL... (encoded current URL)
  form_key: xyz123

Magento validates the request, checks inventory, creates a quote item, and adds it to the customer's active quote (shopping cart). The response is JSON that includes the mini cart HTML to update the sidebar.

The uenc parameter encodes the current URL so Magento can redirect the customer back after adding. The form_key prevents CSRF Attacks.

Custom options (like engraving text or gift wrapping) are appended to the product as additional parameters. Configurable product selections (size, color) are sent as super_attribute parameters.

Mini Cart

The mini cart appears in the header (desktop) or as a slide-out panel (mobile). It shows:

• Number of items
• Item names, quantities, and prices
• Line item totals
• Subtotal
• Edit and Remove links per item
• Proceed to Checkout button
• View Shopping Cart link

Clicking "Edit" opens a popup or redirects to the cart page where quantities can be changed. Clicking "Remove" deletes the item from the cart.

The mini cart updates dynamically via AJAX when items are added, removed, or quantities change.

Shopping Cart Page

The full shopping cart page (/checkout/cart/) provides a complete overview:

Item list:

• Product image, name, SKU, and custom options
• Unit price and quantity input
• Row total
• Remove and Edit links

Coupon code section:

• Enter coupon code field and Apply button
• Coupon details when applied

Gift card section (Adobe Commerce):

• Gift card code entry

Estimate shipping:

• Country, state, and postal code fields
• Shipping method estimate
• Note: This is an estimate only; the final rate is calculated during checkout

Order totals:

• Subtotal
• Shipping (estimated)
• Discount
• Tax
• Grand total

Checkout Workflow

Magento's checkout is a single-page checkout with distinct sections that expand and collapse. The default checkout has these steps:

Step 1: Shipping Information

The customer enters their shipping address:

• First Name, Last Name
• Company
• Street Address (line 1 and 2)
• City, State, Zip/Postal Code
• Country
• Phone Number
• Email Address (if guest)

If the customer is logged in, saved addresses appear for quick selection. They can also check "Ship to same address" for payment.

Step 2: Shipping Method

After entering the address, available shipping methods are displayed:

• Flat Rate ($5.00)
• Free Shipping ($0.00 - if conditions met)
• Table Rates
• Carrier rates (UPS, FedEx, USPS, DHL)

Each method shows the price and estimated delivery time. The customer selects one.

Step 3: Review and Payment

This step combines payment selection and order review:

• Payment method selection:

  • Credit Card (if gateway configured)
  • PayPal
  • Check/Money Order
  • Bank Transfer
  • Cash on Delivery
  • Purchase Order

• Billing address: Same as shipping or a different address

• Discount code: Apply coupon codes

• Order summary: Items, quantities, totals

Step 4: Place Order

The customer sees:

• Final order totals with all discounts applied
• Terms and conditions checkbox (if enabled)
• Place Order button

Clicking Place Order submits the order. The payment gateway processes the payment (or the order is created as pending for offline methods). The customer is redirected to the success page.

Guest Checkout

Guest checkout lets customers purchase without creating an account. Enable it in Stores > Configuration > Sales > Checkout:

Allow Guest Checkout: Yes

When enabled, guest customers enter their email during the shipping step. They do not need a password. After placing the order, they receive a confirmation email with the order number and a link to check order status.

Guest checkout significantly increases conversion rates. Forcing account creation is one of the top reasons for cart abandonment. The trade-off is that you do not collect customer profiles for guest orders.

Shipping Step Details

The shipping step handles address entry and method selection:

Address form validation:

• Required fields: First Name, Last Name, Street, City, Country, Phone
• Region/State field adapts based on country selection
• Postal code validation per country format

Shipping method carriers:

Magento supports these carriers out of the box:

• Flat Rate — Fixed price per order or per item
• Table Rates — CSV-defined rates by weight, price, or quantity
• Free Shipping — Free above minimum order amount
• UPS — Real-time rates from UPS API
• FedEx — Real-time rates from FedEx API
• USPS — Real-time rates from USPS API
• DHL — Real-time rates from DHL API

Payment Step

The payment step shows available payment methods based on:

• Payment method configuration — Which methods are enabled
• Customer group — Some methods can be restricted to specific groups
• Order amount — Minimum/maximum order amounts per method
• Shipping address — Some methods are restricted by country

The billing address can be set to the same as shipping or entered separately. This is important for payment gateways that require the billing address for fraud checks.

Order Review and Placement

Before the final click, customers review:

• Items ordered and quantities
• Shipping address and method
• Payment method and billing address
• Coupon codes applied
• Order totals (subtotal, shipping, discount, tax, grand total)

The Terms and Conditions checkbox appears if terms are configured in Stores > Terms and Conditions.

After placing the order:

• An order is created in the system
• Inventory is reserved (if MSI configured)
• Payment is processed
• Confirmation email is sent
• Customer is redirected to success page

Checkout Customization

Developers often customize the checkout using:

Layout XML:

<checkout_index_index>
    <referenceBlock name="checkout.root">
        <arguments>
            <argument name="jsLayout" xsi:type="array">
                <item name="components" xsi:type="array">
                    <item name="checkout" xsi:type="array">
                        <item name="children" xsi:type="array">
                            <item name="steps" xsi:type="array">
                                <item name="children" xsi:type="array">
                                    <item name="shipping-step" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <item name="shippingAddress" xsi:type="array">
                                                <item name="component" xsi:type="string">MyModule/js/shipping-address</item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</checkout_index_index>

This replaces the default shipping address component with a custom one.

Knockout JS: Magento's checkout uses Knockout JS components. Each checkout section is a Knockout component with its own view model, template, and logic. Customizing the checkout involves creating new Knockout components.

Common Mistakes

1. Forcing account creation. Requiring customers to create an account before checkout is the leading cause of cart abandonment. Always enable guest checkout. Offer account creation after purchase as an optional step.

2. Too many form fields. Asking for unnecessary fields (fax number, company name for non-business customers, secondary phone) increases friction. Only require fields needed for shipping and payment.

3. Not configuring shipping method visibility. Showing shipping methods that are not applicable (e.g., free shipping without meeting the minimum) confuses customers. Use conditions to show only available methods.

4. Skipping terms and conditions. Without explicit terms and conditions acceptance, customers may dispute charges. Enable the terms and conditions checkbox in Stores > Terms and Conditions.

5. Ignoring checkout performance. Slow checkout pages increase abandonment. Ensure Redis Caching, static content deployment, and server optimization are in place. The checkout page should load in under 2 seconds.

Practice Questions

1. What is the purpose of guest checkout and why is it important? Answer: Guest checkout allows customers to purchase without creating an account. It is important because forcing account creation significantly increases cart abandonment rates. Most first-time customers prefer not to register.

2. What are the four steps in the default Magento checkout? Answer: 1) Shipping Information — address entry and selection, 2) Shipping Method — carrier selection based on address, 3) Review and Payment — payment method, billing address, and order summary, 4) Place Order — final confirmation with terms acceptance.

3. How does Magento handle the add-to-cart request? Answer: The browser sends a POST request to /checkout/cart/add/ with product ID, quantity, custom options, uenc (referrer URL), and form_key (CSRF protection). Magento validates, checks inventory, creates a quote item in the active cart, and returns updated mini cart HTML.

4. Challenge: Analyze the checkout process of three major e-commerce stores (Amazon, a Magento store, a Shopify store). Document every step, field, and interaction. Compare the number of steps, required fields, and overall friction. Based on your analysis, design an optimized checkout flow for a Magento store selling high-end electronics. Justify each design decision.

FAQ

{{< faq "Can I customize the checkout page in Magento?" "Yes. The checkout is fully customizable using layout XML and Knockout JS components. You can add, remove, or modify steps, fields, and interactions. However, customizing the checkout requires advanced {{< ilink "JavaScript" "JavaScript" >}} and Magento development skills." >}}

Mini Project

Your task: Analyze and optimize a Magento checkout flow.

1. Install a fresh Magento Open Source store with sample data.
2. Walk through the checkout as a guest customer:
   • Add a configurable product to the cart
   • Customize the options (size, color)
   • Proceed to checkout as a guest
   • Fill in all shipping fields
   • Select a shipping method
   • Select a payment method
   • Place the order
3. Document every step, every field, every click.
4. Identify three things that could be improved (removed, combined, or optimized).
5. Implement one improvement using layout XML (e.g., removing a field, reordering steps, or adding inline validation).
6. Test the improved checkout.

This exercise teaches you to see checkout through the customer's eyes and fix real friction points.

What's Next

Now that you understand checkout, learn about payment gateway integration:

Continue to Lesson 10: Payment Gateways — PayPal, Stripe, Braintree and offline methods.

Related lessons:

• Shipping — Configure shipping methods and carriers
• Orders, Invoices and Shipments — Process orders after checkout
• {{< ilink "JavaScript" "JavaScript" "JavaScript" >}} — Knockout JS for checkout customization