How to Reduce Cart Abandonment: Checkout UX Strategies for E-Commerce

What is cart abandonment and how do you reduce cart abandonment?

Cart abandonment is the share of shoppers who add products to their cart but leave without placing an order. To reduce cart abandonment, you show all costs early, allow guest checkout, cut form fields, reinforce trust at the payment step and send timely recovery emails to shoppers who left.

I have worked on e-commerce projects since 2012. In almost every store, the biggest leak sits between the cart and the final payment button. This guide focuses only on that stretch. Product pages and visual language are separate topics, so I leave them out here. For numbers, I rely on public research from the Baymard Institute.

How do you calculate your cart abandonment rate?

First, the formula is simple. Divide completed orders by sessions that created a cart, then subtract the result from one. For example, if 1,000 carts lead to 300 orders, your rate is 70 percent. That is a sample calculation; your own store will show a different figure.

However, clean tracking matters more than the formula. Specifically, in many stores the cart event never fires, or it fires twice. Therefore, check your GA4 setup first. Google's GA4 ecommerce measurement guide defines the events you need.

• add_to_cart: the shopper added a product.
• begin_checkout: the shopper entered checkout.
• add_shipping_info: the shopper completed delivery details.
• add_payment_info: the shopper picked a payment method.
• purchase: the order went through.

As a result, you get a step by step map of losses instead of a single number. Without that map, every change you make is a guess, because you cannot tell which step leaks.

What is the average cart abandonment rate?

The Baymard Institute combines 50 studies and reports an average documented cart abandonment rate of 70.22 percent. In other words, about seven in ten shoppers who add something to their cart leave without buying. Source: Baymard Institute cart abandonment statistics.

That said, do not treat this figure as a target. Industry, order value, device mix and traffic source all move the number. For instance, cold ad traffic behaves very differently from loyal email subscribers. So compare against your own history, not against a global average.

Also, some abandonment is natural. Baymard notes that many shoppers are just browsing, comparing prices or saving items for later. No design change will remove that behavior. Your real goal is different, then. You want to keep the shopper who is ready to buy but gets stuck in checkout.

Why do shoppers abandon carts, and where should you start to reduce cart abandonment?

When Baymard removes the "just browsing" group from its survey, the most common reasons look like this. So the list tells you exactly where to look first when you want to reduce cart abandonment.

The source is again the Baymard Institute. Look closely and you will notice something. Specifically, most reasons relate to the process, not the product. In short, most of the fix is in your hands.

Why are surprise costs the biggest cause?

First, a shopper sees a product price and decides to buy. Then, at the last step, shipping and fees appear. That moment breaks the price the shopper had in mind. Moreover, it creates a feeling of being tricked. That feeling often weighs more than the extra cost itself.

Therefore, show shipping costs on the cart page. If you can, show an estimate as soon as a product enters the cart. If you have a free shipping threshold, add a progress message such as "You are $15 away from free shipping". It also adds clarity and can lift order value too.

• Show an estimated shipping cost before asking for a postcode.
• State next to the price whether tax is included.
• Mention extra fees, such as cash on delivery charges, before the shopper picks that option.
• Place the coupon field behind a small link instead of a large open box.

The last point matters, because a prominent coupon box can send shoppers without a code off to search for one. If you sell across regions with different tax rules, the VAT calculator helps you double check the totals you display.

How can you show the total cost from the start?

According to Baymard, 12 percent of shoppers leave because they cannot see the total cost up front. So the problem is not only high cost. Uncertainty kills sales as well. The earlier shoppers see the final number, the easier the decision becomes.

In practice, I recommend a persistent order summary. Subtotal, shipping, discount and grand total should sit in the same box on every step. On mobile, the summary can collapse. Still, the grand total should always stay on screen.

Here is a sample calculation. A shopper adds a $48 item, and shipping costs $6. If the cart says "Total: $54", nothing surprises the shopper at the end. After all, the shopper is doing that math anyway, so the result should match. When you do it for them, you earn trust.

Also, be careful with discounts. When you show an old and a new price side by side, state the saving clearly. You can check your percentages with the discount calculator. A wrong percentage erodes trust fast.

How does guest checkout affect cart abandonment?

In Baymard's survey, 18 percent of shoppers say they left because the site wanted them to create an account. Also, this is a cause you fully control. Consequently, guest checkout is one of the quickest ways to reduce cart abandonment.

Adding guest checkout is not enough, though. You also need to make it obvious. For example, many stores hide it behind a small text link. I prefer three clear choices at the start of checkout: continue as guest, sign in, or create an account. Put the guest option first and make it the most prominent.

So should you give up on account signups? No. Move the offer to after the purchase. On the thank you page, say "Your details are saved, just choose a password". That approach feels polite and works well. As a result, you keep the order and still collect the customer record.

Social login can shorten the process too. However, never make it mandatory. Some customers simply do not want to link their accounts.

How many fields should a checkout form have?

Baymard's research finds that an average checkout shows 23.48 form elements by default. Counting only form fields, the figure is 14.88. According to the same source, an ideal checkout needs only 12 to 14 form elements, or 7 to 8 fields.

