Improve mobile WooCommerce checkout layout to place payment section below order summary
Los mantenedores suelen responder en 1 día
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Aptitud para principiantes
- 60/100
Línea de trabajo
Busca .woocommerce-checkout-payment y .woocommerce-checkout-review-order-table en la integración de WooCommerce del tema y en los estilos responsivos del checkout; después, inspecciona el diseño móvil en un checkout de WooCommerce. La tarea está terminada cuando el resumen del pedido aparece antes del pago en dispositivos móviles, el botón «Place Order» sigue siendo el último y el diseño de escritorio no cambia.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
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
orderproperties) 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)
- Lenguaje dominante
- PHP
- Estrellas
- 307
- Forks
- 88
- Merge medio
- 1 d 6 h
- PR fusionados (30 d)
- 10
Preparar el entorno
- Incluye un Dockerfile o un archivo de Docker Compose
- Tiene una plantilla de pull request
- Leer la guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de Codeinwp/neve
-
bug-report bug-report-triage customer report regression
Dificultad 2/5 1-3 horas Aptitud para principiantes 84/100
Los mantenedores suelen responder en 1 día
-
feature-request-triage
Dificultad 5/5 Más de una semana Aptitud para principiantes 25/100
Los mantenedores suelen responder en 1 día
-
feature-request-triage
Dificultad 4/5 3-5 días Aptitud para principiantes 48/100
Los mantenedores suelen responder en 1 día
-
Elementor single-color endpoint returns global_not_found for Neve palette colorsPosiblemente ocupada @girishpanchal30 la tomó hace 3 días. Abiertobug-report bug-report-triage customer report regression
Codeinwp/neve#4633 · 12 comentarios · 1 asignado ·
Los mantenedores suelen responder en 1 día
-
customer report feature-request-triage
Dificultad 4/5 3-5 días Aptitud para principiantes 52/100
Los mantenedores suelen responder en 1 día
Todos los issues de Codeinwp/neve
Issues similares
-
domain/crm-after-sales Platform(Default) priority/high
Dificultad 2/5 1-3 horas Aptitud para principiantes 72/100
Los mantenedores suelen responder en 1 día
-
sync-en
Dificultad 1/5 1-3 horas Aptitud para principiantes 86/100
Los mantenedores suelen responder en 2 días
-
sync-en
Dificultad 1/5 1-3 horas Aptitud para principiantes 88/100
Los mantenedores suelen responder en 2 días
-
Перевод устарел
Dificultad 2/5 1-3 horas Aptitud para principiantes 82/100
Los mantenedores suelen responder en 1 día
-
component/code document/settings documents duplicate integration/wc/pages/cart integration/woocommerce mod* mod/b* mod/c* mod/d* mod/e* mod/i* product/pro status/needs-feedback
Dificultad 2/5 1-3 horas Aptitud para principiantes 72/100
elementor/elementor#37475 · 1 comentario ·
Los mantenedores suelen responder en 1 día