OpenCart One Page Advanced Checkout Extension – User Manual

1.0 Introduction

Every 1 out of 10 online users is compelled to abandon their cart just because of the long and complicated checkout. You can optimize your site checkout to an interesting one by incorporating OpenCart One Page Advanced Checkout Extension from Knowband. OpenCart responsive checkout popup module turns up the entire checkout process to a single ajax based popup which triggers over the screen as the customer opts to purchase a product from the store. This One Page Checkout for OpenCart reduces cart abandonment by offering the entire purchase process on a single popup, without loading the next page.

1.1 Features of One Page Checkout for OpenCart

Incorporating One Page Checkout for OpenCart store is no big deal as it offers simple customization without involving any technical skills or existing code modifications. So, quickly allow your customers to purchase the product through a single popup, giving them faster checkout and less interruption experience. Below listed are the striking highlights of this OpenCart One Page Checkout extension.

1. OpenCart One Page Checkout module displays the total checkout fields in the form of responsive ajax based checkout popup on the frontend of the website without redirecting to another URL.

2. This One Page Checkout for OpenCart provides a seamless way to boost the newsletter subscriptions for the online business.

3. The responsive checkout popup incorporated using OpenCart simplified checkout module can be easily enabled or disabled using the toggle button given at the backend.

4. The guest registration feature of OpenCart responsive checkout popup automatically registers the customer with the site and sends them the login password on their email.

5. You have the flexibility to enable or disable the guest checkout functionality of OpenCart One Page Checkout module.

6. Using this OpenCart Single Page checkout extension, you can add CSS code to the advanced checkout page.

7. OpenCart Single Page checkout module offers testing mode feature which lets you test the advanced checkout page functionality on a specific IP.

8. With OpenCart simplified checkout module, give customers the benefit of social login options like Google and Facebook over the checkout page.

9. OpenCart fast checkout extension allows you to show/hide payment and shipping address fields differently for logged in and guest customers of the store.

10. The custom address fields can be marked required or optional with the help of this OpenCart One Page Supercheckout module.

11. Using One Page Checkout for OpenCart site, you can provide multiple shipping and payment methods to the customers which can be configured from the backend.

12. OpenCart responsive checkout popup module eases you in setting a desired logo image and title for each of the payment and shipping methods displayed on the supercheckout page.

13. The ship2pay feature of OpenCart quick checkout extension automatically selects the payment method corresponding to each shipping method selected by the customer.

14. OpenCart responsive checkout popup extension offers a configurable cart whose fields can be fixed as per business needs.

15. OpenCart One Page Checkout module is multi-store and multi-lingual compatible.

16. OpenCart quick checkout extension offers a mobile responsive layout to the customers.

17. The MailChimp Integrator feature of OpenCart Single Page checkout automatically syncs the customer data with the connected MailChimp account of the seller.

1.2 Front Interface of OpenCart Responsive Checkout Popup Module

When the user clicks on “Add to Cart” button corresponding to a product, they will see the following responsive checkout slider on their screen.

Cart Summary Section of OpenCart One Page Advanced Checkout

screenshot-opencartdemo-knowband-com-2019-07-26-11_08_51-1

Further, as they click on “Checkout” button, they can view and complete the complete advanced checkout form in a single go as shown in the images below:
Account Login Section

screenshot-opencartdemo-knowband-com-2019-07-26-11_11_11

Billing and Shipping Address Section

screenshot-opencartdemo-knowband-com-2019-07-26-11_13_21

If the customer unchecks the “Ship to same address” checkbox, then they will see the shipping address section as shown below:

screenshot-opencartdemo-knowband-com-2019-07-26-11_15_27
Shipping and Payment Method Section

screenshot-opencartdemo-knowband-com-2019-07-26-11_21_19

2.0 Installation Guide of OpenCart One Page Advanced Checkout Extension

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

  • Source code of OpenCart One Page Advanced Checkout Extension in zipped file format.
  • User Manual of OpenCart One Page Checkout extension.

Now in order to install this OpenCart Advanced 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

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

