Knowband Blog | Ecommerce Modules

Prestashop One page Checkout Addon – User Manual

Joe Parker

1. Introduction

Prestashop is one of the widely used eCommerce platforms because of the awesome themes, features, and extensions available for the 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 to this issue.

The One Page Checkout options reduce the additional efforts of the customers. It allows them to complete the checkout process on a single page hence reducing the abandoned cart. The best part that comes with Prestashop one checkout module is Social login. With this feature, users can log in with Google and Facebook login.

Mobile View:

Note: The Prestashop one step checkout Module by Knowband is GDPR compliant.

What’s New in PrestaShop One Page Checkout:

There are some newly added features in the PrestaShop One Page Supercheckout:

1) Choose Total Price Display Methods for the Checkout Page: Now the e-merchant can choose different methods to display the total price of the products on the checkout page. The store admin can choose default PrestaShop price, price inclusive tax, price exclusive tax, or both inclusive and exclusive price from the back office of the PrestaShop One Page SuperCheckout addon.

2) Option to Show the Custom Field in the Invoice: The store owner can now show the custom field’s data in the Invoice of the orders placed. The customers can check the custom field they added on the checkout page in their invoices.

3) Compatibility with Zasielkovna and gmparcellocker addons: Knowband’s PrestaShop One Page SuperCheckout addon is now fully compatible with the gmparcellocker and Zasielkovna addons.

4) Fixed Compatibility with Mollie Payment Method: In the latest update, the issues with the compatibility with the Mollie Payment Method have been fixed.

5) Compatible with PS v1.7.7.1: The PrestaShop One Page Checkout module is now compatible with the latest PrestaShop version v1.7.7.1.

6) The admin can make a detailed comparison between the order revenue earned and the revenue lost in abandoned carts in the form of a graphical data. They can filter analysis results in days, weeks, months and year to get a precise data.

7) There is a new added functionality to track the checkout behaviour. The admin can check the percentage of data filled or skipped by the online users who left their cart abandoned so that the admin can remove the unnecessary steps which are bothering the customers.

8) There is an option to verify whether the identification number CFI/DNI/NIF entered by the customers of Spain is correct or not.

1.1 Admin-Benefits of One Page Checkout Prestashop Addon

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

1.2  Features of Prestashop One Step Checkout Addon

More attractive feature

2. One Page Checkout Prestashop Module Installation Guide

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

2.2  After copy, Prestashop one page checkout module will be listed on the module listing page in the admin panel as shown given below screen

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

Keyword: Supercheckout

Author: Knowband

Category: Checkout

Filter by: Installed & Not Installed/Enabled & Disabled

Note:

  1. When you will click on the 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 one page checkout plugin on the module listing page as shown on the screen below:

3. User Manual

  1. To access this Prestashop one page checkout addon, Click on the configure button of the Supercheckout module. On clicking, One Page Checkout Prestashop module interface will be open and the following screen will display as given below:

3.1 General Settings

3.1.1 General Settings of Prestashop Fast Checkout Addon

1. Login: If this option of the Responsive one page checkout Prestashop addon is selected, the customer will see the login form in the login section.

2. Guest: If this option of the Prestashop responsive one step checkout addon is selected, the customer will see only the email field in the login section.

3. Register: If this option of the one page checkout Prestashop module is selected, the customer will see the registration form in the login section.

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

3.1.2 Customizer settings of Prestashop fast checkout module

This tab in Prestashop one page checkout addon has the features using which the admin can modify the checkout front end by adding some CSS or JS in its fields. This tab of Prestashop fast checkout addon already has the feature to change the colors of buttons that 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 the same is the case with the custom JS field.

3.1.3 Login Tab

  1. This tab of Prestashop fast checkout addon contains a setting to enable /disable Facebook and Google registration & login as shown below.

3.1.4 Email Marketing Tab of the One Step Checkout Prestashop Extension

Mail Chimp is an email marketing service by which you can send bulk newsletters/offer emails to your customers. Mail Chimp also provides many attractive Templates and many more features. Our Prestashop one page checkout module allows you to add custom 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.

A) 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 clicking on the “Create a Key” button.
  4. Copy the API key.
  5. Admin can also make a Different list for Each Social login customer by clicking 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.

B) Mail Chimp Settings:

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

Similarly, you can configure the other two email marketing integrators including Klaviyo and SendinBlue.

3.1.5 Addresses Tab


  1. This tab in Prestashop one page checkout addon contains a setting for the fields which are to be shown in the customer registration, delivery address, and invoice address section on the front.
  2. The Addresses Tab of the Prestashop Quick checkout addon consists of two sections. The one on the left is for Guest Customers and the right one for Registered Customers.
  3. To make a field show/hide in the Prestashop one page checkout page, check the checkbox just to the left of the Show label.
  4. To make a field of this fast checkout Prestashop checkout addon as mandatory (required field), check the checkbox just to the left of Require Label.
  5. The fields of the Prestashop One Page Checkout Extension 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 of the One Page Checkout Prestashop addon also has more features named inline validation and enables the 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 the save address feature is enabled then a button with the text “SAVE” appears just below the address field of the Prestashop one page checkout addon and using that button the customer can save his/her address before placing the order.
  8. Enable Auto Detect Country: If this option is enabled, then the country of the customer is automatically detected and filled into the provided country field on the Supercheckout page.
  9. Enable Google Auto Address Fill: Using this option, the admin can enable auto-fillup of address with Google Places Integration.
  10. Google API Key: For the above feature to work, the admin needs to set the Google API key through this configuration option.

