Guide of Magento 2 One Step Checkout Plugin
Table of Content
Magento 2 Checkout Extension will simplify checkout process by reducing number of steps to only one thereby allowing your Adobe Commerce store customers to buy products in just a single tap.
Moreover, Magento 2 Checkout 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:
- 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:
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.
- Magento 2 Checkout 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.
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.
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.
Once you have opened the file for editing. Replace the words after the†comma(,)†on the right with your translated words.
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.
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 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.
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
Screenshot – when the 2columns layout selected
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.
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.
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.
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 Blocks Collapsible
To enable, select enable as “Yes” or else select “No” to disable the block Collapse layout.
See the screenshots when Blocks Collapse Enabled, customers can minimize the block.
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.
Therefore, customers can also buy and add the product to the checkout page the from search page.
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.
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.
Now, the customers can click on the Place Order button to complete the purchase as shown below in the snapshot.
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.
Clicking the link brings up a pop-up to enter the login details as shown below.
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.
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.
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.
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.
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 –
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.
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. I
n the image below, two different seller products are checkout using one-step checkout:
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:
- Most of the online and offline payment methods are supported and can be used in Adobe Commerce One Step Checkout.
- Most of the shipping methods are supported and can be used in Adobe Commerce One Step Checkout. The shipping methods compatible are:
- All the marketplace add-ons must be purchased separately.
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.
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.
Also, view the Magento 2 abandoned cart extension that helps merchants to recover lost sales and follow-up customers.