README

Magento 2 Checkout Extended: Multi-Column Checkout with Sticky Sidebar, Newsletter, and Qty Controls (Hyva + Luma)

Replace the dated Magento accordion checkout with a clean, configurable multi-column layout. Panth Checkout Extended adds a sticky order summary sidebar, newsletter opt-in, qty +/- controls, coupon code in the sidebar, a sidebar place-order button, four card styles, an accent color picker, border radius control, and custom CSS/JS injection. Every option is togglable from the admin panel with no code changes required.

Product page: kishansavaliya.com/magento-2-checkout-extended.html

Quick Answer

What is Panth Checkout Extended? It is a Magento 2 checkout extension that replaces the default two-step accordion checkout with a configurable multi-column layout, a sticky sidebar, and a set of UX improvements that are all controllable from the admin panel.

What does it add to my store?

A configurable 1, 2, or 3 column layout so shipping, payment, and the order summary can sit side by side.
A sticky order summary sidebar that keeps the place-order button, coupon code, and newsletter checkbox visible as the customer scrolls.
Qty +/- increment controls in the order summary, respecting product-level qty increments.
A newsletter subscription checkbox at checkout for guest and logged-in customers.
Four card styles (Elevated, Bordered, Flat, Glassmorphism), an accent color picker, and a border radius control.
Custom CSS and JS textareas in admin for quick tweaks without a theme override.

Which themes are supported? Both Luma (native) and Hyva storefronts that run the standard Magento checkout. It does not apply to the separate Hyva Checkout product.

What does it need? Magento 2.4.4 to 2.4.8, PHP 8.1 to 8.4, and the free mage2kishan/module-core package.

Need Custom Magento 2 Development?

Get a free quote for your project in 24 hours for custom modules, Hyva themes, performance work, M1 to M2 migrations, and Adobe Commerce Cloud.

Kishan Savaliya

Top Rated Plus on Upwork

100% Job Success • 10+ Years Magento Experience Adobe Certified • Hyva Specialist

Panth Infotech Agency

Magento Development Team

Custom Modules • Theme Design • Migrations Performance • SEO • Adobe Commerce Cloud

Visit our website: kishansavaliya.com | Get a quote: kishansavaliya.com/get-quote

Who Is It For
Key Features
Compatibility
Installation
Configuration
How It Works
FAQ
Support
About Panth Infotech
Quick Links

Who Is It For

Stores where the default checkout hurts conversion because the place-order button is buried and shoppers have to scroll past a long accordion form.
Merchants who want a modern checkout UI without hiring a developer for every small styling change. The accent color, border radius, and card style are all admin settings.
B2B stores where buyers order by part number and want the product SKU visible in the order summary.
Stores that want newsletter signups at checkout without a separate integration. The checkbox is built in and works for both guests and logged-in customers.
Hyva storefronts running the standard Magento checkout that want multi-column layout and sidebar improvements.

Key Features

Multi-Column Checkout Layout

1, 2, or 3 column layout selectable from the admin panel without touching a template.
Sidebar position left or right.
Sticky sidebar keeps the order summary panel fixed as the customer scrolls.
Body classes added automatically so you can target any configuration state with CSS.

Sidebar-First UX

Place-order button in the sidebar so it is always visible, not buried at the bottom.
Coupon code moved to the sidebar out of the payment step.
Newsletter checkbox in the sidebar for a passive, always-visible opt-in.
Cart items auto-expanded on page load, no click needed.
Discount input auto-expanded and ready at page load.

Newsletter Subscription at Checkout

Checkbox in the order summary sidebar with a configurable label and default checked state.
Works for guest and logged-in customers using payment extension attributes for clean transport.
Skips duplicate subscriptions silently.
Failures are caught and logged and never block order placement.

Qty Increment Controls in Order Summary

+/- buttons next to each item in the order summary.
Respects product-level qty_increments (e.g. 0.5 or 5 step).
Updates cart via AJAX with totals refreshing in place.
Stock-aware — the + button disables at max available stock.