That gap also shows a lot of room for simplification. Open your checkout form and ask one question for each field. Can I deliver this order without it? If the answer is yes, remove the field or make it optional.

1. Combine first and last name into one field.
2. Default the billing address to the shipping address.
3. Hide address line 2 behind a link.
4. Show company name and tax ID only when a business invoice is selected.
5. Drop the email confirmation field and catch typos with inline checks.

For general principles, see my guide to lead form design. Specifically, it covers booking and quote forms. Still, the same reduction logic applies to checkout.

Why do autofill and input types matter?

First, cutting fields is step one. Then step two is making the remaining fields fast to complete. Browser autofill can insert an address and card details in seconds, as long as the form uses the right markup. The web.dev guide on autofill recommends correct autocomplete values for this.

For example, use autocomplete="name" for the name field and "email" for email. Use "tel" for phone, "postal-code" for the postcode and "cc-number" for the card number. Also, these small attributes make a big difference on mobile.

• Open a numeric keypad for phone fields.
• Trigger the email keyboard with the @ key for email fields.
• Format card numbers in groups of four automatically.
• Collect the expiry date in one MM/YY field.

In addition, these settings improve accessibility. Screen reader users make fewer mistakes when fields carry clear labels. For the wider picture on small screens, read my article on mobile first design.

How should error messages and validation work?

A red warning at the top of the page after submission is one of the most frustrating moments in checkout. Shoppers who have to hunt for the faulty field give up easily. Therefore, validate inline.

With inline validation, the check runs as soon as the shopper leaves a field. The message appears right below it. Also, keep the tone helpful, not accusing. "Invalid input" helps nobody. "Please enter a 10 digit phone number without the leading zero" solves the problem.

Declined cards need special care. Baymard lists declined cards at 10 percent. When a card fails, do not reset the form. Instead, keep the address details in place. Then let the shopper try another card or a different payment method.

Moreover, never wipe what the shopper typed. Even after a page refresh, keep the address and contact details. Few customers have the patience to fill in the same form twice.

How do you build trust at the payment step?

Baymard reports that 19 percent of shoppers leave because they do not trust the site with their card details. Trust needs rebuilding at checkout. A shopper may have trusted you on the product page. Yet typing a card number raises the question again.

That said, you do not need a wall of badges here. Instead, consistent design helps more. The payment page should look like the rest of the site, with the same logo and colors. If you redirect to another domain, tell the shopper in advance.

• Place card fields inside a visually separate box.
• Mention the payment provider and the 3D Secure step up front.
• Keep a support phone number or chat link visible.
• Summarize the returns policy in one sentence near the pay button.

This way, shoppers see answers before they need to ask. I cover the broader set of trust signals in a separate piece. Here I only picked the ones that matter at the moment of payment.

How do delivery times and returns policies affect abandonment?

Baymard lists slow delivery at 20 percent and unsatisfactory returns policies at 13 percent. Both are also more about communication than design. Often the issue is not slow delivery itself. Instead, the store never states an expected date.

So replace vague phrases like "2 to 4 business days" with an estimated delivery date where possible. A clear line such as "Order by 3 pm and it ships today" helps shoppers plan. If you offer express shipping, show it in the cart with its price.

For returns, do not paste a long legal text into checkout. Instead, state three short facts. How many days customers have, who pays return shipping, and when refunds arrive. Then link to the full policy for details.

Thus delivery and returns details turn into a persuasive message. In short, once you remove uncertainty, shoppers stop postponing the decision.

Which payment methods should you offer?

In Baymard's data, too few payment methods rank lower, at 9 percent. However, that share can be decisive for specific audiences. Some markets expect installments, bank transfers or cash on delivery. When shoppers do not see those options, they buy elsewhere.

On the other hand, adding every method is not the answer either. Too many options create decision fatigue and clutter the page. So I suggest deciding from real order data. Which methods do people use, and which ones does nobody pick?

• Credit and debit cards: the baseline, with installment terms clearly shown.
• Digital wallets: they shorten checkout time on mobile.
• Bank transfer: useful for business buyers and large orders.
• Cash on delivery: only with any extra fee stated up front.

Announce installment options in the cart summary rather than as a surprise at payment. That way, shoppers move forward knowing the monthly amount.

How do site speed and technical errors empty carts?

In Baymard's list, website errors and crashes reach 17 percent. That equals the share for long checkouts. Put simply, it shows how directly technical quality turns into lost sales. A single JavaScript error on the payment page can waste your whole marketing budget.

Therefore, test checkout regularly on different devices and browsers. Pay special attention to the return from the bank's 3D Secure screen. In practice, many stores lose orders right there. Also, make sure the cart survives when a session times out.

As for speed, keep extra tracking scripts, chat widgets and pop ups off the payment page. Each additional script delays loading on slow connections. I explain the wider effect of speed in my article on how site speed affects SEO. On checkout, the effect is even sharper.

In short, technical testing should be as routine as design work. After every release, I place at least one real test order. During that test, check more than the payment. Confirm the email arrives, stock updates and analytics records the order.

