Back to Top

One Step Checkout For Magento 2

Updated 15 July 2024

Magento 2 One Step Checkout extension will simplify the checkout process by reducing the number of steps to only one thereby allowing your Adobe Commerce store customers to buy the products in just a single tap.

Moreover, the module also adds the ‘Buy Now’ button with the use of which customers can directly go to the one-step checkout page.

Also, the customer can sign in to the Magento 2 store during checkout via Apple ID, for that you can check the Magento 2 Sign In With Apple ID extension.

Note:  The Buy Now button will not be visible on the Bundle Product Page.

Note:

Searching for an experienced
Magento 2 Company ?
Find out More
  • Autocomplete API services are used in our module. To have these services you must have the Google API Key to make use of this extension. You can generate one by clicking  here
  • You need to enable billing for your Google account project under which the API Key is created. For more information please visit here

Watch the video to understand the extension workflow:

FwoDSjBaGPk

Features

  • All checkout steps have been brought together on a single page.
  • Single-button to complete/confirm the order.
  • Apply coupon code at the checkout page.
  • A login option for registered users at the one-step checkout page.
  • Guest check-out available.
  • The GST field is available in the address for the customers of India.
  • Adds the “Buy Now” button on the product page.
  • It makes the purchase process fast for customers.
  • It makes the purchase process easy for customers.
  • Admin can change the layout format.
  • The admin can enable the shipping address to autocomplete.
  • Checkout experience by making it easier and faster for customers to enter their shipping address.
  • The customer can buy the product directly from the search and category page. 
  • The admin can select enable to order comment field.
  • The customers can write down their extra requirements for the store.
  • Admin can enable this field for GST users.
  • For Indian users GST option is available.
  • The admin can add Blocks of Collapsible features.
  • The extension is compatible with the Hyva Theme

Installation

Customers will get a zip folder and they have to extract the contents of this zip folder on their system. The extracted folder has an src folder, inside the src folder you have the app folder. You need to transfer this app folder into the Magento 2 root directory on the server as shown below.

m2_installation

You need to run the following commands:

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento indexer:reindex
php bin/magento cache:flush

Multi-Lingual Configuration

For Multilingual support, please navigate to Store>Configuration>General >Locale Options. And select your desired language from the Locale option.

store configuration

Language Translation

If you need to do the module translation, please navigate to the following path in your system app/code/Webkul/OneStepCheckout/i18n.
Open the file named en_US.CSV for editing as shown in the below screenshot.

language

Once you have opened the file for editing. Replace the words after the†comma(,)†on the right with your translated words.

Magento2 Change Language

After editing and translating the CSV file, you need to save the translated file name according to your region language and country code such as – de_DE.CSV. Then upload the translated file to the same folder from where you have obtained it. Now your module translation is complete.

Magento2 Change CSV Language file

Configuration – Adobe Commerce One Step Checkout

After the successful installation of the module, the admin will navigate to Stores -> Configuration -> Webkul -> One Step checkout.

general configuration 1
general configuration 2
general configuration 3

General settings One Page Checkout

Here Admin has the option to enable/disable the One Page Checkout option.

Title

In the title, the admin will enter the store title that will show on the checkout page.

checkout with iagree

Select Checkout Layout

You can change the number of checkout columns in the “Select checkout Layout option” here you can select 2columns layout or 3columns. 

Check the below-given screenshot when the 3columns layout selected

checkout with iagree

Screenshot – when the 2columns layout selected

2layout with iagree

Enable Address Autocomplete for Shipping Address

The admin can enable the address to autocomplete. This checkout experience by making it easier and faster for customers to enter their shipping address. If this field is enabled, then the admin is also required to fill the Google Map API Keys. 

When customers arrive at checkout and start entering the first few characters of their address, Autocomplete will instantly provide a list of potential matching addresses.

Auto-Complete Shipping Address

Easier the shipment address fill-up process with the auto-complete feature. Facilitate your buyers to auto-complete the shipping address by locating it at the street address.

Screenshot-from-2023-06-30-13-53-36

After filling in the street address city and state/province will get auto-updated and the user can tap the Ship here button after that.

Screenshot-from-2023-06-30-13-55-33

Enable the order comment field

The admin can select enable to order comment field. In this, your customers can write down their extra requirements for the store.

And, In the Order comment field, the admin can enter the comment field name.

2layout add comment

Enable GST Field

Admin can enable this field for GST users. And this field will only be visible if a country is India selected.

enable gst

Enable Blocks Collapsible

To enable, select enable as “Yes” or else select “No” to disable the block Collapse layout.

checkout with iagree

See the screenshots when Blocks Collapse Enabled, customers can minimize the block.

collapsed with iagree

Design Configuration

Here, the admin of the store will be able to set the configurations for the one-step checkout page to – 

  • Set the title text color.
  • Choose the Order summary background color. 
  • Set the checkout background color. 
  • Choose the place order button color. 
  • Set the place order button text color.
  • Choose the tab heading background color.
  • Set the tab heading text color. 
  • Choose the Accordion background color. 
  • Select the accordion style as – None, Shadow, or Border.

