Overview
One Page Checkout puts the whole OpenCart checkout on one clean screen: contact, address, delivery, payment and the order summary with the Place order button. Delivery options, payment options, taxes and totals update while the buyer types, without a page reload. The order itself is still built by OpenCart's own checkout code and paid through your normal payment extensions.
- One screen, three layouts. Two columns (details left, summary right), three columns (details, delivery and payment, summary) or one narrow column. The summary stays in view while scrolling.
- Fast for guests. E-mail, name and address, then Place order. Creating an account is a tick box (or switched off, or required: your choice). Returning customers log in on the page and pick a saved address.
- Live refresh. Choosing a country loads its regions; the address loads the delivery options of your shipping extensions and the payment options of your payment extensions; totals, taxes and coupons update at once.
- Phones first. One column under 992 px, the order summary behind a button at the top, and a bar at the bottom with the total and the Place order button. Inputs use the right phone keyboards and browser autofill.
- Your payment and shipping extensions. Cash on delivery, bank transfer, cheque, free checkout and redirect gateways confirm when the buyer presses Place order. Gateways with card fields or wallet buttons show their own form under the summary. Any method can be sent to the standard OpenCart checkout instead.
- Coupon, gift certificate, reward points. Boxes in the summary, closed until needed, using OpenCart's own order totals.
- Field editor. Show or hide company, phone, address line 2, city and postcode; make fields required or optional; full or half width.
- Terms, note, B2B. Your checkout terms tick box next to the button, an order note, an optional customer group choice and an optional VAT / tax ID that appears on the admin order page.
- Address autocomplete. Browser autofill always; Google Places suggestions with your own key (optional); other scripts can fill an address with
window.kvOpc.fill(). - Analytics events. begin_checkout, add_shipping_info and add_payment_info for a Google tag or Tag Manager that is already on the page.
- Safe to switch on. Preview mode (only your browser), a link to the standard checkout, typed data kept after a reload, and the orders are written exactly like the core checkout writes them.
The checkout keeps the normal checkout address (index.php?route=checkout/checkout), so menus, cart buttons and themes keep working. No OCMOD, no core file edits: five events. One licence covers OpenCart 4 and 3. Tested on OpenCart 4.1.0.4 and 3.0.5.1 with the default themes; other 4.0.2.x to 4.1.x and 3.0.3.8 to 3.0.5.x versions are expected to work but are not tested.
Installation
Requirements
- OpenCart 4.0.2.0 to 4.1.x, or 3.0.3.8 to 3.0.5.x
- PHP 7.4 or newer
- At least one installed payment method and, for products that need delivery, one shipping method
Install on OpenCart 4
- Go to Extensions > Installer and upload
kv_one_page_checkout.ocmod.zip. - Press the install button next to One Page Checkout.
- Go to Extensions > Extensions, choose Modules and install One Page Checkout, then press Edit.
Install on OpenCart 3
- Go to Extensions > Installer and upload
kv_one_page_checkout-oc3.ocmod.zip. - Go to Extensions > Modifications and press Refresh.
- Go to Extensions > Extensions, choose Modules and install One Page Checkout, then press Edit.
First steps
- On Settings, choose Who gets it: Only the preview link if you want to look first.
- On Overview, press Open the preview (with a product in your cart) and place a test order with an offline method such as Cash On Delivery.
- Set Who gets it back to Every customer. From now on the normal checkout address shows the one page checkout.
Licence
Enter the licence key from your Kavio Labs account on the Settings page. The extension runs as a 14-day trial without a key. Without a valid licence, customers get the standard OpenCart checkout again; your settings stay and the admin pages always work.
Uninstall
Extensions > Extensions > Modules > One Page Checkout > Uninstall removes the events, the settings and the extension's own table (tax IDs and statistics). Orders stay untouched. Customers get the standard OpenCart checkout at once.
Configuration
Extensions > Extensions > Modules > One Page Checkout, or Extensions > One Page Checkout in the admin menu. The page has two tabs: Overview and Settings.
Checkout page
| Setting | Default | What it does |
|---|
| Status | On | Off: customers get the standard OpenCart checkout. |
| Who gets it | Every customer | Only the preview link: only a browser that opened the preview link from the Overview tab gets the one page checkout. |
| Layout | Two columns | Two columns, three columns (two under 1200 px) or one column. Under 992 px every layout is one column. |
| Order summary | all on | Keep in view while scrolling; product images; change quantities and remove items. |
| Phones | On | Bar at the bottom with the total and the Place order button (under 768 px). |
| Button text / Text under the button | Place order / Secure checkout | Your words. An empty second text hides the line. |
| Accent colour | Blue | Buttons, selected options and step numbers. |
Customer and account
| Setting | Default | What it does |
|---|
| Accounts | Guest checkout, account optional | Or guest only, or every order creates an account. When guest checkout is off in System > Settings > Option, or the cart has downloads or subscriptions, an account is always created (OpenCart's own rule). |
| Log in box | On | "Already have an account? Log in" opens a small login form on the page. |
| Newsletter | On | Newsletter tick box when an account is created. |
| Customer groups | On | Buyers choose a group when System > Settings > Option > Customer Groups shows more than one. |
| Business details | Off | Asks for a VAT / tax ID (your label). It is saved with the order and shown at the top of the admin order page. |
Fields
Every field starts at Default, which is what OpenCart does today. Per field you can choose Show / Hide, Required / Optional and Full / Half width. E-mail and country are always shown and required; the region follows the country (required when the country has regions); the postcode is always required where the country needs one. Custom fields from Customers > Custom Fields (account and address) appear with their own rules for the selected customer group; file upload custom fields are not shown on the one page checkout.
Payment methods
Each installed payment method has a mode:
- One page (automatic): methods without their own form (cash on delivery, bank transfer, cheque, free checkout, gateways that redirect) confirm when the buyer presses Place order. Methods with card fields, iframes or wallet buttons show their own form under the summary.
- One page, show the payment form: always show the method's own block under the summary after Place order.
- Use the standard checkout: the buyer sees a button that opens the standard OpenCart checkout with this method; what they typed is kept in the session.
Standard checkout link adds a small link under the button.
Discounts, note and data
Coupon, gift certificate (OpenCart 3) and reward points boxes appear when the matching order total is enabled in Extensions > Order Totals (reward points only for logged-in customers with points). Closed until needed shows a link instead of the open box. Keep typed data restores typed values after a reload in the same browser tab (sessionStorage); passwords are never kept.
Address autocomplete and analytics
- Google Places API key: optional, your own key with the Places API enabled. Empty: no request to Google at all. Limit suggestions to: up to five two-letter country codes.
- Analytics events: pushes begin_checkout, add_shipping_info and add_payment_info to
gtag() or dataLayer when your page already has them. Nothing is loaded by the extension. The purchase event stays with your success page or tracking extension.
Licence
Key, status and a Check now button. See Installation.
Usage
What the buyer does
- Contact: e-mail, name and (if you show it) phone. Returning customers press Log in, enter their password and the page reloads with their saved addresses.
- Address: the browser fills it from its autofill, or Google suggests addresses when you set a key. Choosing the country loads its regions. When your store collects a billing address, Deliver to a different address opens a second address.
- Delivery method and Payment method appear as soon as the address is known, with the prices of your shipping extensions. Changing them updates the totals at once.
- Order summary: quantities with minus and plus, remove an item, coupon / gift certificate / reward points, totals with taxes, your terms tick box and Place order. On phones the bar at the bottom shows the total and the same button.
- Place order checks every field at once and shows the problems next to the fields. When everything is fine, OpenCart builds the order and the payment method takes over: offline methods confirm at once and the buyer lands on your success page; card and wallet methods show their own form under the summary.
What happens to the order
The extension fills the checkout session in the same format as OpenCart's own checkout steps (customer or guest, payment address, shipping address, shipping method, payment method, comment, terms) and then runs OpenCart's own confirm step. That step writes the order, and your payment extension confirms it. Order totals, taxes, stock, e-mails and order statuses therefore work like with the standard checkout. Logged-in customers who type a new address get it in their address book, like on the standard checkout. New accounts are created and logged in during checkout.
Overview tab
Orders through the one page checkout in the last 30 days, their revenue, their share of all orders, and where they came from (phones, tablets, desktops; guests, new accounts, logged-in customers). The store checks list what decides the page: guest checkout, payment and shipping methods, checkout terms and (OpenCart 4) whether a billing address is collected.
Preview and the standard page
- Preview: set Who gets it to the preview link and press Open the preview. Only that browser sees the one page checkout and a notice at the top.
- Standard page:
index.php?route=checkout/checkout&kv_opc=off opens the standard checkout for that visitor, with a link back. Payment methods set to Use the standard checkout use this.
For developers
window.kvOpc.fill(prefix, {address_1, address_2, city, postcode, country_iso2 | country_id, zone_code | zone_name | zone_id}) fills an address ('' = first address, 'ship_' = second) and refreshes the page.window.kvOpc.refresh(), window.kvOpc.place(), window.kvOpc.on(name, fn).- DOM events on
document: kv-opc:ready, kv-opc:refresh, kv-opc:address, kv-opc:order, kv-opc:begin_checkout, kv-opc:add_shipping_info, kv-opc:add_payment_info. - The page uses its own CSS classes (
kv-opc-*) and the CSS variable --kv-accent.
FAQ
Are the orders the same as with the standard checkout?
Yes. OpenCart's own confirm step builds the order from the same session data. In our tests, orders placed through the one page checkout matched orders placed through the standard checkout column by column (customer, addresses, products, options, totals with taxes, history), on 4.1.0.4 and 3.0.5.1.
Which payment methods work?
Cash On Delivery and Bank Transfer were tested with real orders. Cheque / Money Order and Free Checkout use the same kind of confirm button but were not run in our tests. Gateways that redirect or show their own form use their own block, which appears under the summary. Online gateways (PayPal, Stripe and others) were not run in our tests. If one misbehaves, set it to Use the standard checkout on the Settings tab.
Which shipping methods work?
All shipping extensions that give OpenCart quotes, because the extension asks OpenCart for the quotes. Flat Rate and Free Shipping were tested.
Does it change core files or use OCMOD?
No. Five events: the checkout page, a link back from the standard page, the tax ID on the admin order page, the licence check and the menu entry.
Will my theme still work?
The page sits inside your theme's header, footer and columns and uses its own styles, so it looks the same on Bootstrap 5 (OpenCart 4) and Bootstrap 3 (OpenCart 3) themes. Tested with the default themes.
What about other checkout extensions?
Extensions that add their own blocks to the standard checkout templates (for example extra tick boxes or delivery dates) do not show on the one page checkout. Use the standard checkout for those, or ask us.
Can buyers check out without an account?
Yes, when guest checkout is allowed in System > Settings > Option and the cart has no downloads or subscriptions (OpenCart's own rule).
Is typed data stored anywhere?
Only in that browser tab (sessionStorage) when Keep typed data is on; passwords never. Nothing is sent anywhere until the buyer places the order.
Does it use Google?
Only when you enter your own Google Places key. Without a key there is no request to Google.
What happens when the licence ends?
Customers get the standard OpenCart checkout; settings stay and the admin works.
