One Page Checkout Extended for Magento 2

What you get

Panth Checkout Extended, One Page Checkout for Magento 2

Premium one-page checkout extension for Magento 2 that replaces the default two-step accordion checkout with a configurable multi-column layout, a sticky order summary sidebar, inline newsletter subscription, qty +/- increment controls, a sidebar place-order button, coupon code in the sidebar, custom CSS/JS injection, and a modern card-style UI. Fully admin-configurable, zero code changes required.

Panth Checkout Extended transforms the default Magento checkout into a fast, modern, conversion-focused one-page experience. Customers see shipping, payment, and order summary side-by-side in a clean card-based layout. The sticky sidebar keeps the place-order button, coupon code, newsletter opt-in, and qty controls always within reach, eliminating scroll fatigue and reducing cart abandonment. Every feature is togglable from the admin panel, so you can tune the checkout UX per store view without touching a single line of code.

Built for Magento 2.4.4 through 2.4.8 on PHP 8.1 - 8.4, fully MEQP-compliant, and engineered for speed by a Top Rated Plus Magento developer with 10+ years of eCommerce experience.

Key Features

Multi-Column Checkout Layout

• 1-column, stacked, mobile-friendly
• 2-column, classic content + sidebar
• 3-column, shipping | payment | summary side-by-side (desktop)
• Sidebar position, left or right
• Sticky sidebar, order summary follows the customer as they scroll

Sidebar-First UX

• Place-order button in the sidebar, always visible
• Coupon code in the sidebar, moved out of the payment step
• Newsletter checkbox in the sidebar, passive opt-in
• Auto-expanded cart items, no click to expand
• Auto-expanded discount code, input ready at page load

Newsletter Subscription at Checkout

• Checkbox in the order summary sidebar
• Configurable label text and default checked state
• Works for both guest and logged-in customers
• Uses payment extension attributes for clean API transport
• Skips duplicates if customer is already subscribed
• Never blocks order placement, errors logged silently

Qty Increment Controls in Summary

• +/- buttons next to each item in the order summary
• Respects product-level qty_increments (e.g. 0.5 step)
• Updates cart via AJAX, no page reload
• Stock-aware, disables + button at max stock

Modern UI Styling

• Card styles: Elevated (shadow), Bordered, Flat, Glassmorphism
• Accent color, admin color picker with server-side hex validation
• Border radius, pixel-level control
• Step indicators, optional numbered badges
• Field modes, Compact (multi-field rows) or Full Width
• Placeholder toggle & Tooltip toggle
• Billing title visibility toggle

Checkout UX Enhancements

• Auto-save shipping info, address and method persist as the customer types, so the payment step loads instantly
• Billing real-time sync, "same as shipping" updates billing as the customer types
• Product SKU display in summary
• Product link, clickable item names

Admin & Developer

• Custom CSS textarea, injected inline at checkout
• Custom JS textarea, injected via RequireJS at checkout
• ACL resource, Panth_CheckoutExtended::config for granular admin permissions
• Per-store-view scope, all settings respect Magento's standard scope hierarchy
• Admin-authored @noEscape, CSS/JS edits restricted to authorized admin users

Quality & Security

• MEQP compliant, passes Adobe's Magento Extension Quality Program
• No core file modifications, clean plugin and observer architecture
• Luma compatible, works with the native Luma checkout components
• Hyva friendly, works on Hyva stores running the standard Magento checkout
• Composer-installable, standard Magento 2 package

Default Magento vs Panth Checkout Extended

Layout Options

1-column (stacked), best for stores with few items per order and mobile-heavy traffic. Shipping, payment, and summary stack vertically.

2-column, the industry-standard modern checkout. Main content (shipping + payment) on one side, sticky order summary on the other. Best for the majority of stores.

3-column, maximum information density. Shipping, payment, and order summary are all visible side-by-side. Ideal for desktop-heavy B2B stores or stores with complex payment flows.

The layout switches via a custom layout handle applied by an observer, so you can further customize via your own checkout_index_index.xml if needed.

Newsletter Subscription

The newsletter checkbox is rendered inside the order summary sidebar so it is visible throughout the checkout flow. On order placement:

1. The checkbox state is captured via payment extension attributes, a clean, Magento-standard transport
2. Two separate plugins handle subscription, one for guest customers (by email), one for logged-in customers (by customer ID)
3. If the email is already subscribed, no duplicate subscription is created
4. Subscription failures are caught and logged, they never block order placement

This approach is fully compatible with GDPR and CAN-SPAM since the customer explicitly opts in via an unchecked-by-default checkbox (configurable).

Qty Increment Controls

When enabled, +/- buttons appear next to the quantity of each item in the order summary:

• Click +, increments by the product's qty_increments value (default 1, can be 0.5, 2, 5, etc.)
• Click −, decrements similarly, respecting minimum qty
• Updates the cart via AJAX, no page reload
• Totals refresh automatically
• Stock-aware, + button disables when max stock is reached
• Works on both decimal and integer qty products

Custom CSS & JS Injection

For quick tweaks without a theme override, use the Custom CSS and Custom JS fields in admin:

Custom CSS example:

.checkout-extended .place-order-sidebar button {
 background: linear-gradient(90deg, #7928ca, #ff0080);
 font-size: 16px;
}

Custom JS example:

document.addEventListener('DOMContentLoaded', function() {
 // Track checkout step entry for analytics
 if (window.gtag) {
 gtag('event', 'begin_checkout');
 }
});

Both textareas are restricted to admin users with the Panth_CheckoutExtended::config ACL permission. Content is injected as @noEscape because it is admin-authored.

Common use cases:

• Override specific checkout styles without creating a theme
• Add tracking pixels or GA4 / Meta conversion scripts
• Inject A/B testing snippets
• Hide or show specific elements with CSS

Troubleshooting

Compatibility

Tested on:

• Magento 2.4.8-p4 with PHP 8.4
• Magento 2.4.7 with PHP 8.3
• Magento 2.4.6 with PHP 8.2

Installation

Composer Installation (Recommended)

composer require mage2kishan/module-checkout-extended
bin/magento module:enable Panth_Core Panth_CheckoutExtended
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f
bin/magento cache:flush

Manual Installation via ZIP

1. Download the latest release ZIP from Packagist or the Adobe Commerce Marketplace
2. Extract the contents to app/code/Panth/CheckoutExtended/ in your Magento installation
3. Make sure app/code/Panth/Core/ is also present (free required dependency)
4. Run the same commands as above starting from bin/magento module:enable

Verify Installation

bin/magento module:status Panth_CheckoutExtended
# Expected output: Module is enabled

After installation, navigate to:

Admin → Stores → Configuration → Panth Extensions → Checkout Extended

Configuration

Open Stores → Configuration → Panth Extensions → Checkout Extended. Every setting below is scoped per store view (default → website → store view), so a multi-store setup like acme.example.com and acme.example.com/eu can run different layouts, colors, and newsletter copy. Flush the cache after saving (bin/magento cache:flush).

All values live under the config path prefix panth_checkout_extended/, handy for bin/magento config:set and CI/CD pipelines:

# Example: switch a store to a 2-column layout with a sticky left sidebar
bin/magento config:set panth_checkout_extended/layout/columns 2
bin/magento config:set panth_checkout_extended/layout/sidebar_position left
bin/magento config:set panth_checkout_extended/layout/sidebar_sticky 1
bin/magento cache:flush

General

Layout

Style

Cart & Order Summary

Newsletter Subscription

Form Styles

Shipping

Payment

Billing

Custom Code

License

Commercial, see LICENSE.txt. One license per Magento production installation. Includes 12 months of free updates and email support.

Developer Reference: Body Classes & CSS Variables

Every admin option translates into a predictable body class or CSS custom property on the checkout page, so theme developers can target any configuration state without touching templates.

Body classes (applied when the extension is enabled):

CSS custom properties (emitted on :root at checkout):

Example, restyle only the 3-column glassmorphism configuration on example.com:

body.panth-checkout-3col.panth-card-glass .opc-block-summary {
 backdrop-filter: blur(18px);
 border-radius: var(--panth-checkout-radius);
}