Default Setting

Here, the admin can set the default settings for the one-page checkout that includes –  

  • Default shipping method
  • Default payment method
  • Default country
  • Default region/state
  • Default Zip Code & 
  • Default City

Lastly, after making the configuration settings Save the same. 

Magento 2 One Step Checkout – Registered Customers

If the admin has set the option “One Step checkout” as “Yes“, then the users(registered and guests) can access the one-step checkout functionality at the checkout time. The customer will add the products to the cart as normal. 

Additionally, customers can buy the product directly from the category page. 

Bags-Gear

Therefore, customers can also buy and add the product to the checkout page the from search page. 

Search-results-for-Overnight-Duffle-

After adding the product to the cart, the customer will go to the cart for the checkout where the customer can see the one-step checkout page.

proceed to checkout

The customer can also see the ‘Buy Now button on the product page. After clicking on the ‘Buy Now‘ button the customer will be redirected to the checkout where the customer can see the one-step checkout page.

buy now

Now, the customers can click on the Place Order button to complete the purchase as shown below in the snapshot.

checkout with iagree

After the customer clicks the “Place Order” button, the order will be placed. The customers can check the order details by going to the My Orders section under their account menu.

Customers can also directly log in to complete their purchase by clicking the Sign In button on the checkout page as shown below.

guest checkout with iagree

Clicking the link brings up a pop-up to enter the login details as shown below.

guest signin with iagree

Also, the customers can see the I agree to Terms & Conditions option on the one-step checkout page. After checking this option, the customer will be able to place the order. 

checkout with iagree

If the customer taps on the I agree the Terms & Conditions link the the user will be able to see the respective terms and conditions. 

iagree terms

MultiShipping One Step Checkout

On the one step checkout page, the customers will also be able to select different shipping addresses for the same products with multiple quantities so as to get them delivered to different addresses as required. 

192.168.15.132_m2462_pub_onestepcheckout_multishipping_asd-1

One Step Checkout – Guest Users

The guest user can click on the Place Order button to complete the purchase as shown below in the snapshot.

guest checkout

Further, customers from India can add their GST numbers with their address details. Registered as well as Guest customers can add their GST number along with their address information. After creating an account, the guest customer will be able to edit their GST number if needed by editing their address details under the Address Book menu option.

Note – The GST number should be of the format – 22AAAAA0000A1Z5 else the system will not take it.

Guest –

GST

Meanwhile, registered users can also add their GST number in the same way and can also edit it by navigating to their Address Book section and then clicking the “Edit Address“.

Moreover, after clicking the “Edit Address” link, you can easily edit your GST number. Then click the “Save” button to save the details.

Also, the admin will be able to see the GST number of the customers by navigating to Customers ->All Customer. Then the admin can tap the edit button for the customer whose details are to be seen. Now, under the Customer Information block go to the Address section.

192.168.15.132_m2462_pub_admin_customer_index_edit_id_4_key_a36bfdaf2e57f1a6d2060e034de07608072dfac64dc43a09ba72e9d89a61c689_asd

Compatible With Multi-Vendor Marketplace

The One-Step Checkout extension also works with Webkul’s Multi-vendor Marketplace. Magento 2 One-step Checkout is the best initialization to merge the various checkout steps into a single step.

After that, the marketplace customers can perform tasks like creating accounts, shipping address, shipping method, payment method, and order summary in one step.

As the marketplace has many sellers, so if the customer adds multiple seller products to the cart then also the one-step checkout will be applicable. In the image below, two different seller products are checkout using one-step checkout:

multi seller

Here, the marketplace customer can choose among various payment and shipping methods that are supported by the marketplace module.

The one-step checkout module also supports most of the shipping methods available in our marketplace module.

Further, providing various shipping and payment methods will help the sellers to increase sales and revenue as the product can be reached most of the customers.

Note:

Compatible With Order Attribute

One-step checkout is also compatible with one of Webkul’s most astonishing modules that is Magento 2 Order Attributes. The module allows adding some custom attributes at the time of placing the order or checkout.

The admin can create the attribute from the backend very easily and place it in the desired positions. This feature will fascinate the customers as they can also add some extra attributes like gift wraps, custom messages, other details, etc while processing the checkout.

The admin can also get some more details regarding the order by asking queries through custom attributes to the customers.

custom attribute

Support

That’s all for the Magento 2 One Step Checkout. Still, have any issues feel free to add a ticket. Let us know your views on Webkul Support System to make the module better.

Current Product Version - 5.0.5-p2

Supported Framework Version - Magento 2.0.x, 2.1.x, 2.2.x,2.3.x, 2.4.x

Blog Version - Magento 2.0.x, 2.1.x, 2.2.x,2.3.x, 2.4.x
  • Version 2.4.x
  • Version 2.0.x, 2.1.x , 2.2.x, 2.3.x, 2.4.x
  • Version 2.0.x, 2.1.x , 2.2.x , 2.3.x, 2.4.x
. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


4 comments

  • Julia
    • Nishad Bhan (Moderator)
  • Emil Shamloo
    • Hari Narayan Bairwa (Moderator)
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content