Modern UI Styling

Card styles: Elevated (shadow), Bordered, Flat, Glassmorphism.
Accent color — admin color picker with server-side hex validation. Exposed as --panth-checkout-accent CSS variable.
Border radius — pixel-level control. Exposed as --panth-checkout-radius CSS variable.
Step indicators — optional numbered badges above each checkout section.
Field modes — Compact (multiple fields per row) or Full Width (one field per row).
Placeholder toggle and Tooltip toggle for form fields.
Billing title visibility toggle.

Checkout UX Enhancements

Auto-save shipping info as the customer types, so the payment step loads instantly.
Real-time billing sync when "same as shipping" is checked.
Product SKU display in the order summary.
Clickable product names linking back to the product page.
Default shipping method pre-selection by composite code (e.g. flatrate_flatrate).
Hide single shipping method when only one option is available.
Sort shipping by price cheapest first.
Default payment method pre-selection by code (e.g. checkmo).

Admin and Developer

Custom CSS textarea injected inline on the checkout page only.
Custom JS textarea injected via RequireJS with a try/catch wrapper.
ACL resource Panth_CheckoutExtended::config for granular admin permissions.
Per-store-view scope — all settings respect Magento's standard scope hierarchy.

Quality

MEQP-compliant with constructor dependency injection only, no ObjectManager.
No core file modifications — clean plugin and observer architecture.
Translation ready using Magento's __() function throughout.
Full Page Cache compatible — the checkout page itself is not cached by default in Magento.

Compatibility

Requirement	Versions Supported
Magento Open Source	2.4.4, 2.4.5, 2.4.6, 2.4.7, 2.4.8
Adobe Commerce	2.4.4, 2.4.5, 2.4.6, 2.4.7, 2.4.8
Adobe Commerce Cloud	2.4.4 to 2.4.8
PHP	8.1.x, 8.2.x, 8.3.x, 8.4.x
Luma Theme	Native support
Hyva Theme	Supported when running the standard Magento checkout
Required Dependency	`mage2kishan/module-core` ^1.0 (free, installed automatically)

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

Download the latest release from Packagist or from the product page.
Extract it to app/code/Panth/CheckoutExtended/ in your Magento install.
Make sure Panth_Core is installed too (required dependency).
Run the commands above starting from bin/magento module:enable.

Verify Installation

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

After install, open:

Admin -> Stores -> Configuration -> Panth Extensions -> Checkout Extended

Configuration

Go to Stores -> Configuration -> Panth Extensions -> Checkout Extended. All settings are scoped per store view.

General

Setting	Group	Default	Description
Enable Checkout Extended	General	Yes	Master toggle. When No, the storefront reverts to the default Magento checkout.

Layout

Setting	Group	Default	Description
Columns	Layout	3	Number of columns: 1 (stacked), 2 (content + sidebar), or 3 (shipping, payment, and summary side by side).
Sidebar Position	Layout	Right	Place the order summary sidebar on the Left or Right.
Sticky Sidebar	Layout	No	When Yes, the order summary stays pinned as the customer scrolls.

Style

Setting	Group	Default	Description
Card Style	Style	Elevated (Shadow)	Visual treatment for checkout cards: Elevated, Bordered, Flat, or Glassmorphism.
Accent Color	Style	#1a1a2e	Admin color picker. Drives buttons and highlights through `--panth-checkout-accent`. Non-hex values fall back to the default.
Border Radius (px)	Style	12	Corner radius for cards and form elements. Output as `--panth-checkout-radius`.
Step Indicators	Style	No	When Yes, numbered badges appear above each checkout section.

Cart and Order Summary

Setting	Group	Default	Description
Qty Increment Controls	Cart & Order Summary	No	When Yes, +/- buttons appear next to each item. Respects product qty_increments. Updates via AJAX.
Show SKU	Cart & Order Summary	No	Shows the product SKU below each item name in the summary.
Product Link	Cart & Order Summary	No	Makes item names in the summary clickable, linking to the product page.

