OPC on foldables: live prototype
A static copy of the OnePageCheckout checkout (three products in the cart) with the proposed 4.6.0 foldable CSS on top. Nothing is sent anywhere: the fields, buttons and Pay do nothing.
Classic checkout WooCommerce's classic checkout engine
Block Mode The WooCommerce Checkout block engine
On a foldable, in Chrome:
- Unfold flat: the form and the order summary sit side by side (context A).
- Half-open like a book (hinge vertical): form on the left pane, summary on the right, nothing on the fold (B).
- Half-open like a laptop (hinge horizontal): the form scrolls on top, the summary and total stay on the bottom pane (C).
The small panel at the bottom switches between Today (4.5.0) and 4.6.0 (the proposal) and between the Classic and Blocks engines. It also shows what your phone reports: viewport size, the number of viewport segments and the device posture. The layout itself reacts by CSS alone. The minus button shrinks the panel to a pill.
Book and tabletop need Chrome or Edge on Android (Viewport Segments API, Chrome 138+). Samsung Internet 30+ too. Firefox and Safari only see the flat layouts.