WooCommerce checkout page layout: phone check

Many themes put the order summary beside the form on a wide screen. On a phone that column stacks, and a theme can leave the summary or the coupon link above the billing fields. A buyer who meets a total before typing a name can think the checkout is asking for money first. A coupon link that reads like a required step can make them think they missed one. The shipping choice and payment methods follow, and each opens extra fields below it, which pushes Place order further down the screen. A buyer who has to scroll to find the button may stop scrolling.

• On a phone, count the screens between the first billing field and the Place order button, and note any that hide it.
• Find the coupon link and check that it reads as optional, not as a step the buyer must complete.
• Tick Ship to a different address and check that the extra fields read as optional and sit beside their labels.
• Select each payment method and check that Place order is still reachable without a blind scroll.
• Change the country and check that the state or county field changes with it, for a country with regions and one without.

A WooCommerce store runs one of two checkouts: the classic checkout, built from a shortcode and its form templates, or the block checkout, built from blocks. The two lay out their parts differently, and a theme's styling can break either one. Many fixes that work on one type do nothing on the other. Find out which one your checkout page uses before you change any layout, because a template edit that helps the classic form may have no effect on the block version.

Walk the checkout on a phone in a private window while the cart holds one item. Count the screens between the first billing field and the Place order button. A checkout that needs several screens of scrolling asks a buyer to hold their place in a form they have not finished. Note whether the order total, the coupon link and the shipping choice all sit above the first field the buyer must fill.

The coupon link is the clearest example. In the classic checkout it reads as an invitation to enter a code, and a buyer without one may feel they have missed a step. A shipping box with Ship to a different address works the same way: ticking it reveals a second set of fields, and a buyer who ticks it by accident fills in the wrong address without knowing. Each of these is optional, but the layout does not always say so.

Payment methods are a second source of confusion. Choosing one opens its own fields below the choice, and the Place order button sits under those fields. On a phone the new fields can push the button off the screen with no sign that anything changed. Check each payment option in turn, and confirm the button is reachable after each one opens.

The state or county field is a common trap for buyers outside the store's home country. It appears for some countries and not for others, and it can sit beside a country dropdown that redraws after a change, so a postcode the buyer already typed can look lost. Change the country in the checkout and check that the state field follows it. A buyer who cannot find a region for their country has no way to finish the form, and the run shows that as a stop at that field.

A simulated visitor walks the checkout on a phone and reports the field or button where it stopped, with a screenshot of that screen and any script error recorded there. That shows the layout problem as a buyer meets it. The run does not read your checkout settings or your orders, so it cannot tell you which template or plugin moved the field. Check that in your theme files or plugin settings.

Checkout layouts change when a theme, a checkout plugin or a payment plugin updates. A new field, a new payment option or a template override can move the total or the button on a phone. After each update, add one item on a phone in a private window, walk to the payment step, and confirm Place order is reachable. A layout that worked last month can break after one plugin update.