Magento 2 - One Step Checkout - Extension User Guide

› Extension page

Introduction

The One Step Checkout extension allows you to convert the existing one page checkout in your Magento store with multiple steps into a single step checkout. This extension converts the default checkout layout rather than having a separate checkout extension built from scratch. The advantage of having this extension is that: most of the third party features developed for default checkout in Magento 2 will work perfectly well with our One Step Checkout extension. It also preserves the default checkout URL key instead of having a new checkout page with a URL key that is different from the Magento's checkout URL key. The layout of the checkout page can be configured using the available options from the admin configuration page for the extension. With a responsive layout the One Step Checkout extension provides a complete package with all the default Magento checkout features and additional One Step Checkout features to attract more customers and improve conversion. You can also configure the order in which the standard address fields appear on the frontend. It also comes with google address suggest which makes filling address fields simpler. Along with address suggest comes geolocation which provides more relevant address suggestions based on the customer's current location, and autofill which automatically fills the address of the customer based on their location. This extension also allows your customers to edit quantity right from the checkout page, and calculates totals without having to leave or reload the checkout page.

Features Included

• Convert Magento's one page checkout to a single step.
• Uses Magento 2 standard checkout logic to increase the compatibility with most third party checkout related extensions.
• Mutliple layout options to choose from the admin.
• Responsive design and layout.
• Compatible with payment and shipping methods that work with standard Magento 2 checkout.
• Integrated Google Address Suggest to search and fill address with ease.
• Choose whether to enable geolocation to get the most relevant address search results based on the customer's current location.
• Choose to autofill address based on the customer's current location.
• Choose whether to show the Place Order button in the payment method section or after the cart summary.
• Choose whether to redirect the customers directly to checkout on adding a product to cart.
• Choose the order in which the address fields appear on the frontend.
• Allow customers to enter delivery date and time. Choose date and time with ease using the calendar.
• Allow customers to write comments about the order.
• Allow customers to subscribe to the newsletter from the checkout page.
• Add additional fields info in your order email.
• Edit quantity of any item on the checkout page.
• Display optional shipping instructions in shipping method section.
• Display optional payment instructions in payment method section.
• Know more about how your customer visitied the website with a configurable survey. The admin can write the question and provide options for the customer to choose from.
• Allow customers to gift wrap their order for a fee. The fee can be configured in the admin and can be applied per item or per order.
• Compatible with the inbuilt Magento terms and conditions feature.
• Easy to install and use.

Compatibility

Installation

Web Setup Wizard

Unpack extension files: Log in to our website. Download the Base Extension. Unpack the Base extension file downloaded from our site and upload the contents of the file to the root directory of your magento installation. Unpack the purchased extension file downloaded from our site and upload the contents of the file to the root directory of your magento installation.
Go to System > Web Setup Wizard.
Select component manager to install the extension.
Enable Modules: Click on Select link on the Base Extension row(Module Name: HS_All). Click the Enable button on the menu that pops up. Next, click on the Select link on the row corresponding to the extension you downloaded (Module Name: HS_OneStepCheckout).
Step 1: Readiness Check Click on the button Start Readiness Check to check you are running Magento on a compatible environment. Click Next upon completion of previous step.
Step 2: Create Backup Create a backup before you install the extension, by selecting the checkboxes against the Backup Options and clicking the button Create Backup. Click Next, upon completion.
Step 3: Enable Module Click on the button Enable.
You will see this page as your module installation is in progress. You can check for errors in the Console Log.
Module installation complete.

Configuration

Go to Stores > Settings > Configuration > Hungersoft Extensions > One Step Checkout.

General

Enable One Step Checkout: Select Yes/No to enable/disable the extension. The extension can be enabled/disabled on a per store basis. Redirect to checkout after add to cart: Select Yes to redirect the the customer directly to checkout page after adding a product to cart. Layout: Choose whether you want a 2 columns layout or 3 columns layout. Place Order Button Position: Select the position of the Place Order button, either After Payment Method or After Review Cart. When the After Payment Method is chosen the button is displayed with text for that particular payment method such as Continue to PayPal for PayPal, Please Order for other payment methods like Check/Money Order or Cash on Delivery, etc. whereas when After Review Cart is selected a general button with text Place Order is diplayed.

