{"id":1308,"date":"2015-04-28T00:00:00","date_gmt":"2015-04-28T00:00:00","guid":{"rendered":"https:\/\/www.knowband.com\/blog\/?p=1308"},"modified":"2022-08-13T12:01:14","modified_gmt":"2018-02-27T09:04:40","slug":"opencart-one-page-checkout-pro","status":"publish","type":"post","link":"https:\/\/www.knowband.com\/blog\/user-manual\/opencart-one-page-checkout-pro\/","title":{"rendered":"OpenCart One Page Checkout Pro – User Manual"},"content":{"rendered":"

How to install\u00a0OpenCart One Page Checkout Pro<\/a> plugin on your server<\/h3>\n

1. Download the zip from OpenCart & unzip into a folder. After unzip folder structure of Supercheckout Pro plugin will be similar as shown in below screen<\/p>\n

\"supercheckout1\"<\/a><\/p>\n

2. Open the upload directory & you will see following folder structure.<\/p>\n

\"supercheckout2\"<\/a><\/p>\n

3. Login via FTP & Drag drop all the folders into your server root directory. You dont have the change the default theme folder name to your theme folder name.<\/p>\n

\"supercheckout3\"<\/a><\/p>\n

You must have VQMOD installed for this plug-in to work. If VQMOD is not installed please download and install fromthe URL below:
\nhttps:\/\/code.google.com\/p\/vqmod\/<\/p>\n

4. You will find the plugin ready to be installed in the Modules of your opencart.<\/p>\n

\"600\"<\/a>
\n<\/a><\/p>\n

5. Click on Install link to install the plugin. This will also add a dropdown option in your menu bar which will list all plugins by Velocity installed on your store for fast navigation. This dropdown also has a message box, using which we can inform you about new launched plugin or new update.<\/p>\n

\"supercheckout5\"<\/a><\/p>\n

6. Delete the Vqcache files from the vqmod\/vqcache folder.<\/p>\n

7. To access Super Checkout plugin, Click on edit button which is just to the right of Supercheckout Pro module as shown below.<\/p>\n

\"601\"<\/a><\/p>\n

8. On clicking edit button the module for plugin will open. It contains navigational bar at the top, menu at the left and main content in the center as shown below.<\/p>\n

\"602\"<\/a><\/p>\n

1. General Settings tab<\/h3>\n

1. To enable\/disable plug-in, Switch the enable button OFF to ON \/ ON to OFF this is just to the right of Enable\/Disable label. Refresh home page of your store every time you change enable\/disable setting.<\/p>\n

2. To change the default view from None to Banner or Related Product or vice-versa in pop-up dialog select an option from given radio button.<\/p>\n

3. When you select banner radio button, a button Add Banner (Max 3) will appear on screen.<\/p>\n

4. Click Add Banner button to add a banner, on clicking this button you will be asked to enter banner URL and select banner image.<\/p>\n

 <\/p>\n

\"6\"<\/a><\/p>\n

 <\/p>\n

5. Write the complete URL of your web page where you wish to redirect user on clicking the banner.<\/p>\n

6. Select an image for banner to be shown on pop-up dialog from Image Manager as shown below. Click Browse to open Image Manager.<\/p>\n

\"7\"<\/a><\/p>\n

7. You can remove a banner by clicking Remove Banner button.<\/p>\n

2. Login Tab<\/h3>\n
    \n
  1. This tab basically contains setting to enable \/disable Facebook<\/a> and Google<\/a> registration & login as shown below.\"s1\"<\/a><\/li>\n
  2. To enable Facebook Registration & Login switch the button from OFF to ON which is just to the right of Enable Facebook Login label. But before you do that do get Facebook APP ID and APP SECRET from www.developers.facebook.com.<\/li>\n
  3. Enter the APP ID and APP SECRET in their respective fields and save. You will find Facebook login button on your checkout page.<\/li>\n
  4. To enable Google Registration & Login switch the button from OFF to ON which is just to the right of Enable Google Login label. But before you do that do get Google APP ID, CLIENT ID and APP SECRET from https:\/\/code.google.com\/apis\/console. For detailed instructions to get the APP ID, download the Facebook & Google Setup guide from OpenCart account.<\/li>\n
  5. Enter the APP ID, CLIENT ID and APP SECRET in their respective fields and save. You will find Google login button on your checkout page.<\/li>\n<\/ol>\n

    3. Payment Address Tab<\/h3>\n
      \n
    1. This tab contains setting for the fields which is to be shown in Payment or Billing Address section in checkout page as shown below.\"800\"<\/a><\/li>\n
    2. It consists of two sections. The one in the left if for Guest Customers and the right one for registered customers.<\/li>\n
    3. To make a field display\/hide in the checkout page check the checkbox just to the left of Show label.<\/li>\n
    4. To make a field as mandatory (required field) check the checkbox just to the left of Require Label.<\/li>\n
    5. 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.\"801\"<\/a><\/li>\n
    6. On saving, the fields will be rearranged as per the changes.<\/li>\n<\/ol>\n

      4. Shipping Address Tab<\/h3>\n
        \n
      1. This tab contains setting for the fields which is to be shown in Shipping Address section in checkout page as shown below.\"802\"<\/a><\/li>\n
      2. It consists of two sections. The one in the left if for Guest Customers and the right one for registered customers.<\/li>\n
      3. To make a field display\/hide in the checkout page check the checkbox just to the left of Show label.<\/li>\n
      4. To make a field as mandatory (required field) check the checkbox just to the left of Require Label.<\/li>\n
      5. 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.\"803\"<\/a><\/li>\n
      6. On saving, the fields will be rearranged as per the changes.<\/li>\n<\/ol>\n

        5. Shipping Method Tab<\/h3>\n
          \n
        1. This tab contains settings for shipping method which is shown in checkout page. It basically contains settings for enabling\/disabling and setting the default shipping method as shown below:\"804\"<\/a><\/li>\n
        2. To Enable\/Disable the shipping methods from the checkout page switch the button from ON to OFF or vice-versa. This will disable the shipping method block from checkout page. But you should select a default shipping method (if any installed) to apply shipping charges to the order.<\/li>\n
        3. To Enable\/Disable Shipping Method title switch the button from ON to OFF or vice-versa. This will cause the title to of shipping to enable or disable from checkout page.<\/li>\n
        4. To get a default shipping method selected in the checkout page select the default shipping method from the dropdown. If the selected shipping method is not installed it will automatically select from installed shipping method.<\/li>\n<\/ol>\n

          6. Payment Method tab<\/h3>\n
            \n
          1. This tab contains settings for payment methods shown in checkout page like enabling\/disabling or selecting a default method.\"805\"<\/a><\/li>\n
          2. 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. But you should select a default payment method (if any installed) to get a payment method in the checkout
            \npage.<\/li>\n
          3. Supercheckout also enables you to display payment method name with or without their logo. You can also set it to display Payment method image only. Select desired radio button which is just right of Display style label.<\/li>\n<\/ol>\n

            7. Confirm Tab<\/h3>\n
              \n
            1. This tab contains setting for the cart and confirming the order as shown below:<\/li>\n
            2. Its divide in two section
              \na. Cart
              \nb. Confirm<\/li>\n<\/ol>\n

              Cart:<\/h4>\n
                \n
              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.\"806\"<\/a><\/li>\n
              2. To Display\/Hide cart from the checkout page check uncheck the checkbox present in front of Display Cart label.<\/li>\n
              3. To enable\/ disable any column in the cart check\/uncheck the checkbox in front of that respective column.<\/li>\n
              4. To enable\/disable the popup images for the product check\/uncheck the checkbox in front of that respective column.<\/li>\n
              5. To change the size of popup for images Enter the width and height of the popup in textbox in front of Pop Image Size label.<\/li>\n
              6. 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.
                \na.) Customer must be logged in.
                \nb.) He must have at-least 1 reward point in his account.
                \nc.) He must have a product in the cart which can be purchased with reward points.<\/li>\n<\/ol>\n

                Confirm:<\/h4>\n
                  \n
                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.<\/li>\n
                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.<\/li>\n
                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.<\/li>\n<\/ol>\n

                  8. \u00a0Design Tab<\/h3>\n
                    \n
                  1. This tab contains the settings for the design of checkout page in the catalog as shown below:\"807\"<\/a><\/li>\n
                  2. To change the width of any column adjust the slider present at the top as shown below\"s10\"<\/a><\/li>\n
                  3. Block of different steps can also be rearranged from one column to the other or in the same column as shown below:\"s11\"<\/a><\/li>\n
                  4. On saving, the block will be rearranged in the checkout page as per the changes<\/li>\n<\/ol>\n

                    9. Language tab<\/h3>\n

                    Using language tab, you can generate language translation of the supcheckout language file.<\/p>\n

                    1. First you need to add a language in your OpenCart store<\/a>. To add the new language to go System -> Localization -> Language & add now language.<\/p>\n

                    2. Added language will be displayed in supercheckout module as displayed below.<\/p>\n

                    \"1001\"<\/a><\/p>\n

                    3. Choose the language in which you need to translate & choose the website i.e. Front End\/Admin End which you need to translate.<\/p>\n

                    4. Based on the selection, Various fields in Various tabs will be populated like in General Settings,Login, Payment\/Shipping Address Setting etc.<\/p>\n

                    5. By default it will display the English translation. Add translation of various texts.<\/p>\n

                    6. After adding translation of text, you can perform following action using the buttons below.<\/p>\n

                    a. Download: Download button will download the translated language file. You need to upload the file into your supercheckout language directory.<\/p>\n

                    1.1: If case of front end, you need to upload the language file in catalog\/language\/[[YOUR_LANG]] \/supercheckoutPro folder<\/p>\n

                    2.1: In case of admin, you need to upload the downloaded language file in
                    \nadmin\/language\/\/[[YOUR_LANG]] \/module folder<\/p>\n

                    b. Download & Share: Download & Share button will download the language file & a copy
                    \nof the language file will be shared with Velocity.<\/p>\n

                    c. Save as Draft: Save as Draft button will save the translation for future use.<\/p>\n

                    d. Generate: Generate button will try to upload the language file in desired directory if server permissions allow saving of the files.<\/p>\n

                    e. Generate & Send: Generate button will try to upload the language file in desired directory if server permissions allow saving of the files & a copy of the files will be shared with Velocity<\/p>\n

                    10. Themer tab<\/h3>\n

                    By clicking on themer tab, you will have an option to change the theme of Supercheckout admin panel.<\/p>\n

                    \"1100\"<\/a><\/p>\n

                    11. Get Support tab<\/h3>\n

                    By clicking on Get Support tab, you will be redirected to our support website, where you can contact our support for help. Use this tab in case you have any query\/issue or found some bug.<\/p>\n

                    How to get Facebook API details?<\/h4>\n

                    Steps: <\/strong><\/h4>\n