Newsletter Subscription

Setting	Group	Default	Description
Enable Newsletter Checkbox	Newsletter Subscription	Yes	Shows a newsletter opt-in checkbox in the sidebar at checkout.
Checkbox Label	Newsletter Subscription	Subscribe to our newsletter	Label text shown next to the checkbox. Translatable.
Checked by Default	Newsletter Subscription	Yes	When No, the box is unchecked by default, suitable for GDPR strict opt-in markets.

Form Styles

Setting	Group	Default	Description
Field Mode	Form Styles	Compact	Compact: multiple fields per row. Full Width: one field per row.
Use Placeholders	Form Styles	No	When Yes, label text is mirrored into field placeholders.
Show Tooltips	Form Styles	No	When Yes, tooltip icons with help text appear next to form fields.

Shipping

Setting	Group	Default	Description
Default Shipping Method	Shipping	(empty)	Pre-selects a shipping method by composite code, e.g. `flatrate_flatrate`.
Hide Single Method	Shipping	No	When Yes and only one shipping method is available, the radio selector is hidden.
Sort by Price	Shipping	No	When Yes, shipping methods are sorted cheapest first.

Payment

Setting	Group	Default	Description
Default Payment Method	Payment	(empty)	Pre-selects a payment method by code, e.g. `checkmo`.

Billing

Setting	Group	Default	Description
Show Billing Title	Billing	Yes	When No, the "Billing Address" section title is hidden.

Custom Code

Setting	Group	Default	Description
Custom CSS	Custom Code	(empty)	Raw CSS injected inline on the checkout page. Do not include style tags.
Custom JS	Custom Code	(empty)	Raw JavaScript injected via RequireJS at checkout, wrapped in try/catch. Do not include script tags.

How It Works

An observer applies a custom layout handle to the checkout page based on the active configuration.
The layout handle adds the multi-column wrapper, sticky sidebar component, and sidebar blocks (place-order, coupon, newsletter checkbox, qty controls).
A block renders dynamic CSS variables and body classes to the page head, so every admin setting is reflected in the storefront without a template change.
The newsletter checkbox state is captured via a payment extension attribute and processed by two plugins: one for guests (by email) and one for logged-in customers (by customer ID).
Qty increment +/- buttons update the cart via AJAX using the standard Magento cart API. Totals refresh in place.
Auto-save shipping logic sends the shipping address and method to the server as the customer types, using debounced AJAX with fingerprint deduplication. The payment step loads instantly when reached.

FAQ

Is Panth Checkout Extended compatible with Hyva?

Yes, on Hyva stores that use the standard Magento checkout (the Luma/KnockoutJS checkout, which is the most common Hyva setup). The extension targets that checkout and works on both Luma themes and Hyva storefronts running it. It does not apply to the separate Hyva Checkout product.

Does it work with Adobe Commerce?

Yes. It works identically on Magento Open Source, Adobe Commerce on-premise, and Adobe Commerce Cloud, versions 2.4.4 through 2.4.8.

Will it conflict with third-party payment methods?

No. The extension uses Magento's standard checkout layout and payment extension attributes. All third-party payment methods (Stripe, Braintree, PayPal, Razorpay, Klarna, Afterpay, and others) continue to work. The default payment method setting only pre-selects a method, it does not remove any others.

Does it slow down checkout?

No. The auto-save shipping logic actually speeds up the checkout by pre-saving the address while the customer is still typing, so the payment step loads instantly. No additional HTTP requests are made on page load beyond the default Magento checkout.

Is the newsletter subscription GDPR-compliant?

Yes. The checkbox is an explicit opt-in. You can configure the default checked state and the label text. The subscription is only saved when the customer places the order. Failures are logged silently and never block order placement.

Can I change checkout colors without editing code?