Additional Fields

Enable adding comment to order: Select Yes to show order comment field on the checkout page. Enable Newsletter Checkbox: Select Yes to display a newsletter subscription on the checkout page. This allows the customers to sign up for a newsletter subscription during checkout. Enable Delivery Date: Select Yes to display delivery date field on the checkout page. Payment Instructions: Enter the message to be displayed in the payment method section. Shipping Instructions: Enter the message to be displayed in the shipping method section.

Google Address Autocomplete

Enable Google Address Autocomplete: Select Yes to enable address suggestions on street address fields on checkout page. Enable Geolocation: Select Yes to enable geolocations, which filters the address search results and provides more relevant address suggestions based on the customer's current location. Auto Fill Address: Select Yes to automatically fill in the address components available from the customer's current location. For this to work geolocation should be enabled.

Survey

Enable Survey: Select Yes/No to enable/disable the survey feature. Enable "Other" option value: Select Yes to include "Other" as an option in the survey dropdown. On selecting this, another field will show up wherein the customer can enter the answer to your survey question. Question: Enter the question you wish to ask the customer in the checkout survey, Option Values: Enter the options for the dropdown shown for the survey question. Click on the Add button and enter a value in the text box provided. One option value on each row.

Gift Wrap

Enable Gift Wrap: Select Yes/No to enable/disable the gift wrapping feature. Calculate: Select the calculation logic by selecting whether the fee should be applied per item or per order. If per item is selected, the fee will be equal to the (((total items in cart) - (total virtual products in cart)) x (gift wrap fee)) Fee: Enter the fee amount here.

Field Management

Set the order of the standard address fields using the dropdowns shown in the image. The dropdown defines the order of the address attributes. Select the attribute for a particular position using the dropdown for that position. As shown in the image the order of the fields in the checkout page will now be Last Name, First Name, Phone Number, Company, Street Address, City, Country, State/Province, Zip/Postal Code. If you have configured multiple lines for street address, you will not have to set the position for each street address line field. All the fields will show up together on the frontend. For State/Province without state options defined in the database, the text field will appear in the position configured for State/Province .

Additional Information

• To display additional information fields (order comment, delivery date and survey) in the order email, you will have to create a custom order email template and add the snippet below:
  
  <tr>
      <td class="additional-info">
          <h3>{{trans "Additional Information"}}</h3>
  
          {{depend order.getHsOscDeliveryDateFormatted()}}
          <p>{{trans '<strong>Delivery Date</strong> %delivery_date' delivery_date=$order.getHsOscDeliveryDateFormatted() |raw}}</p>
          {{/depend}}
          
          {{depend order.getHsOscSurveyAnswer()}}
          <p>{{trans '<strong>%question</strong> %answer' question=$order.getHsOscSurveyQuestion() answer=$order.getHsOscSurveyAnswer() |raw}}</p>
          {{/depend}}
  
          {{depend order.getHsOscComment()}}
          <p>{{trans "<strong>Comment</strong> %comment" comment=$order.getHsOscComment()|raw}}</p>
          {{/depend}}
      </td>
  </tr>
  
  To learn more about how to create a custom email template, check out Customize email templates using the admin - Magento 2
• {{depend [attribute]}} ...  {{/depend}} displays the information only when there is a value set for the attribute.
• Additional information fields have been added to the order object. You can display the fields in the email by calling the getter on the order object as follows:
  • Delivery Date: $order.getHsOscDeliveryDateFormatted()
  • Survey Question: $order.getHsOscSurveyQuestion()
  • Survey Answer: $order.getHsOscSurveyAnswer()
  • Order Comment:  $order.getHsOscComment()
• The order attributes can be displayed using the translation function as follows:
  {{trans "Text to be displayed %variable_name" %variable_name=$order.get{Attribute}()}}

Read More

• FAQ's
• Console / Command line module installation

Benefits

• Free updates for 1 year.
• Free support for 1 year. If you have any issues with the extension purchased please contact us using the contact form or by using the live chat.
• Meets magento standard development practices. No core files will be over written.
• 100% open source.