Skip to content
WooCommerce

WooCommerce checkout: what I look at before adding more plugins

The checkout is the most expensive screen in a store. Six things worth examining in the default implementation before a plugin is installed to cover them.

What should be fixed in a WooCommerce checkout before reaching for a plugin?

Mostafa Nouh — portraitMostafa NouhPublished 6 min read

Everything before the checkout is persuasion. The checkout itself is administration — and it is the only screen where a customer who has already decided to buy can still fail to. That asymmetry is why it deserves attention before anything else in a store.

  1. Every field

    A decision the customer makes while holding a card

  2. Every step

    A place the session can end

  3. Every failure

    A retry, only if the entered data survived it

Every field is a decision the customer has to make while holding a card.

1. Fields you do not use

The default WooCommerce billing form asks for a company name, a second address line, a country you may only ship to one of, and a postcode that a large share of Gulf addresses do not meaningfully have. Every field that is not used downstream is a decision cost with no return. Remove them at the template level rather than hiding them with CSS — a hidden required field is a checkout that fails silently.

2. The mobile keyboard

A phone number field that opens a full alphabetic keyboard, or an email field without the right input type, adds friction that nobody reports and everybody feels. Correct type, inputmode and autocomplete attributes cost nothing and are frequently missing after a theme has customised the form.

3. Arabic-specific checkout problems

  • Phone numbers, prices and order numbers are Latin fragments inside an Arabic layout — they need isolation or they reorder the line around them.
  • Address formats differ. A form designed around a street-number-first Western address does not fit how the address is actually written or spoken.
  • Validation messages must align to the same edge as the field they describe, or the eye has to travel across the form to read them.
  • The progress indicator has to advance toward the reading edge. An Arabic checkout that advances left reads as undoing itself.

4. Payment method presentation

Wallet payments such as Apple Pay only appear on supporting devices and browsers, which means the layout has to hold together both with and without them. A payment row designed around three visible options looks broken when the device shows one. Test on the device, not in a desktop browser.

5. Caching the uncacheable

6. What happens when it fails

Most checkout reviews test the successful path. The expensive path is the failed one: a declined card, a timed-out gateway, a validation error on the fourth field. Whether the customer's entered data survives that failure is the difference between a retry and an abandoned order.

Checkout review

  • Every field is used somewhere downstream
  • Removed fields are removed, not hidden with CSS
  • type, inputmode and autocomplete are correct on every input
  • Latin fragments in Arabic layouts are isolated
  • Validation messages align with their fields
  • The layout holds with one payment method and with four
  • Cart, checkout and account are excluded from page cache
  • Entered data survives a gateway failure
  • The whole path was walked on a real phone, not resized on a desktop

Sources

Contact

Have a site or store that needs to work better?

Tell me what is happening and on which page. A diagnosis is a useful first deliverable on its own.

I read every message myself and reply within one working day — usually with a question or two before anything else, because a scope worth quoting needs them answered.

Available for remote work aligned to EST hours
Mostafa Nouh — portrait

Mostafa Nouh

Full-Stack Developer & Product Builder

Location
Egypt · Remote