Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
  • Qualcosa non va?
#4,492 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
60/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
css, php
Ambito
frontend, web-dev

Direzione di ricerca

Cerca .woocommerce-checkout-payment e .woocommerce-checkout-review-order-table nell’integrazione WooCommerce del tema e negli stili responsive del checkout, quindi esamina il layout mobile in un checkout WooCommerce. Il lavoro è completato quando il riepilogo dell’ordine appare prima del pagamento su mobile, il pulsante «Place Order» rimane per ultimo e il layout desktop non cambia.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

customer report feature-request-triage

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)

Lingua principale
PHP
Stelle
307
Fork
88
Merge medio
1g 6h
PR unite (30g)
10

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di Codeinwp/neve

Tutte le issue di Codeinwp/neve

Issue simili

Altre issue su PHP

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.