How does the cart page prepare shoppers for checkout?

In many stores, the cart page is just a list of products. Yet this is where shoppers decide whether to enter checkout. So design the cart page as the first step of checkout, not as a waiting room.

First, use one clear checkout button. If "continue shopping", "apply coupon" and "checkout" carry the same visual weight, shoppers hesitate. Give the checkout button the strongest color. Then keep the other options as text links. For button copy ideas, see my CTA button examples.

• Let shoppers change quantities and remove items without a page reload.
• Offer an undo option for removed items.
• Show a short summary of each item with the selected variant.
• Place the estimated delivery date under the cart summary.

Also, make the cart persistent. A shopper may add items on a phone and return on a laptop in the evening. For signed in users, sync the cart across devices. For guests, keep it for a few days even after the browser closes. That way, shoppers finish the decision on their own time.

What should you watch for in mobile checkout?

Checkout on mobile is far more fragile than on desktop. A small screen, a slow connection and a cramped keyboard turn every extra field into an obstacle. Consequently, design the flow for the phone first and then expand it for desktop.

Specifically, in mobile checkout I look closely at tap targets. Buttons should be large enough for a thumb and not too close together. A shopper who taps "remove" by accident rarely searches for the product again.

• Pin the pay button to the bottom of the screen with the total above it.
• Use large option buttons instead of dropdowns for short lists.
• Test that the bank verification screen renders properly on mobile.
• Offer digital wallet buttons at the top of the form.

Moreover, mobile users switch apps often. A shopper who opens the messages app for an SMS code must not return to an empty form. So test this scenario on a real phone. For a quick check, see my guide to the mobile friendly test.

Should checkout be one page or multiple steps?

That said, there is no single right answer. What matters more than the number of steps is the workload on each step and a visible sense of progress. In Baymard's survey, 17 percent point to a long or complicated checkout.

Whichever you choose, add a progress indicator. Shoppers want to know how many steps remain. Also, the back button must never erase entered data.

My advice is to run an A/B test instead of guessing. However, run it with enough traffic and for long enough. Do not decide based on a few days of data.

Why is the order confirmation page part of the process?

The screen after the pay button often gets the least attention. Yet the shopper is still uneasy at that moment. Did the payment go through? When will the parcel arrive? Who do I contact if something goes wrong? Without answers, the shopper calls support or hesitates next time.

So show the order number, amount paid, estimated delivery date and support channel on the confirmation page. Also send the same details by email right away. If the email never arrives, the shopper doubts the order.

The confirmation page also matters for measurement. Specifically, the purchase event fires there. A page refresh must not count the order twice. Otherwise your cart abandonment rate looks lower than it is, and you make the wrong calls.

How do you set up recovery emails?

Despite every improvement, some shoppers will still leave. Recovery emails step in at this point. However, to send them you need the email address early. So put the email field first in your checkout form.

In addition, check consent rules before sending anything. Marketing email rules differ by country, and many require clear opt in. Write the consent checkbox in plain language.

1. First email: within a few hours, a simple reminder with a link back to the cart.
2. Second email: the next day, answer common questions and mention returns.
3. Third email: a few days later, a limited incentive if needed.

These timing ranges are a starting point from field experience, not a guarantee. Still, every store should test with its own data. Do not offer a discount in the first email. Otherwise, shoppers learn to abandon carts on purpose.

Tag email links with the UTM builder so you can measure them. I cover ad based recovery separately in my article on remarketing and the sales funnel.

How do you measure whether you reduce cart abandonment?

To know whether changes work, the overall rate is not enough. Instead, you need to track drop off by step. In GA4, a funnel exploration can line up begin_checkout, add_shipping_info, add_payment_info and purchase.

For example, a big drop at the shipping step usually points to shipping costs or the address form. A drop at the payment step points to card trust, payment options or technical errors. This way, each change links to a clear hypothesis.

• Split by device, because mobile and desktop users differ.
• Split by traffic source, because ads and organic visitors differ.
• Log the date of each change and compare before and after.
• Tag orders from recovery emails separately.

I explain which metrics really matter in my guide to digital marketing KPIs. On the ad side, the ROAS calculator lets you compare returns before and after your changes.

In what order should you work to reduce cart abandonment?

Changing everything at once hides which change worked. Therefore, start with steps that have high impact and low effort. The order below is the path I follow in the field. Still, it may not fit every store exactly.

1. Fix tracking and check your GA4 ecommerce events.
2. Show shipping and the total in the cart.
3. Add guest checkout and put it first.
4. Cut form fields and enable autofill.
5. Move error messages inline.
6. Place trust and returns details near the pay button.
7. Set up the recovery email sequence.

Baymard estimates that large e-commerce sites could gain an average conversion increase of 35.26 percent through better checkout design alone. That is a potential, not a promise for your store. Still, it shows the direction clearly.

If you want to work through this together, see my e-commerce consulting page or write to me via the contact page. Broader interface issues are covered in my article on UX mistakes that kill sales.