So, OpenCart One Page Advanced Checkout is now successfully installed and is ready to use at your store. Go to the admin menu and click on the extensions and thereby click on configure button next to One Page Advanced Checkout.

3.0 Admin Interface of OpenCart Responsive Checkout Popup

Just after successful installation of 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 > One Page Advanced Checkout

2

3

The simple to understand admin interface of OpenCart fast checkout extension is divided into nine sections namely:

1.General Settings
2.Login Settings
3.Payment Address
4.Shipping Address
5.Shipping Method
6.Ship2Pay
7.Payment Method
8.Cart
9.Newsletter

3.1 General Settings

4

  • Enable/Disable: This option lets you enable or disable the complete functionality of One Page Checkout for Opencart website. If disabled, the standard Opencart checkout is shown to the customers.
  • Enable Newsletter Option: Using this option, you can show or hide the newsletter subscription box for your site. If the customer checks the newsletter option, they will subscribe to site updates(newsletter).
  • Register Guest Automatically: You can enable automatic registration for your guest customers (users who perform guest checkout). This option will automatically send a password to the customer for further use of account.
  • Register Account: By enabling this option, you can give password fields on single page checkout where the user can enter their own password to register.
  • Display Guest: This option will show or hide the guest option in the login section of checkout. Using this option, users can perform guest checkout for their item.
  • Add Custom Style: This option allows you to include additional custom style (CSS code), displayed on the front of their website.
  • Testing Mode: You can enable this option to test the one page checkout module functionality before making it live for the customers.
  • Add IP: This option allows you to enter the specific IP address where you want to test the advanced supercheckout features.

3.2 Login Settings

5

  • Enable Facebook Login: This option will enable or disable the Facebook login option displayed on front of one page checkout form.
  • Facebook App ID: This option allows you to set the Facebook App ID required to connect with Facebook account.
  • Facebook App Secret: This option will set the Facebook App Secret Key.
    Note: You can get the Facebook app ID and secret key from https://developers.facebook.com/ which has been discussed in the section 3.2.1
  • Enable Google Login: This option will enable or disable the Google login option displayed on front of one page checkout form.
  • Google App ID: This option allows you to set the Google App ID required to connect with Google account.
  • Google Client ID: This option allows you to set the Google client ID.
  • Google App Secret:This option will set the Google App Secret Key.

Note: You can get the Google app ID, client ID and secret key from https://code.google.com/apis/console which has been discussed in the section 3.2.2

3.2.1 How to setup Facebook Login

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

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

Step 2: Click on the “Add a New App” button.

Step 3&4: Enter your App name and email id, then click on “Create App ID” button.

6
Step 5&6: After clicking on Create App ID you will have to go through a security check as shown:

7

Step 7: Click on “Setting” tab.

8

Step 8-13: Two option will be available in the dropdown, Basic and Advanced, click on “Basic”. And then enter your “App Domain”, “Contact Email”, ”Privacy URL”, ”Terms and Conditions URL”, ”Add Logo”, ”Select Category” and click on “Save Changes” button.
App Domains:

yourdomain.com is correct

yourdomain.com/store is incorrect

www.domain.com is incorrect

9

Step 14: Now click on “+Add Platform”.

10
Step 15: And select Website as Platform

11
Step 16: Now Enter your site URL.

12
Step 17&18: Click on “Products+” and select Facebook login.

13
Step 19: Select web as the platform for the app.

14
Step 20: Now click on save.

15
Step 21&22: 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

16
Step 23&24: Click on “App review”. And mark “Make ‘your app name’ Public” to Yes.

17
Final Step: Copy the App ID and App Secret and paste it into the fields provided in the module.

18

3.2.2 How to setup Google Login

Follow below steps to get client id and client secret.
1.Go to link “ https://console.developers.google.com/project ” .

2. Click on drop-down option highlighted in button “ 2 ” and then click on “Create a project”.

19

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

20
4. Go to API Manager, click on Create Credentials and select OAuth client ID option .

21

5. Click on “Configure consent screen”button.

22

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

23
7. Select “Web application”, Enter “Name “ , “Authorized Redirected URIs“ as mentioned below and click on “Create” Button,

