Introducing Magento 2 One Step Checkout extension – UB One Step Checkout

Aug 19, 2020 Update: UB One Step Checkout v1.1.0 is fully compatible with the latest Magento 2.4.
Aug 30, 2018 Update:UB One Step Checkout version 1.0.4 released. It now allows to change product variations of the configurable products in the mini cart at the checkout page, plus other incremental updates.

July 6, 2018 Update: UB One Step Checkout version 1.0.2 Stable has been released, enhanced with Delivery Date & Time functionality, House Security Code (optional) and fully compatible with Magento 2.2.5.
May 15, 2018 Update: GeoIP2 API integration is now available in UB One Step Checkout. It helps detect customer address automatically based on the IP address.

Today is an exciting day for me because I get to announce the release of a brand new Magento 2 one step checkout extension at Ubertheme -- UB One Step Checkout (beta), that we have been working on for quite some time.

The Magento 1 & 2 are great for a lot of things, but building an effective one step checkout page is not one of those things. It can be downright frustrating when working with six-step accordion checkout process in Magento 1.x. Getting maximum value from the reduced two-step flow in Magento 2 can be challenging as well.

Hence, we committed to building our new UB One Step Checkout. You will get a complete checkout solution that makes it easier than ever to build a one page checkout in Magento 2. The ultimate goal is to help you maximize successful checkout transactions.

Magento 2 One Step Checkout

So what to expect from the all new UB One Step Checkout? Here are some of the cool features that will be rolled out on the initial release.

Let’s jump in.

Magento 2 One Step Checkout -- Reduce abandonment cart

Here is how UB One Step Checkout checkout page looks when accessed through a desktop.

Magento 2 One Step Checkout - 2 Column Layout

UB One Step Checkout -- 3 Column Layout

As you can notice, UB One Step Checkout is composed of a single-page checkout that allows the customer to have a complete overview of all the field requirements. This ensures everything in your customer’s cart is properly detailed, including shipping and taxes fees. This also gives the illusion that the process is not that long for customers to follow through, affording added convenience as an incentive for your customer to complete the purchase.

With 2-column and 3-column layouts to choose from, UB One Step Checkout helps to streamline your checkout across all devices.

Guest Checkout

To ensure faster increase on your conversions, UB One Step Checkout supports guest checkout by default.

Magento 2 One Step Checkout - Guest Checkout

Guest Checkout and registration at the checkout page

When first entering the UB One Step Checkout page, first-time customers simply fill in their email address and shipping details, without being forced to create an account. They also have the option to register at the checkout page if they prefer to.

Guest checkout option is a quick and hassle free option for customers whose only goal in your Magento is to purchase a product or service without having to log-in or register. Usually, these are one-time clients with no intention of earning purchase points for discounts on future transactions. You definitely should provide such express checkout option.

For ones who are account holders, UB One Step Checkout automatically detects the registered email and shows log-in form accordingly. If they want to checkout quickly, they can also continue checking out without signing in.

Magento 2 One Step Checkout - Login

UB One Step Checkout automatically detects the registered email

Ajax Updating fields

UB One Step Checkout gives your customers the freedom to make changes during the checkout process with Ajax updates. Our extension adds Ajax functionality to blocks such as Order Summary, Payment Method, Shipping Method, Coupon Code blocks, so all dynamic changes are updated without page reloads.

For instance, as shown in the screenshot below, the Magento 2 one step checkout page has an easy option for product quantity changes, modification, and even removal of item on the fly.

Magento 2 One Step Checkout - Ajax updating fields

Ajax functionality in Order Summary, Payment Method, Shipping Method, Coupon Code blocks

Or upon the change of shipping method, our extension will automatically update the shipping rates to the totals. This way gives your customers a complete overview on the shipping fee and all other fees in total price breakdown. No vague list of surcharges or hidden fees are in place upon checkout. This has become more important these days, especially in the context that roughly 70% of your customers do abandon their carts just before checkout.

Address auto-suggestions

Another part of enhancement in UB One Step Checkout is Google Places API integration that makes entering place names within the checkout page much faster and easier.

Figure below shows an autocomplete address field, and the pick list of place predictions supplied as the customer enters the address details:

Magento 2 One Step Checkout - Address Autosuggestion

Addresses autosuggestion in UB One Step Checkout Extension

When user selects an address from the list of suggestions, the API finds the state and city and automatically fills in the fields for your customers.

Magento 2 One Step Checkout - Address Autosuggestion

Autocomplete for addresses in UB One Step Checkout Extension

By integrating the Google Place Autocomplete API, you do not only half of the job for your clients. You also lessen the risk of your customer typo errors that may result to invalid details, especially on mobile (small keyboards with ‘fat fingers’). That way your customers will navigate through the checkout steps much faster.