Yes. The Accent Color field is an HTML5 color picker that drives buttons and highlights through a CSS variable. Border Radius (px) controls card and field corners. Combined with the four card styles, most rebranding changes need zero CSS.

How do I switch to a 2-column layout?

Go to Stores -> Configuration -> Panth Extensions -> Checkout Extended -> Layout and set Columns to 2, then flush the cache. You can also use bin/magento config:set panth_checkout_extended/layout/columns 2 and bin/magento cache:flush.

Does it support multi-store setups?

Yes. All settings respect Magento's scope hierarchy (default, website, store view), so you can configure different layouts and colors per store view.

Can I translate it?

Yes. All user-facing strings use Magento's __() function. Add a CSV file at app/i18n/<locale>/Panth_CheckoutExtended/ or use Inline Translation.

Does it need the free Panth Core module?

Yes. mage2kishan/module-core is a free required dependency. Composer installs it automatically.

Support

Channel	Contact
Product Page	kishansavaliya.com/magento-2-checkout-extended.html
Email	kishansavaliyakb@gmail.com
Website	kishansavaliya.com
WhatsApp	+91 84012 70422
GitHub Issues	github.com/mage2sk/module-checkout-extended/issues
Upwork (Top Rated Plus)	Hire Kishan Savaliya
Upwork Agency	Panth Infotech

Response time: 1-2 business days.

Need Custom Magento Development?

Looking for custom Magento module development, Hyva checkout work, store migrations, or performance tuning? Get a free quote in 24 hours:

About Panth Infotech

Built and maintained by Kishan Savaliya (kishansavaliya.com), a Top Rated Plus Magento developer on Upwork with 10+ years of eCommerce experience.

Panth Infotech is a Magento 2 development agency that builds high quality, security focused extensions and themes for both Hyva and Luma storefronts. The extension suite covers SEO, performance, checkout, product presentation, customer engagement, and store management, with each module built to MEQP standards and tested across Magento 2.4.4 to 2.4.8.

Browse the full extension catalog on our Magento extensions page or on Packagist.

Quick Links

Resource	Link
Product Page	magento-2-checkout-extended.html
Packagist	mage2kishan/module-checkout-extended
GitHub	mage2sk/module-checkout-extended
Website	kishansavaliya.com
Free Quote	kishansavaliya.com/get-quote
Upwork (Top Rated Plus)	Hire Kishan Savaliya
Upwork Agency	Panth Infotech
Email	kishansavaliyakb@gmail.com
WhatsApp	+91 84012 70422

Ready to give your shoppers a faster, cleaner checkout?

SEO Keywords: magento 2 one page checkout, magento 2 checkout extension, magento 2 one step checkout, magento 2 multi column checkout, magento 2 sticky sidebar checkout, magento 2 newsletter at checkout, magento 2 qty increment checkout, magento 2 sidebar place order, magento 2 coupon in sidebar, magento 2 default shipping method checkout, magento 2 preselect payment method, magento 2 hide single shipping method, magento 2 sort shipping methods by price, magento 2 checkout card style, magento 2 checkout accent color, magento 2 checkout step indicators, magento 2 checkout border radius, magento 2 custom css checkout, magento 2 custom js checkout, magento 2 checkout placeholders, magento 2 checkout tooltips, magento 2 show sku order summary, magento 2 checkout product link, magento 2 hide billing title, magento 2 checkout auto save, magento 2 billing sync, magento 2 checkout optimization, magento 2 conversion rate checkout, magento 2 luma checkout, magento 2 hyva standard checkout, magento 2 glassmorphism checkout, panth checkout extended, panth infotech, mage2kishan checkout, kishan savaliya magento, top rated plus magento freelancer, hire magento developer upwork, magento 2.4.8 checkout module, php 8.4 checkout module, adobe commerce checkout extension, magento 2 b2b checkout, magento 2 guest checkout newsletter

mage2kishan / module-checkout-extended

Maintainers

Package info

Statistics

Security