Improve mobile WooCommerce checkout layout to place payment section below order summary

Impact: 75 · Confidence: 95 · Complexity: 20

Description

Problem

On mobile devices, the WooCommerce checkout layout stacks elements such that the order summary sits at the very bottom, below the payment section. Customers must scroll past the payment form to review their cart contents and total, and then scroll back up to actually enter their payment details and place the order. This backtracking adds unnecessary friction to the mobile checkout experience.

Desired Behavior

The default mobile checkout flow should be linear. The payment block should naturally appear below the order summary, so users can review their items, see the final total, and then immediately proceed to enter payment details and submit without reversing their scroll.

Acceptance Criteria

• On mobile breakpoints, the WooCommerce checkout layout is restructured so the payment section is positioned below the order summary/review table.
• This is achieved via CSS (e.g., using flexbox or grid order properties) so that the HTML structure and desktop layout (where elements are often side-by-side) remain unaffected.
• The "Place Order" button remains logically positioned at the very end of the checkout flow.

Customer Context

A Neve Pro customer has noted friction in the mobile WooCommerce checkout flow. They are happy with the desktop layout but find the mobile version unintuitive because users have to scroll down to review their order and then scroll back up to the payment form. They want the payment section to sit underneath the order summary.

Root Cause Analysis

The root cause is the default DOM order and stacking of WooCommerce checkout elements on narrow screens. Because the standard WooCommerce checkout markup often outputs the payment block before the end of the review order section, mobile layouts end up forcing users to scroll past payment to see the final total, then backtrack to the payment module. This is a UX gap in how existing elements are visually ordered on mobile devices, not a missing product capability.

Alternative Suggestions

Rather than introducing a net-new Customizer toggle for 'Mobile Checkout Layout Order', improve the theme's default responsive styles. We can apply CSS flexbox or grid order rules on mobile breakpoints to ensure the .woocommerce-checkout-payment div sits below the .woocommerce-checkout-review-order-table. This solves the user's problem out-of-the-box and provides a better checkout flow for all Neve store owners without adding configuration bloat.

Reasoning

The customer is highlighting UX friction in the mobile checkout flow, where the order summary appears after/below the payment section. This forces users to scroll down to review their order and then back up to pay. This is a valid problem, but instead of adding a new setting or toggle to control checkout element ordering on mobile, we can simply improve the existing default mobile layout via CSS.

Source: HelpScout #3306140471
Generated by feature-request-triage workflow (ID: feature-request-triage_69f1f2d966c033.58590933)

Search the theme's WooCommerce integration and responsive checkout styles for .woocommerce-checkout-payment and .woocommerce-checkout-review-order-table, then inspect the mobile layout in a WooCommerce checkout. Done means the order summary appears before payment on mobile, the Place Order button remains last, and the desktop layout is unchanged.