Knowband Blog | Ecommerce Modules

Opencart One Page Checkout – User Manual

Joe Parker

1.0 Introduction

Most of the visitors leave the checkout for the desired product just because they find the process complex and lengthy to complete. This ultimately leads to more and more number of abandoned carts. To control the exit and cart abandonment rates, Knowband has offered OpenCart One Page Checkout Pro plugin for OpenCart stores. Further, by implementing One Page Checkout for your eCommerce site, you can improve the conversion rates as it replaces the multi-step checkout page with a single page checkout.

Mobile View:

Salient Features of the OpenCart One Page Checkout extension:

  1. The extension offers Guest checkout functionality by which the users can easily and quickly complete their orders as guest customers without creating a new account on the online store.
  2. The OpenCart Fast Checkout extension allows the customers to quickly log in to the website using their Google, Facebook, and Paypal accounts.
  3. The fields on the checkout page can be easily customized by the admin from the back-end of the OpenCart One Page Checkout Pro extension. The store admin can show or hide any of the fields from the checkout page or can make them optional or mandatory for the users to fill. The admin can also re-arrange the position fields with drag and drop functionality.
  4. The store owner can easily customize the look and feel of the checkout page including changing the color of the buttons, background button color, text color, etc.
  5. The OpenCart One Page Supercheckout offers multi-store and multi-lingual compatibility.
  6. The OpenCart One Step Checkout extension supports nearly all the major shipping and payment methods that boost the confidence of the customers to choose their desired method from the checkout page.
  7. The e-merchant can apply any of the design layouts from 3 different checkout layouts I.e., 1-column, 2-column, or 3-column. The fields can be easily rearranged by dragging and dropping.
  8. The OpenCart Quick Checkout module offers integration with MailChimp, Klaviyo, and SendinBlue that allows you to sync your users’ database automatically with these accounts of yours without any manual efforts.
  9. The e-merchant can also customize the look and feel of the extension through custom CSS and JS.
  10. The OpenCart Responsive One Step Checkout module offers the Testing mode feature by which the store owner can check and view the customizations done before making the customizations live on the website.
  11. The OpenCart Simplified Checkout module offers the Ship2Pay feature by which the store owner can map particular payment methods with selected delivery methods. It hides all the other payment methods on selecting a particular delivery method and shows only those payment methods that are mapped to the selected delivery method to the user.

2.0 Installation Guide of OpenCart One Page Checkout extension

Before starting the installation process, you have to buy the OpenCart One Page Checkout extension from the Knowband store. Once purchased, you will receive the following files in your registered email.

Now to install this OpenCart Single Page Checkout on your online shop, follow the given steps:

1. Unzip the zip file. You will get the folders as shown in the image below


2. Copy all the folders of the zip file in the Root Directory of OpenCart setup via FTP manager.

Steps to install the OCMOD file

So, OpenCart One Page Checkout Pro is now successfully installed and is ready to use at your store. Go to the admin menu and click on the Extensions and then on Modules. Click the configure button next to Knowband Supercheckout.

3.0 Admin Interface of OpenCart responsive one step checkout module

Just after the successful installation of the One Page Checkout for OpenCart website, you can configure the checkout form fields as per your requirements. You have to navigate the settings in the given order: Admin Panel > Extensions > Modules > Knowband Supercheckout

The easy to understand admin interface of OpenCart One Page Checkout Pro is divided into ten sections namely:

1. General Settings

2. Customizer

3. Login Settings

4. Payment Address

5. Shipping Address

6. Shipping Method

7. Ship2Pay

8. Payment Method

9. Cart

10. Design

11. Newsletter

Each of these sections has been discussed below:

3.1 General Settings

Customizer

From the Customizer tab, you can customize the Button Background Color, Button Border Color
Button Preview, Button Text Color, Button Border Bottom Color, My Account Button Background Color, Login Button Background Color, Login Button Background Color, Logout Button Background Color, Coupon Code Button Background Color, Voucher Code Button Background Color, etc.

3.2 Login

Under this tab, you will find options to configure Facebook, Google, and Paypal login options as shown below.

For detailed instructions to generate App ID, App Secret Key, and Client ID, jump to the next section.

3.2.1 How to Set up Facebook Login?

Facebook App can be created by below-mentioned steps:-

1: Go to the given URL: https://developers.facebook.com/apps/

2: Click on the “Create App” button.

3&4: Select the “Build Connected Experiences” option and click on the ‘Continue’ button.

5&6: Add “App Display Name”, “App Contact Email”, and choose from the “Do you have a Business Manager Account?” and then click on the “Create App” button.

7&8: After clicking on Create App ID you will have to go through a security check as shown:

9: Click on the “Setting” tab.

Kindly add delete call back URL. You can check the delete callback URL description from here – https://developers.facebook.com/docs/development/create-an-app/app-dashboard/data-deletion-callback/

10-15: Two options will be available in the dropdown, Basic and Advanced, click on “Basic”. And then enter your “App Domain”, ”Privacy URL”, ”Terms of Service URL”, ”Add Icon”, ”Select Category” and click on the “Save Changes” button.

App Domains:

yourdomain.com is correct

yourdomain.com/store is incorrect

www.domain.com is incorrect

16: Now click on “+Add Platform”.

17: And select Website as Platform.

18&19: Now Enter your site URL.

20&21: Click on “Products+” and click on the Setup button from the Facebook login tab.

22: Select the web as the platform for the app.

23: Add Site URL and click on save.

24-26: Click on Settings and add a Valid OAuth Redirect URIs.

Valid OAuth Redirect URIs:

https://your_store_url/index.php?route=kbstepcheckout/kbstepcheckout&fblogin=1

27: Select the “In Development” option.

28&29: Choose a Category from the drop-down and click on the “Switch Mode” button.

30: Copy the App ID and App Secret and paste it into the fields provided in the module.

Final Step:

1. Login with the JavaScript SDK.

Set this field as Yes.

2. Allowed Domains for the JavaScript SDK

Set the domain of the store.

Note:- here domain should be entered in below type.

https://octest.knowband.com

3.2.2 How to Set up Google Login?

Follow the below steps to get the client id and client secret.

1. Go to the link “ https://console.developers.google.com/project ”.

2. Click on “Create a project”.

3. Enter your desired Project Name and Organization name and click on “Create”.


4. Go to API Manager, click on the left menu, click on API & Services and then click on Create Credentials.


5. Select the OAuth client ID option.

6. Click on the “Configure consent screen” button.

Enter “Email Id”, “Product Name” and then click on the “Save” button.


7. Select the External option click on the “Create” Button,


Use the Following Redirect URL

https://your_store_url/index.php?route=supercheckout/supercheckout

8. Add App Name and User Support Email.

9. Click on Add Domain and add Authorised Domain and then click on Save and Continue.

10. Click on Save and Continue button.

Click on +Add Users.

11. Add a user name and click on Add button.

12. The Added user will be visible and then click on Save and continue button.

13. Click on the Oath content screen and then click on Publish Add button.

14. Click on Credentials and then +Create Credentials button and then select Oath Client ID.

15. Add Application type and Name and then click on Add button.

16. Add the URLs and then click on Create button.

17. Copy and paste Client ID and Client Secret in the Text Field shown below in the Prestashop one page checkout module’s

How to Generate the Google API key:

1) Go to API Manager, click on the left menu, click on API & Services, and then click on Credentials.

2) Click on Create Credentials & then select the API key.

3)Copy the API key and enter the same into the Google App Id field of the admin end module’s login page.

3.3 Payment Address

This tab contains settings for the fields which are to be shown in the Payment or Billing Address section on the checkout page as shown below.

  1. It consists of two sections. The one on the left is for Guest Customers and the right one for logged-in customers.
  2. To make a field display/hide in the checkout page check the checkbox just to the left of the Show label.
  3. To make a field mandatory (required field) check the checkbox just to the left of Require Label.
  4. The fields can also be rearranged according to the requirement. To rearrange just move the cursor to the drag icon and drag & drop the field wherever it is required as shown below.
  5. On saving, the fields will be rearranged as per the changes.

