Magento 2 Check out Extensions

  1. Home
  2. Docs
  3. Magento 2 Check out Extensions
  4. Magento 2 One Step Checkout
  5. User Guide

User Guide

1. Overview

One Step Checkout for Magento 2 extension helps customers to checkout simply and quickly by displaying all elements in 1 page only. They do not need to experience two parts (Shipping Address and Reviews & Payments) as in default Magento 2, but fill all information in one place conveniently. Therefore, the checkout process becomes more user friendly, which can reduce abandonment rate and bring higher conversion rate for online stores.

2. How Does It Work?

Please go to Stores ⇒ Configuration ⇒ BSSCOMMERCE ⇒ One Step Checkout.

2.1 In General

M2 One Step Checkout general

In Enable:

  • Choose Yes to enable Magento 2 One Step Checkout extension.
  • Choose No to disable this module.

In Allow Creating Account On Checkout Page:

  • Choose Yes to allow customers to create their account right on the checkout page.
  • Choose No to disable this function.

In Title: Write your wanted title for the checkout page.

In Router Name: Choose an URL name for your checkout page.

2.2 In Fields Display

M2 One Step Checkout fields display

In Show Order Comment:

  • Choose Yes to show a text box for customers to leave their comments for orders.
  • Choose No to exclude this box from the checkout page

In Show Discount Code:

  • Choose Yes to display a discount code box for entering coupon codes.
  • Choose No to hide it.

2.3 In Newsletter

M2 One Step Checkout newsletter

In Show Subscribe Newsletter:

  • Choose Yes to allow customers to subscribe to the newsletter on the checkout page.
  • Choose No to disable this function.

In Auto Check Newsletter Sign up Box: Choose Yes to automatically tick the Newsletter Sign up box or choose No to uncheck.

2.4 In Tracking Address by Google

M2 One Step Checkout tracking address by google

In Enable Tracking  Address by Google:

  • Choose Yes:  Auto-detect and pre-fill customers’ country, state/province, city – Google Suggest to autocomplete shipping address while typing.

m2 one step checkout address

  • Choose No: Customers have to find all street addresses and location information themselves.

In Google API Key: Fill in your API Key. In case you haven’t yet had an API Key, please click the link after this configuration to get it.

In Tracking  Address from Applicable Countries: This configuration determines which countries to apply auto-suggesting customer addresses. There are 2 options to select:

  • If you choose All Allowed Countries: auto-suggesting address function is applied to every country.
  • If you choose Specific Countries: there is a list of countries in Tracking Address from Specific Countries and the maximum number of countries you can select is 5. Moreover, when you choose this option, Google just auto-suggests city name and country, not street name. This is the default function of Google auto-suggest.

*Admin has to work with Google and pay for Google Maps to activate the address autocompleting feature.

2.5 In Order Delivery Date

M2 One Step Checkout order delivery date

In Show Delivery Date:

  • Choose Yes to display Order delivery date in the Shipping method section that allows customers to choose their own suitable dates and times to receive orders.
  • Choose No to disable this function.

In Show Delivery Comment:

  • Choose Yes to display a Delivery comment box in the Shipping Method section.
  • Choose No to hide it.

*Install M2 Order Delivery Date to see more premium features of this function:

  • In case M2 Order Delivery Date is installed: All features of M2 Order Delivery Date will be active. Customers can choose delivery date and admin can give them certain delivery time slots:

m2 one step checkout delivery date

  • In case M2 Order Delivery Date is not installed: All features of One Step Checkout delivery date will be active. Customers can choose whatever delivery date and time they want:

m2 one step checkout delivery date

2.6 In Gift Message

M2 One Step Checkout gift message

In Show Gift Message on Order Level: 

  • Choose Yes to allow customers to send a gift message to other people.
  • Choose No to disable this function.

* Gift Message config is applied only when the corresponding default config is enabled. To enable the default config, please go to Stores ⇒ Sales ⇒ Sales ⇒ Gift Options and choose Yes to the suitable gift message level:

m2 one step checkout gift message

2.7 In Gift Wrap

M2 One Step Checkout gift wrap

In Enable:

  • Choose Yes to allow customers to request a gift wrap for their order.
  • Choose No to disable this function.

In Type: This function currently supports gift wrap for each order only, so the value is Per Order by default.

In Gift Wrap Fee: Fill the price for gift wrap service. The entered value is a positive number and automatically rounded to two decimal places. If left empty or filled with a negative number, the value would turn to be 0.

2.8 Additional Add-on

M2 One Step Checkout is already compatible with multiple related modules: M2 Customer Attributes, M2 Checkout Custom Field, M2 Reward Points, M2 Pre-Select Shipping/Payment. Install the suitable modules to better optimize M2 One Step Checkout.

m2 one step checkout compatiable

  • M2 Customer Attributes: Carefully config the Customer Attributes function to give your customers the best shopping experience! Go to Customers ⇒ Customer Attributes. In each customer attribute, go to Display Configuration:
    • In Display on Checkout Page: Choose Yes to make customer attributes be shown on the checkout page, choose No to disbale this function.
    • In Hide If Filled Before: Choose Yes so that if customers fill the customer attribute for the first time, it will not display after that. Choose No to always display the customer attribute whenever customers go to the checkout page.

m2 ome step checkout user guide

  • M2 Checkout Custom Field: Go to Sales ⇒ Bss Commerce ⇒ Manage Checkout Custom Field ⇒ Add New Field to create a custom field for the checkout page.

m2 ome step checkout user guide

  • M2 Pre-select Shipping/Payment: Go to Stores ⇒ Configuration ⇒ BSS COMMERCE ⇒ Pre-select Shipping/Payment to config the default shipping/payment method when customer enter the checkout page.

m2 one step checkout user guide

2.9 In Custom Style

M2 One Step Checkout custom style

In Checkout Step Number Color: you choose the color for the checkout number steps.

In Checkout Step Background Color: Choose a color for the background of checkout number steps.

In Custom Code: you can add more code to customize about background color for the checkout page, “Sign in” button or text color and so on.

2.10 Somes notes

  • Notes about custom code

+ Change background of the checkout page, you need to add more code:

body { background-color: #333333;

}

(#33333 is the color code which is corresponding to Black).

+ Change text color of the checkout page, you need to add more code:

body { color: #ffffff;

}

(#fffff is the color code which is corresponding to White).

+ Change Sign in to a button, you add more code:

.authentication-wrapper button{

padding: 15px;

background: #6D268A;

color: #fff;

}

.authentication-wrapper button:hover{

text-decoration: unset;

background: #FF0000;

color: #fff;

}

  • Note about configuring payment method

You need to configure all payment methods that default Magento supports.

  • Note about adding payment trust badge

Step 1: Go to Content ⇒ Blocks ⇒ Add New Block to create a new block for payment trust badge.

M2 one step checkout payment trust badge

Step 2: Go to Content ⇒ Widgets ⇒ Add Widget to choose certain place to display the block of payment trust badge.

M2 one step checkout payment trust badge

  • Note about adding header/footer for the checkout page: Upload folder bss_onestepcheckout to app/design/frontend/theme_space/theme.
Was this article helpful to you? Yes No

How can we help?