Ability to add and edit shipping/billing fields

When checking out of your store, customers are required to enter some basic shipping and billing address information. UB One Step Checkout allows you to custom tailor these address input fields with ease.

Depending on your business, they can be changed to display a different label, show default or example text, or have their order rearranged. This way lets you flexibly manage the variations in default form fields, both required and optional.

Magento 2 One Step Checkout - Edit shipping billing address

Easy to add or edit, rearrange fields by selecting and dragging them up or down in the list

For instance, if you set up a store in Australia or New Zealand, you might put the ‘suburb’ or ‘town’ in address line, instead of ‘city’ as in the North American; or a merchant might require to add a ‘House Number’ in the shipping address. For these country-specific address formats, our Magento 2 one step checkout extension makes it quick and easy to apply such manual modification via the admin.

Though UB One Step Checkout provides ability to manage the address form fields, we recommend keeping the check out as short as possible. Having an extended checkout experience can affect your conversion rate.

Flexible Shipping and Payment methods

Magento 2 One Step Checkout - Support Multiple Shipping and Payment Methods

UB One Step Checkout -- Support Multiple Shipping and Payment Methods

Shipping and payment methods are among the most important factors that greatly reduce checkout friction for any store. Thus, it shouldn’t come as much of a surprise that a number of default payment and shipping options are available -- the most notable one being Paypal, Braintree (payment) and Table Rates, UPS etc. (shipping) which come bundled with Magento 2.

UB One Step Checkout is designed to support multiple payment and shipping methods. At this phase, our checkout extension starts first with default methods that have been well thought out in Magento 2. The point is to give the user choice -- offering worldwide delivery and popular payment methods -- and ensure easy integration.

Multiple layouts & Easy customization

UB One Step Checkout has its very own three premade layouts built right into the core of the extension: Default, 2-Column and 3-Column Grid. They makes the checkout page easier on the eyes and visually appealing.

Using it is easy and straightforward, you simply select the one that works better for your store via the extension’s admin.

Here’s a quick tour:

Magento 2 One Step Checkout -- 2 Column Layout (view graphic in full size):

Magento 2 One Step Checkout - 2 Column Layout

UB One Step Checkout -- 2 Column Layout

Magento 2 One Step Checkout -- 3 Column Layout (view graphic in full size):

Magento 2 One Step Checkout - 2 Column Layout

UB One Step Checkout -- 2 Column Layout

Magento 2 One Step Checkout -- Responsive:

Magento 2 One Step Checkout - Responsive Checkout

Responsive Checkout, on any device

And if you want to override the default style of our premade layouts to make a design all your own, head over to the Design | Custom CSS section to add your own CSS styles. You can modify a few elements to enhance the page or the entire checkout page at your discretion.

Magento 2 One Step Checkout - Ajax Updating Fields

Custom tailor the entire checkout page with custom CSS

Trust signals, Terms & Conditions and more

Newsletter opt-in checkbox, security signals or Terms & Condition -- what should these elements tell you as a Magento store owner? Simple: those are a no-brainer. To further enhance your customer-checkout page interactions, UB One Step Checkout integrates such elements as a helpful way to give the customers a sense of security and personal control of the transaction.

Upcoming Features in UB One Step Checkout

As we continue to enhance our UB One Step Checkout, be sure to check back our demo to see new meaningful features that will eventually be rolled into. We would like to give you a little sneak preview of what is to come:

And other upcoming features to look forward to:

  • GeoIP API integration to autodetect countries of customers by their IP
  • Supporting Gift Wrap service, Integrating Gift Message in the checkout page.
  • Allow to enable home security code in the checkout page
  • Allow to edit product options right in the checkout page
  • Display delivery date and time options
  • (to be updated)

For now, we invite you to take our all new Magento 2 one step checkout demo for a free test drive:

    UB ONE STEP CHECKOUT DEMO

Storefront URL:
-- Storefront URL: http://one-step-checkout.magento2.demo.ubertheme.com/

Back-end Demo:
-- URL: http://one-step-checkout.magento2.demo.ubertheme.com/admin/ (NOTE: you will be logged in automatically)

Demo Customer Access::
-- Email: [email protected]
-- Password: customer@123

Magento 2 One Step Checkout - Responsive Checkout

We are celebrating UB One Step Checkout with a special 50%OFF all new purchase. This deal will only be available for a limited time, so be sure to grab the offer before it’s too late.

    Buy Now With Introductory 50% OFF

(Use the coupon code: UBCheckout)

Update: The extension is currently available for purchase and update in our Magento 2 extensions store, or you can try it first-hand in our demo above.

We’re introducing more enhancements all the time, so the longer you’re a member, the more valuable it becomes!

Written By

Comments