Prestashop One page Checkout Addon – User Manual

1. Introduction

Prestashop is one the widely used eCommerce platform because of the awesome themes, features and extensions are available for store owners. Every store owner wants to provide a smooth and fast shopping experience to their customers to make their business more successful. The checkout process became the key point of this process. Hence, Prestashop One Page Checkout Addon is a solution for this issue.

1.1 Benefits for merchant:

Let’s take a quick look at the benefits of having a Prestashop One step checkout extension on your store:

  • Store owners can design their own one page checkout page as per the website theme
  • Compatible with multiple store and devices
  • Targets multi-lingual customers
  • Less and relevant checkout steps
  • Better customer experience
  • Eliminates page reload time and keeps checkout information at a single page
  • Custom fields can be added as desired

1.2  Features of Prestashop One Step checkout Addon

  • Easy Customization
  • Simple & Quick Login
  • Error Reporting to Customers
  • Multiple Payment and Shipping Methods
  • Mobile and Tablet Responsive
  • Free and Virtual/Digital Products
  • Cart Customization on Prestashop Checkout Page
  • Custom fields
  • MailChimp Integration
  • Ship2Pay Feature
  • Custom CSS and JS
  • SEO Friendly
  • Multi-Lingual Support
  • Show/Hide any fields
  • Automatic Customer Registration

2. Installation Guide

2.1 Copy “SuperCheckout” module folder under your root_directory/modules/of your store via FTP or use Prestashop interface to upload the plugin.

2.2  After copy, module will be listed on module listing page in admin panel as shown given below screen.

For version 1.6

for-version-1-6

For version 1.6

for-version-1-7

2.3 If module is not displaying on your module listing page, search it by filtering module with following details.

Keyword: Supercheckout

Author: Knowband

Category: Checkout

Filter by: Installed & Not Installed/Enabled & Disabled

Note:

  1. When you will click on install button, a pop up box will appear which will display warning messages. You can ignore these messages and move ahead. There will be no negative impact of this warning message on your store.
  2. After installing Prestashop Supercheckout addon, a “configure” button will be in front of this plugin on module listing page as shown in screen below:

For Version 1.6

for-version-1-6

For Version 1.7

for-version-1-7

3. User Manual

  1. To access this addon, Click on configure button of supercheckout module. On clicking, module interface will be open and following screen will be display as given below:

supercheckout-module

3.1 General Settings

  1. Enable/Disable: To enable the plugin, switch the enable button from OFF to ON. Default value will be OFF.
  2. Enable Guest Checkout: By enabling this option, store will allow customer to checkout as a guest. Default value will be OFF
  3. Register Guest: By enabling this option, store will register guest automatically and send registration email to corresponding customer. Default value will be OFF.
  4. Default Checkout Option: There are 3 options which will be displayed at front end. With these options, admin can set which option will be displayed to customers on the one page checkout. These options are:
  •  Login: If this option is selected, customer will see the login form in login section.
  • Guest: If this option is selected, customer will see only the email field in login section.
  • Register: If this option is selected, customer will see the registration form in login section.

On front, customer can also change the checkout option. By default, login option will be selected.

       5. Testing Mode: If you want to test the plugin before making it live on your store then you can enable this option. While this option is            enabled your customers are redirected to the normal checkout page but you can open the SuperCheckout page directly through URL.            The URL for the same appears below this option once you enable it.

3.2 Customizer

This tab has the features using which the admin can modify the checkout front end by adding some CSS or JS in its fields. This tab already has the feature to change the colors of buttons which appear in the checkout. Whatever CSS will be placed in the custom CSS field that CSS will appear in the front of the store and same is the case with custom JS field.

customizer

3.3 Login Tab

  1. This tab basically contains setting to enable /disable Facebook and Google registration & login as shown below.

Login Tab

     2. Enable Facebook Login To enable Facebook Registration & Login switch the button from OFF to ON. But before you do that do get       Facebook APP ID and APP SECRET from http://developers.facebook.com without these keys, this functionality will not work. By               default, this functionality will be disabled.

     3. Enable Google Login: To enable Google Registration & Login switch the button from OFF to ON. But before you do that do get              Google APP ID, CLIENT ID and APP SECRET from https://code.google.com/apis/console without these keys, this functionality will not      work. By default, this will be disabled.

4. Please read the Annexure A to setup Google and Facebook login.

3.4 MailChimp Tab

