Reading list Switch to dark mode

    One Step Checkout For Magento 2

    Updated 7 March 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.

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

    Note:

    • 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:

    Searching for an experienced
    Magento 2 Company ?
    Find out More
    FwoDSjBaGPk

    Features – Adobe Commerce Cloud One Step Checkout

    • 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 – Adobe Commerce One Step Checkout

    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

    After the successful installation, you have to run these commands in the Magento2 root directory.

    First Command –

    php bin/magento setup:upgrade

    Second Command –

    php bin/magento setup:di:compile

    Third Command –

    php bin/magento setup:static-content:deploy

    After running the commands, you have to flush the cache from the Adobe Commerce Cloud admin panel by navigating through ->System->Cache management as shown below in the snapshot.
    Magento 2 One Step Checkout

    Multi-Lingual Configuration

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

    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.

    192.168.15.132_m2462_pub_admin_admin_system_config_index_key_c1c69bbcc316917b182a8ff55ef06268d4f5be6ffdef381e3758bf1e30dd9314_asd

    192.168.15.132_m2462_pub_admin_admin_system_config_index_key_c1c69bbcc316917b182a8ff55ef06268d4f5be6ffdef381e3758bf1e30dd9314_asd-1

    192.168.15.132_m2462_pub_admin_admin_system_config_index_key_c1c69bbcc316917b182a8ff55ef06268d4f5be6ffdef381e3758bf1e30dd9314_asd-2

    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.

    192.168.15.132_m2462_pub_onestepcheckout_index_asd

    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

    192.168.15.132_m2462_pub_onestepcheckout_index_asd-1

    Screenshot – when the 2columns layout selected

    192.168.15.132_m2462_pub_onestepcheckout_index_asd-2

    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.

    192.168.15.132_m2462_pub_onestepcheckout_index_asd-3

    Enable GST Field

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

    192.168.15.132_m2462_pub_onestepcheckout_index_asd-4

    Enable Blocks Collapsible

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

    192.168.15.132_m2462_pub_onestepcheckout_index_asd-5

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

    192.168.15.132_m2462_pub_onestepcheckout_index_asd-6

    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.192.168.15.132_m2462_pub_catalogsearch_result_index__qbagasd

    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.

    192.168.15.132_m2462_pub_skybag-travel-bag.htmlasd

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

    192.168.15.132_m2462_pub_onestepcheckout_index_asd-7

    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.

    192.168.15.132_m2462_pub_onestepcheckout_index_asd-8

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

    192.168.15.132_m2462_pub_onestepcheckout_index_asd-9

    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. 

    192.168.15.132_m2462_pub_onestepcheckout_index_asd-11

    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. 

    192.168.15.132_m2462_pub_onestepcheckout_index_asd-1-1

    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.

    192.168.15.132_m2462_pub_onestepcheckout_index_asd-10

    Further, customers from India can add their GST numbers with their address details. Registered as well as the 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 format22AAAAA0000A1Z5 else the system will not take it.

    Guest

    192.168.15.132_m2462_pub_onestepcheckout_index_asd-12

    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:

    192.168.15.132_m2462_pub_onestepcheckout_index_asd-1

    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.

    192.168.15.132_m2462_pub_onestepcheckout_index_asd

    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-p1

    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
    • 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