24
Use Following Redirect URL
http://your_store_url/index.php?fc=module&module=supercheckout&controller=supercheckout&login_type=google

8. Copy Client ID and Client Secret.

25

9. Paste Client ID and Client Secret in the Text Field shown below in the Prestashop one page checkout module’s admin panel.

26

3.3 Payment Address

27

OpenCart One Page Checkout allows you to show or hide any field for payment address. The fields can be separately enabled or disabled for logged in and logged out customers. You can mark any field as required, differently for logged in and logged out customers of the store. Additionally, you can reorder the address fields using simple drag and drop action.

3.4 Shipping Address

28

 

OpenCart responsive checkout popup module allows you to show or hide any field for shipping address. The fields can be separately enabled or disabled for logged in and logged out customers. Using OpenCart One Page Advanced Checkout, you can mark any field as required, differently for logged in and logged out customers of the store. Additionally, you can reorder the address fields using simple drag and drop action.
Note: In order to include and show more custom fields in Payment Address, Shipping Address, cart section, or account section of checkout, you can refer to section 3.10

3.5 Shipping Method

29

  • Display Shipping Methods: This option will show/hide the complete list of shipping methods provided on the advanced checkout page.
  • Display Style: With this option, you can select the display style for the shipping methods. It can be only logo image, only text or both.
  • Display Shipping Method Title: This option will enable or disable the title for the particular shipping method.
  • Select Default Shipping Method: With this option, you can select any shipping method as the default method.
  • Title: This option sets the desired title for the shipping method.
  • Logo: This option sets the logo image for the shipping method.

Likewise, you can modify the title and logo image for all the shipping methods using this OpenCart One Page Advanced Checkout module.

3.6 Ship2Pay

30

3.7 Payment Method

31

  • Display Payment Methods: This option will show/hide the complete list of payment methods provided on the advanced checkout page.
  • Display Style: With this option, you can select the display style for the payment methods. It can be only logo image, only text or both.
  • Select Default Payment Method: With this option, you can select any payment method as the default method.
  • Title: This option sets the desired title for the payment method.
  • Logo: This option sets the logo image for the payment method.

Likewise, you can modify the title and logo image for all the payment methods with the help of one page supercheckout.

3.8 Cart

Under this section of OpenCart One Page Supercheckout, you can customize the cart and display it the way you want at your store. The image size of cart items can be easily modified by setting the image height and width.

32

  • Product Image Size: This option allows you to set the image size for the products shown in the cart section of the one page checkout.
    Moreover, you can show or hide the various cart fields to logged in and logged out customers of the store. Fields like “Agree to the Conditions” and order comment can be marked as optional or optional as per your site requirements.

3.9 Newsletter

33

  • Enable MailChimp: This option of Opencart one page supercheckout, allows you to enable or disable the MailChimp Integration functionality for your store.
  • MailChimp API Key: With this option, you can set the MailChimp API key which will connect your site to the MailChimp account of the seller.
  • MailChimp List: Using this option, you can fetch and select the particular list connected to the MailChimp account.

3.9.1 How to configure MailChimp

1.Login to your Mail Chimp Account.

2.Click on the right corner tab > Choose Profile > Extras > API Keys.

3.Here Admin Can Create an API key by click on “Create a Key” Button.

4.Copy the API key.

5.Admin can also make Different list for Each Social login customer by click on “List” in the Top Menu Bar.

6.Now Paste the API Key in the Provided Mail chimp API Key section and click on the “Get List” Button.

7.Select the list from the Dropdown menu.

3.10 How to add edit or delete custom fields to Supercheckout page

In order to add custom fields to any section of One Page Checkout, you can go to the “Custom Fields” option under “Customers” tab at the left side section of admin interface.

34

Joe Parker

We boast of the best in the industry plugins for eCommerce systems and has years of experience working with eCommerce websites. We provide best plugins for platforms like - Magento, Prestashop, OpenCart and Shopify . We also provide custom module development and customization services for the website and modules..

Leave a Reply

Your email address will not be published. Required fields are marked *