Mail Chimp is an email marketing service by which you can send bulk newsletter/offer emails to your customers. Mail Chimp also provides many attractive Templates and many more features. Our module allows you to add customer email directly to mail chimp list as soon as they register using our Prestashop one page checkout addon.

For using Mail Chimp you need to have an API Key.

3.3.1 How to configure Mail Chimp?

  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 “Get List” Button.
  7. Select the list from Dropdown menu.

3.3.2 Mail Chimp Settings:

Mail Chimp Settings

  1. Enable/Disable: To enable the Mail chimp, switch the enable button from OFF to ON. Default value will be “OFF”.
  2. Subscribe Customer Checkbox: Check this option if you want to subscribe customers to mail chimp as soon as he comes out from email field. Please note that this function will not subscribe them to Prestashop list. Our mail chimp integration is responsible to subscribe only to mail chimp list.
  3. Mail Chimp API Key: Enter Your Mail Chimp API Key and Click on “Get List” button.
  4. Mail Chimp List: Select your desired list and save settings.

3.5 Addresses Tab

addresses-tab

  1. This tab contains setting for the fields which is to be shown in customer registration, delivery address and invoice address section on front. As shown in screen below:
  2. It consists of two sections. The one in the left if for Guest Customers and the right one for registered customers.
  3. To make a field show/hide in the one page checkout page check the checkbox just to the left of Show label.
  4. To make a field as mandatory (required field) check the checkbox just to the left of Require Label.
  5. The fields can also be rearranged according to the requirement. To rearrange just hold icon () and drag & drop the field vertically, wherever it is required.
  6. On saving, the fields will be rearranged as per the changes.
  7. This tab also has to more features named inline validation and enable save address feature. If inline validation is enabled then the fields like first name, last name, zip code are validated as soon as they are filled which lets the customer know that he/she is entering the wrong value. If save address feature is enabled then a buttons with text “SAVE” appears just below the address field and using that button the customer can save his/her address before placing the order.

SAVE BUTTON IMAGE:

Save

3.6 Payment Method Tab

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

Payment Method Tab

2. Display Method: To Enable/Disable the payment methods on the checkout page switch the button from ON to OFF or vice-versa. This will disable the payment method block from checkout page. By default, this will be enable.

3. Display Style: There are 3 options to display how your payment methods will be display on checkout page. By default, payment methods will be display with its name. If you select style with image, then please upload image of size (95 X 20) for corresponding payment method under appropriate payment module directory.

4. Selected Default Method: This will be a drop down list of all installed payment module. Here you can select payment method, which will be displayed as selected at the time, when customer comes on checkout page.

3.7 Delivery Method Tab

  1. This tab contains settings for delivery methods shown in checkout page like enabling/disabling or selecting a default method

Delivery Method Tab

2. Display Method: To Enable/Disable the delivery methods on the checkout page switch the button from ON to OFF or vice-versa. This will disable the delivery method block from checkout page. By default, this will be enable.

3. Display Style: There are 3 options to display how your delivery methods will be display on checkout page. By default, delivery methods will be display with its name. If you select style with image, then please upload image of size (95 X 20) for corresponding delivery method.

4. Selected Default Method: This will be a drop down list of all active delivery methods. Here you can select delivery method, which will be displayed as selected at the time, when customer comes on checkout page. The selection will be differ according to customer location. If your selected method maps with customer location, then the method will shown as selected at the time of checkout page loading.

3.8 Custom Fields Tab

This tab is used to add custom fields on front checkout page. This tab contains list of custom fields and options to Add, Edit or Delete any field.

These custom fields can be used to get some additional data from the customer and display it in different positions i.e. Shipping Address Form, Payment Address Form, Cart Block or Customer Registration Block.

custom-fields-tab1
3.8.1 How to add a custom field? 

Following are the steps to add a custom field:

  1. Click on “Add New” button.
  2. A pop-up will display, fill all the required fields and add your desired features.
  3. Click on “Save” button.

custom-field2

Example 1 – If admin wants to add a drop-down with label “Want to become Member ?”

Following are the steps to be followed –

1.Add a new custom field as shown below.

custom-field3

Configure its position as “Shipping Address Form”.

2. Go to Front End, add product to cart and proceed to “Checkout”. In the Checkout page the custom field will be displayed as shown below.

custom-field4

3.  Admin can check the data fetched from customer by following steps –

(a) Go to “Orders” tab.
(b) Click on “View” button for a particular order you want to check.
(c) The Customer’s information will be displayed in “SUPERCHECKOUT CUSTOM FIELDS” tab as shown below.

custom-field5

4. Customer can also check the Custom field by following steps-

(a) Go to “My Account” page.
(b) Click on “Order History and Details”
(c) Click on “Details” button
(d) Image shown below will display.

custom-field6
Example 2 – If admin wants to add a text-area with label “Gift Message”. Following are the steps to be followed –

1. Add a new custom field as shown below.

custom-field8

Configure its position as “Shipping Address Form”.

2. Go to Front End, add product to cart and proceed to “Checkout”. In the Checkout page the custom field will be displayed as shown below.

custom-field9
3. Admin can check the data fetched from customer by following steps –

(a) Go to “Orders” tab.
(b) Click on “View” button for a particular order you want to check.
(c) The Customer’s information will be displayed in “SUPERCHECKOUT CUSTOM FIELDS” tab as shown below.

custom-field22
5.Customer can also check the Custom field by following steps-

(a) Go to “My Account” page.
(b) Click on “Order History and Details”
(c) Click on “Details” button
(d) Image shown below will display.

custom-field33

3.8.2 How to edit a custom field?

To edit a custom field, click on the ‘Edit’ icon shown in front of any row. It will open a form shown below. Values of the form will be filled already.

custom-field66

Admin will have to click on the ‘Save’ button in order to save the edited details.

3.8.3 How to delete a custom field?

To delete a custom field admin will have to click on the delete icon shown next to every table row. It asks for confirmation to delete a row.

custom-field44

3.9 Cart Tab

  1. This tab contains setting for the cart, order total and confirming the order as shown below :
  2. Its divide in three sections :
  • Cart
  • Order Total
  • Confirm

Picture8

3.9.1 Cart

1. Display Cart: By default cart display will be enable.

2. To Show/Hide cart summary options from the checkout page check uncheck the checkbox present in front of Cart Summary Option label.

3. Product Image Size: This will show the which size of product image will be display on One checkout page. By default this field will be shown with their default values

3.9.2 Order Total 

To Show/Hide cart summary options from the checkout page check uncheck the checkbox present in front of Cart Summary Option label.

3.9.3 Confirm 

To Show/Hide cart summary options from the checkout page check uncheck the checkbox present in front of Cart Summary Option label.

3.10 Design Tab

  1. This tab contains the settings for the design of checkout page in the catalog as shown below:

picture1222

2. To change the width of any column adjust the slider present at the top as shown below :

Picture11

3. Block of different steps can also be rearranged from one column to the other or in the same column as shown below:

Picture10

4. On saving, the block will be rearranged in the checkout page as per the changes

3.11 FAQ Tab

This tab contains several questions (with answers to them) that are asked by our customers. We recommend you to go through the questions before raising any ticket for this plug-in.

faqs
3.12 Other Plug-ins Tab

This tab redirects to our developer page having list of other plug-ins developed by us. If you like this plug-in then you can try our other plug-ins also.

4. Annexure A

4.1 How to Set up Face book Login?

Follow below steps to get app id and app secret.

1. Click on the link “ https://developers.facebook.com/apps/” .

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

faqs11

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

faqs211
4. Click on “Setting” tab.

faqs232

5. Click on “Add Platform”.

faqsw3e23

6. Choose “Website” as platform.

faqs2222
7. Enter your “App Domain” , “Contact Email”,“Site URL” and click on “Save Changes” button.

App Domains:
yourdomain.com is correct
yourdomain.com/store is incorrect
www.domain.com is incorrect

faqs33e3
8. Under “App Review” tab, enable its live feature.

faqs222
9. Copy App ID and App Secret Key.

faqs666
10. Paste App ID and Secret key in the Text Field shown below.

faqseee
4.2 How to Set up 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”.

google-login1

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

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

google-login3
5. Click on “Configure consent screen”button.

google-login4

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

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

google-login6
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.

google-login7

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

google-login8

Product Link: https://www.knowband.com/prestashop-one-page-supercheckout
YouTube Link: https://www.youtube.com/watch?v=1yLcXToR6-g
Admin Demo: https://ps.knowband.com/demo5/16/admin1/index.php?controller=AdminLogin&token=aea1bb3fb1bab860c86c4db00ce5949e&redirect=AdminModules&demo_lang=en
Front Demo: https://ps.knowband.com/demo5/16/en/

You Might Also Like:

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 *