3.4 Shipping Address

This tab contains settings for the fields which are to be shown in the Shipping Address section on the checkout page as shown below.

  1. It consists of two sections. The one on the left is for Guest Customers and the right one for registered customers.
  2. To make a field display/hide in the checkout page check the checkbox just to the left of the Show label.
  3. To make a field mandatory (required field) check the checkbox just to the left of Require Label.
  4. The fields can also be rearranged according to the requirement. To rearrange just move the cursor to the drag icon and drag & drop the field wherever it is required as shown below.
  5. On saving, the fields will be rearranged as per the changes.

3.5 Shipping Method

This tab contains settings for the shipping method which is shown on the checkout page. It contains settings for enabling/disabling and setting the default shipping method as shown below:

3.6 Ship2Pay

The ship2pay feature offered by the OpenCart Supercheckout module automatically disables the payment methods based on the shipping method selected by the customer. That is, the admin can map some particular payment options with some particular Shipping options on the store.

3.7 Payment Method

This tab contains settings for payment methods shown on the checkout page like enabling/disabling or selecting a default method.

3.8 Cart

Under this section, you will find the cart fields divided into two sections, the left one is for Guest Customers, and the Right one is for Registered or Logged in customers.

  1. To Display/Hide the cart from the checkout page check uncheck the checkbox present in front of the Display Cart label.
  2. In order to enable/ disable any column in the cart check/uncheck the checkbox in front of that respective column.
  3. To enable/disable the popup images for the product check/uncheck the checkbox in front of that respective column.
  4. To change the size of image popup, enter the width and height of the popup in textbox in front of Product Image Size label.
  5. Coupon , Reward Points and Voucher options can also be disabled or enable by checking/unchecking the checkbox in front of that respective field. Kindly note that rewards point text box will only be visible on Supercheckout page once following three conditions are fulfilled.
    a.) Customer must be logged in.
    b.) He must have atleast 1 reward point in his account.
    c.) He must have a product in the cart which can be purchased with reward points.

Confirm:

  1. This tab is again divided into two sections, the left one is for Guest Customers and Right one for Registered or Logged in customers.
  2. To enable the comment box for the order by customer check the checkbox in front of that Leave a comment for the order label & to disable uncheck the same checkbox.
  3. To enable agree to the term or any other information saved in the admin for the store check/uncheck the checkbox in front of I agree to the conditions label.

3.9 Design Tab

This tab contains the settings for the design of OpenCart One Page Checkout Pro as shown below:

1-Column

2-Column

3-Column

You can easily change the width of any column adjust the slider present at the top as shown below.

 

Also, you can reposition different blocks of checkout page using simple drag and drop action. On saving, the block will be rearranged in the checkout page as per the changes.

3.10 Newsletter

By clicking on the Newsletter tab of the OpenCart responsive one-step checkout module, you can configure the MailChimp, SendinBlue, and Klaviyo Integrator settings as shown below:

The same can be done for SendinBlue and Klaviyo.

4.0 Front Interface of OpenCart One Step Checkout Extension

When the user clicks on “Add to Cart” button corresponding to a product and performs its checkout, they will see the following supercheckout on their screen.

OpenCart One Page Checkout extension: https://www.knowband.com/opencart-one-supercheckout-pro

OpenCart One Page Checkout Admin Demo: https://opencartdemo.knowband.com/demo/index.php?module=oc_onepagecheckout_knowband&demo=admin&lang=en

OpenCart One Page Checkout Front Demo: https://opencartdemo.knowband.com/demo/index.php?module=oc_onepagecheckout_knowband&demo=front&lang=en

OpenCart One Page Checkout from the official OpenCart Marketplace: https://www.opencart.com/index.php?route=marketplace/extension/info&extension_id=15353