3.1.6 Payment Method Tab of the Prestashop One Page Checkout Module

1.  In Prestashop one page checkout addon, this tab contains settings for payment methods shown in one page checkout page like enabling/disabling, or selecting a default method.

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 the checkout page. By default, this option of the Prestashop fast checkout addon will be enabled.

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

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

Ship2Pay: With the Ship2Pay feature, the store admin can map the payment methods with the selected delivery methods. If the admin has mapped some payment methods with a particular delivery method then other payment methods will be disabled for the customers on selecting this particular delivery method.

3.1.7 Delivery Method Tab of the Prestashop One Page Checkout Module

  1. In one page checkout Prestashop, this tab contains settings for delivery methods shown on the checkout page like enabling/disabling, or selecting a default method

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 the checkout page. By default, this will enable.

3. Display Style: There are 3 options in this field of the Prestashop fast checkout addon to display how your delivery methods will display on the checkout page. By default, delivery methods will display with their name. If you select a style with an image, then please upload an image of size (95 X 20) for the corresponding delivery method.

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

3.1.8 Custom Fields Tab of the Prestashop fast checkout module

In Prestashop one page checkout module, this tab is used to add custom fields on the front checkout page. This tab of the Prestashop simplified checkout addon contains a list of custom fields and options to Add, Edit, or Delete any field.

These custom fields of the Prestashop fast checkout addon 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.


A) How to add a custom field? 

Following are the steps to add a custom field on the checkout page:

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


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

Following are the steps to be followed –

1. Add a new custom field as shown below.

Configure its position as “Shipping Address Form”.

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

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

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

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

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


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

1. Add a new custom field as shown below.

Configure its position as “Shipping Address Form”.

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


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

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


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

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

B) How to edit a custom field?

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

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

C) How to delete a custom field?

To delete a custom field of the Responsive one page checkout Prestashop module, the admin will have to click on the delete icon shown next to every table row. It asks for confirmation to delete a row.

3.1.9 Cart Tab of the Prestashop responsive one step checkout addon

  1. This tab One Step Checkout Prestashop module contains setting for the cart, order total, and confirming the order as shown below :
  2. Its divides into three sections :

A) Cart

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

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

3. Product Image Size: This option of the one step checkout Prestashop module will show which size of the product image will be displayed on the One checkout page. By default, this field of the Prestashop quick checkout addon will be shown with their default values.

B) Order Total 

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

C) Confirm 

To Show/Hide cart summary options from the checkout page check uncheck the checkbox present in front of the Cart Summary Option label. Admin can provide an option to add a gift message along with their product order. Admin will have the option to check this message on the order details page from the backend.

3.1.10 GDPR Setting Tab of the One Page Checkout Prestashop Addon:

This field of the Prestashop one page checkout module allows the admin to add the opt-in boxes (checkbox) on the checkout page to meet the GDPR requirements. Admin can add the multiple opt-in boxes at the checkout page. As per the GDPR directives “The GDPR is clearer that an indication of consent must be unambiguous and involve a clear affirmative action (an opt-in). It specifically bans pre-ticked opt-in boxes. It also requires distinct (‘granular’) consent options for distinct processing operations. Consent should be separate from other terms and conditions and should not generally be a precondition of signing up to a service. You must keep clear records to demonstrate consent”.

Let’s take a look at the screenshot below:

Please refer to the attached screenshot of the front end:

3.1.10.1 Adding New Policy:

The one page checkout Prestashop addon allows the admin to add as many policies. To add a new policy, the admin will just need to click on the “Add New” option. After doing so, a popup will appear, where the admin will ask to fill in the details of the policy.

Privacy Policy Label: In this field, enter the privacy policy label. The text entered here will be visible to the user on the front end.
 
Page URL to Link the Label: This field is not mandatory. But if you have any URL to link the label where you have defined your privacy policy, then enter the same here.

Required: This option is to make the policy field required or optional. If you make this field optional then the customers can continue to place his order without providing consent. Otherwise, only after providing consent, the user will be able to place the order.

Active: This field of the GDPR setting is to make the opt-in option enable or disable at the front end.

Let’s take a look at the screenshot below:

This field of the Prestashop one step checkout displays the data of all the customers who have agreed to any privacy policy(s) defined by the admin. The data will also display the date, time, and order reference number as well. To view the list, the admin must have to enter the email id or order reference number and click on the Filter button. The accepted customer consent details will be displayed along with the order reference number, customer name, email id, accepted consent, date, and time as well. Let’s take a look at the screenshot below:

3.1.12 Design Tab of the Responsive one page checkout Prestashop module

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

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

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

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

3.1.13 Add Customer profile type as a custom field in PrestaShop Supercheckout

This tab of One Page Checkout allows the seller to add a custom field to select the customer type for the users. Admin can add various profile type options.

Enable/Disable Customer Profile: Admin can show or remove the customer type custom field by choosing the Yes and No option

Field type to customer type selection: Admin can decide if this field will be displayed as a dropdown menu or with radio buttons.

The administrator can build separate profiles for different categories of clients, such as business customers and personal orders, and display different fields for checkout for each type of profile, as well as decide whether or not the information is mandatory.

Click on the ‘Add New’ button on the customer profile page.

You will be redirected to a new page with the title ‘New Customer Profile’

Active: Enable or disable the profile from here.

Profile Name: Add or update the profile name

Delivery address: You will find various address field options like name, company, VAT number, address, city, country, contact number, etc. in this tab.

Make sure to select the ‘require’ checkbox if you want to make any field mandatory.

Display Address on Invoice: You will find various address field options like name, company, VAT number, address, city, country, contact number, etc. in this tab. The selected fields will be displayed on the invoice.

Make sure to select the ‘require’ checkbox if you want to make any field mandatory.

Enable/Disable Custom fields: You can show or hide the custom fields from this tab.

3.1.14 FAQ Tab of the Prestashop responsive one step checkout addon

This tab of the one page checkout Prestashop module contains several questions (with answers to them) that are asked by our customers. We recommend you go through the questions before raising any ticket for this Prestashop fast checkout addon.


3.1.15 Other Plug-ins Tab

This tab of the Prestashop fast checkout addon redirects to our developer page having a list of other plug-ins developed by us. If you like this Prestashop Quick checkout addon then you can try our other plug-ins also.

3.2 Abandoned Checkout Statistics

Here, the admin can look for the number of orders they have received, checkout conversion rate, abandoned checkouts, order revenue generated and revenues lost in abandoned carts.

Prestashop simplified checkout addon offers a comparison report between the completed orders and abandoned cart orders. The admin can analyze reports for a specified day, week, month, and year. This PrestaShop\ module offers a total of 3 graphical reports. Those are:

Prestashop simplified checkout addon offers a comparison report between the completed orders and abandoned cart orders. The admin can analyze reports for the specified day, week, month, and year. This PrestaShop module offers a total of 3 graphical reports. Those are:

Abandoned Revenues v/s Order Revenues

Number of Abandoned Checkouts v/s Number of orders

Checkout conversion

The data will appear in tabular format. The table includes the number of orders received, number of abandoned checkouts, revenue earned from orders, revenue lost due to abandoned carts, and checkout conversion rate.

The admin can check the data for a specified day, week, month, and year.

3.3 Checkout Behaviour Report

This feature offers a detailed report of the customers who abandoned their carts. It gives the data if they left the checkout process. The online store merchant can check the filled information percentage provided by the users who left the cart abandoned. They can check reports for any specific day, just by filtering out these dates.

4. Annexure A

4.1 How to Set up Facebook Login?

Follow the steps below to create Facebook App:-

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

2: Click on the “Create App” button.

Step 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://www.yourstore.com/index.php?fc=module&module=supercheckout&controller=supercheckout&login_type=fb

27: Select the “In Development” option.

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

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

4.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 Following Redirect URL

https://your_store_url/index.php?fc=module&module=supercheckout&controller=supercheckout&login_type=google

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

4.3 Paypal Settings

Click here: https://developer.paypal.com/developer/accounts/

Select Live from the “My apps and credentials” section. After that click on Create App button.

Now enter the app name, select the account name and click on create app button.

Copy client Id and secret key from here:

Here, enter the return URL ie. https://psm.knowband.com/supercheckout_demo/17/index.php?fc=module&module=supercheckout&controller=supercheckout&login_type=paypal after that select the “Connect with PayPal” option and click on “Advance options”

Send an App review request to Paypal with the details mentioned in points 1 to 5 (present in the screenshot). For Point 4 you have to mention the Email attribute to enable.

In the personal profile, section select the full name and email option. After that enter the store URL (https://psm.knowband.com/supercheckout_demo/17/) and click on the Save button.

Now enter the client ID and secret key after enabling the PayPal login page option.

5.0 Front-end Interface

After successful installation, the Checkout page will look like this. The admin can add or remove fields from the checkout page and thus can display all the checkout steps in one place.

In the updated version, there is a Paypal login option for the users.

Watch how this Prestashop One Page Checkout Plugin works: 

Find more details about this Prestashop Simplified Checkout Addon below:

Prestashop One Page Checkout Module Product Link: Click Here
One Page Checkout Prestashop Addon Admin Demo: Click Here
Responsive one page checkout Prestashop Addon Front Demo: Click Here

Find this Prestashop One Page Checkout Module on Addon Store as well. Visit: Click Here

“Also, explore more Prestashop addons for your Prestashop website.”

You Might Also Like: