Why your checkout page is the most expensive page on your site
Every other page on an e-commerce store has a second chance. A product page that fails today can be revisited tomorrow. The checkout does not work that way: when a shopper drops out at the payment step, you have already paid for the traffic, the merchandising and the trust building. You lose the sale at the last possible moment.
Across the industry, roughly 7 out of 10 carts are abandoned, and a large share of those exits have nothing to do with price. They are caused by design decisions: a forced account creation, a shipping cost that appears too late, a 14-field address form on a 5-inch screen, a payment method that a Belgian or Dutch shopper simply does not use.
This guide breaks down checkout page design best practices into 12 concrete fixes. For each one you get the reasoning, the common mistake we keep seeing on Shopify and WooCommerce stores, and what to change. No theory dumps, no “keep it simple” platitudes.
The 12 fixes at a glance
| # | Fix | Problem it solves | Effort |
|---|---|---|---|
| 1 | Offer real guest checkout | Forced registration drop-off | Low |
| 2 | Show total cost early | Surprise shipping and taxes | Low |
| 3 | Cut the form field count | Form fatigue, typing errors | Medium |
| 4 | Add a clear progress indicator | Uncertainty about steps left | Low |
| 5 | Strip the distractions | Exit links, menus, banners | Low |
| 6 | Keep the order summary visible | Doubt about what is being bought | Medium |
| 7 | Put express payment buttons on top | Mobile typing friction | Low |
| 8 | Offer local payment methods | Missing Bancontact, iDEAL, SEPA | Medium |
| 9 | Place trust signals next to the risk | Security and return anxiety | Low |
| 10 | Fix inline validation and errors | Silent failures, rage quits | Medium |
| 11 | Design the mobile thumb zone | Tiny targets, hidden CTA | Medium |
| 12 | Speed up the page and the 3DS step | Slow loads, failed authentication | High |
1. Offer a real guest checkout, not a disguised signup
The common mistake
The store shows a “Login or create an account” screen before anything else. On WooCommerce, this happens when “Allow customers to place orders without an account” is left unchecked in WooCommerce > Settings > Accounts & Privacy. On Shopify, it happens when customer accounts are set to “required” instead of “optional”.
The fix and the reasoning
Forced account creation is consistently one of the top reasons for abandonment in every study published on the subject. The shopper reads it as “more work, more data given away, another password to remember”. The order is the goal, the account is a bonus.
- Let people buy with an email address and nothing more.
- Offer the account after the order confirmation, pre-filled with the data they just typed (“Save this as an account? Just pick a password”).
- If a returning customer enters a known email, offer a login link rather than blocking the flow.
A “guest” button hidden under a login form with a big colored “Create account” CTA is not a guest checkout. It is a dark pattern that costs orders. For the wider picture, see Ecommerce Checkout Best Practices.
2. Show the full cost before the payment step
The common mistake
Shipping is calculated on the last step, after the address form. The shopper spends two minutes typing, then discovers 7.95 EUR of delivery fees on a 29 EUR order and leaves.
The fix and the reasoning
Unexpected extra costs remain the number one documented cause of cart abandonment. The point is not that shipping must be free, it is that it must not be a surprise.
- Display a shipping estimate in the cart, based on the detected country or a postcode field.
- State the free shipping threshold with a progress bar (“You are 12 EUR away from free delivery”).
- For EU stores, show VAT-inclusive prices for B2C and make the VAT line explicit in the summary.
- Announce payment surcharges, gift wrap fees or COD fees before the payment step, never at it.
3. Cut the form field count to the minimum that ships the parcel
The common mistake
A default checkout ships with a company field, a second address line, a title dropdown, a separate billing block and a phone field marked required. That is easily 15 to 18 inputs. Baymard-style research has long shown that a well optimised checkout needs around 8 fields for a guest card payment.
The fix and the reasoning
Every additional field adds cognitive load, typing time and a new chance to trigger a validation error. Audit your form with a simple question for each input: “What breaks if this field disappears?”
| Field | Verdict | Why |
|---|---|---|
| Company name | Hide by default | Show behind a “Business order / VAT invoice” toggle |
| Address line 2 | Collapse | Optional link “Add apartment, floor, box” |
| Title (Mr/Mrs) | Remove | No logistical value, risks offending |
| Phone number | Keep, explain | Carriers need it for delivery notifications, say so in micro-copy |
| Separate billing address | Checkbox, default same | Only a minority need a different one |
| “Confirm your email” | Remove | Blocks paste, doubles typing, use inline validation instead |
Complementary techniques that remove typing without removing data:
- Address autocomplete (Google Places, bpost or Loqate style) replaces four fields with one lookup.
- Correct autocomplete attributes on every input so browsers and password managers can fill the form in one tap.
- Smart defaults: detect the country from the IP or the shipping zone, preselect the most used delivery option.
4. Add a progress indicator that tells the truth
The common mistake
Either there is no indicator at all in a one-page checkout, or there is a 4-step bar where step 4 secretly contains a redirect to a bank page and a confirmation screen.
The fix and the reasoning
A progress indicator reduces the perceived effort. People accept a task better when they can see its end. Rules that work:
- Use 3 steps maximum: Information, Delivery, Payment. That is exactly the Shopify default and it is a good default.
- Label steps with words, not “Step 2 of 4”.
- Make completed steps clickable so people can correct their address without losing the cart.
- In a one-page checkout, use numbered sections with a clear visual state (done, active, upcoming).
5. Strip the distractions, keep the escape hatches
The common mistake
The full site header, mega menu, search bar, newsletter popup and a live chat bubble covering the payment button. Each of those is an exit door at the moment you need focus. Checkout Page Design: Best Practices and Example covers this in more depth.
The fix and the reasoning
A checkout is a funnel, not a browsing page. Remove the global navigation and the footer link farm. Keep only:
- The logo, linking back to the store (not opening a new journey mid-payment on mobile).
- A visible “Back to cart” or “Edit cart” control.
- Contact details or a help link for people who get stuck.
And disable exit-intent popups, newsletter modals and spin-the-wheel widgets on checkout URLs. Yes, that includes the discount popup: a promo field that appears once someone is already paying only triggers a coupon hunt in a new tab.
6. Keep the order summary visible at all times
The common mistake
On mobile, the summary is collapsed behind a “Show order summary” toggle and never opened again. On desktop, it disappears on the payment step.
The fix and the reasoning
The summary is the reassurance anchor: it answers “what exactly am I paying for” without forcing a step backwards. Best practice:
- Sticky summary column on desktop, with product thumbnails, quantities, delivery method and the final total.
- On mobile, collapse it but always show the total amount in the toggle bar.
- Allow quantity edits or removal directly in the summary, without a full page reload that clears the form.
- Show the delivery date estimate next to the shipping line, not only the carrier name.
7. Put express payment buttons above the form, not below it
The common mistake
Apple Pay, Google Pay, PayPal and Shop Pay buttons are placed under the card form, after the address block. By then, the shopper has already typed everything they wanted to avoid typing.
The fix and the reasoning
Express wallets carry the address, the email and the payment credential in one authenticated tap. On mobile they are the single biggest friction remover available today. Placement rules:
- Show wallet buttons at the very top of the checkout, above the email field, with a clear “or pay with card” divider underneath.
- Only render buttons the device actually supports. An Apple Pay button on an Android phone is noise.
- Respect brand guidelines for height, radius and logos: unfamiliar-looking buttons get less trust and fewer taps.
- Also expose them on the cart page and, for high-intent products, on the product page.
8. Offer the payment methods your market actually uses
The common mistake
A Belgian store running Visa, Mastercard and PayPal only. Meanwhile, Bancontact is the dominant online method in Belgium, iDEAL in the Netherlands, Klarna in the Nordics and SEPA direct debit or bank transfer for B2B orders.
The fix and the reasoning
A missing local method is not an inconvenience, it is a hard stop. Check your payment provider dashboard (Mollie, Stripe, Adyen, Worldline) and enable by market:
| Market | Must-have methods |
|---|---|
| Belgium | Bancontact, cards, PayPal, Payconiq, wallets |
| Netherlands | iDEAL, cards, PayPal, Klarna |
| France | Cartes Bancaires, PayPal, wallets, instalments |
| Germany | PayPal, Klarna, SEPA, cards, invoice |
| B2B (EU) | Bank transfer, SEPA debit, purchase order |
Two design details matter as much as the list itself: display the logos at a readable size, and remember the method the customer used last time.
9. Place trust signals where the anxiety is, not in the footer
The common mistake
A wall of badges in the footer: SSL seal, five payment logos, a stock “100% secure” graphic nobody recognises. Below the fold, where nobody looks during the payment decision.
The fix and the reasoning
Trust signals only work when they are adjacent to the moment of doubt. Map the doubts, then place the answers:
- Next to the card fields: a discreet padlock and “Secure payment, encrypted connection”. Not a giant badge that looks like an ad.
- Next to the email field: “We only use your email for order updates” (this also supports your GDPR posture).
- Next to the shipping options: delivery dates and the return window (“Free returns within 30 days”).
- Next to the final pay button: a one-line reassurance about refunds or customer service, plus your VAT number and company details for EU credibility.
- Review scores (Trustpilot, Google) in the sidebar summary, never as a link that navigates away.
Real, verifiable signals beat generic graphics. A phone number that a human answers outperforms any badge. eCommerce Checkout Optimization: 25 Best Practices covers this in more depth.
10. Fix validation and error messages
The common mistake
The form is submitted, the page reloads, the screen jumps to the top and a red banner says “There was an error with your order”. No field is highlighted and half the inputs are cleared.
The fix and the reasoning
Error handling is where checkouts quietly bleed conversions, especially with 3-D Secure declines. Requirements:
- Inline validation on blur, positive confirmation when a field is correct.
- Errors displayed next to the field, in plain language: “This postcode does not match the selected country”.
- Never clear the form after a failed payment, and never lose the cart.
- For a declined card, explain the next action: try another card, contact the bank, or switch to Bancontact / PayPal, with the alternatives shown right there.
- Auto-format numbers (card, postcode, phone) and set the right input types so mobile keyboards switch to numeric.
11. Design for the thumb, not for your 27-inch monitor
The common mistake
The checkout is “responsive”, which means it is a squeezed desktop layout. The pay button sits below three collapsible sections, tap targets are 30 px tall and the sticky cookie banner covers the total.
The fix and the reasoning
Mobile now carries the majority of e-commerce sessions in most EU markets, yet it still converts lower than desktop. Design decisions that close part of that gap:
- Tap targets of at least 44 x 44 px, generous spacing between form rows.
- A sticky bottom bar with the total and the primary CTA, always reachable with the thumb.
- One column, one question per screen block, no side-by-side fields except postcode and city.
- Correct
inputmodeandautocompleteattributes so the numeric keypad appears for numbers and the browser can autofill the address. - Font size of 16 px minimum on inputs to prevent iOS zoom jumps.
- Test with one hand on a real mid-range Android phone on 4G, not in a desktop emulator.
12. Make it fast, including the authentication step
The common mistake
Six tracking scripts, a chat widget and two review apps loading on the checkout. Then a 3-D Secure redirect that opens a full page, loses the context and times out on a weak connection.
The fix and the reasoning
Speed is a conversion feature at checkout more than anywhere else, because intent is at its peak and patience at its lowest. Practical actions:
- Audit third-party scripts on checkout URLs and remove anything that is not measurement critical. Use server-side tracking where possible.
- Prefer embedded or modal SCA flows over full redirects so the customer never leaves your page.
- Enable exemptions and network tokens with your PSP to cut unnecessary 3DS challenges on low-risk transactions.
- Show a clear loading state on the pay button and disable double submits (duplicate orders destroy trust).
- Measure Core Web Vitals on the cart and checkout templates, not only on the homepage.
Platform notes: Shopify vs WooCommerce
| Topic | Shopify | WooCommerce |
|---|---|---|
| Customisation | Checkout Extensibility: blocks, UI extensions, branding settings in the checkout editor | Full control via the block-based checkout, templates or hooks |
| Guest checkout | Settings > Customer accounts > optional | Settings > Accounts & Privacy > allow guest orders |
| Field reduction | Toggle optional fields, hide company field by market | Remove or collapse fields in the Checkout block settings or with filters |
| Express wallets | Shop Pay, Apple Pay, Google Pay, PayPal, top placement configurable | Via Stripe, Mollie or PayPal plugins, placement depends on the plugin |
| Main risk | App bloat in the checkout and cart | Slow hosting, plugin conflicts, legacy shortcode checkout |
If you are still running the legacy WooCommerce shortcode checkout, migrating to the block checkout is usually the single highest-impact move available, because it ships with a cleaner mobile layout and better field handling out of the box.
How to measure whether your fixes actually work
Ship changes one meaningful batch at a time and watch these numbers:
- Checkout completion rate: sessions reaching checkout that end in an order. This is your headline KPI.
- Step-by-step funnel: cart to information, information to delivery, delivery to payment, payment to thank-you. The biggest drop tells you which fix to prioritise.
- Payment failure rate by method and by device. A 12 percent card failure rate is a design and PSP problem, not bad luck.
- Mobile vs desktop conversion gap. A gap larger than 40 percent usually signals a mobile UX issue rather than a browsing habit.
- Form analytics: time per field, corrections, abandonment field. Session recordings on checkout are worth more than a hundred opinions.
A realistic benchmark: mature e-commerce sites see checkout completion somewhere between 40 and 65 percent, while overall site conversion sits around 1 to 3 percent. If your checkout completion is under 35 percent, the fixes above will move real money.
Quick audit checklist
- Can a first-time visitor buy without creating an account?
- Is the total, including shipping and VAT, visible before the payment step?
- How many fields are on screen for a simple guest order? Count them.
- Are express wallet buttons above the form?
- Is Bancontact (or the local equivalent) available and visible?
- Is the order summary always accessible, including on mobile?
- Do error messages appear next to the field, in plain language?
- Is the pay button reachable with a thumb without scrolling past the fold?
- Does the checkout load in under 2 seconds on 4G?
- Does a failed payment preserve the cart and suggest an alternative?
If you answer “no” to three or more, there is a measurable amount of revenue sitting in your abandoned cart report right now.
FAQ
What is the best design for a checkout page?
A single-column, distraction-free layout with guest checkout, around 8 form fields, express payment buttons at the top, a visible order summary, a 3-step progress indicator and trust signals placed next to the fields that trigger doubt. Simplicity is the principle, but the details of placement are what produce the conversion gain.
How many fields should a checkout form have?
Aim for 8 to 10 visible inputs for a guest card order. Anything beyond that should be collapsed behind an optional toggle (company, VAT number, second address line, different billing address) or removed entirely.
What is a good checkout conversion rate?
Checkout completion between 40 and 65 percent is a common range for optimised stores, with strong performers going higher. Compare yourself against your own historical baseline and segment by device before drawing conclusions.
Should the checkout be one page or multiple steps?
Both convert well when executed properly. Multi-step works better when you have many fields and need to reduce perceived effort. One page works better for short forms and returning customers. What matters more is field count, clarity and speed, not the number of screens.
Where should trust badges be placed on a checkout page?
Directly next to the element that creates the anxiety: security wording near the card fields, return policy near the shipping options, privacy note near the email field, and a short reassurance line under the final pay button. Footer-only badges have very little effect.
Does removing the navigation menu from checkout really help?
Yes. Removing global navigation, search and promotional banners reduces exit paths at the exact moment the shopper should be focusing on completing the order. Keep a logo, a back-to-cart link and a help contact.
How do I optimise a Shopify checkout?
Set customer accounts to optional, use the checkout branding editor to match your identity, place express wallets at the top, hide optional fields per market, add delivery date estimates, limit checkout apps to what you truly need, and use checkout UI extensions instead of heavy third-party scripts.
Need an outside look at your checkout?
Most of the fixes above take a few hours of work each. The difficult part is knowing which one is costing you the most right now. Our team audits Shopify and WooCommerce checkouts with funnel data, session recordings and payment-level analysis, then delivers a prioritised list of changes with an expected impact. Get in touch via dric.be and we will start with your current abandonment numbers.
