Start a Project

QloApps Checkout Custom Fields

QloApps Checkout Custom Fields module lets you add various types of custom fields to every checkout step. With this addon, the admin can add various custom fields like text, checkbox, radio button, attachment, dropdown, date and time etc on the checkout steps.

  • Create multiple custom fields on checkout steps.
  • Display user input on the order confirmation page, order confirmation email, order detail page and order invoice.
  • Create conditions in the custom field form to display fields on the checkout step.
  • Create custom forms based on conditions like category, minimum cart amount, date range, country and currency, etc.
  • Display custom forms on the checkout page at different steps. 

Prior to installing the QloApps Custom Registration Fields addon, you must make a few changes in the core files for proper functioning of the module.

The step is very simple, you just have to replace the mentioned codes in the following paths.

Path

hotelcommerce/themes/hotel-reservation-theme/order-opc.tpl

Add Hook:

{hook h='displayRoomAndPriceSummaryBottom'}

Place this hook under <div class=”col-sm-12 proceed_btn_block”> in line 299 (line may vary)

Kindly refer to this screenshot:

add hook

You need to add code on the following tpl file path:

hotelcommerce/themes/hotel-reservation-theme/order-opc.tpl

Add Hook:

{hook h='displayGuestInfoBottom'}

Place this hook under <div class=”col-sm-12 proceed_btn_block”> in line 160 (line may vary)

Kindly refer to this screenshot: 

Add Hook:

{hook h='displayOrderConfirmationBetween'  idOrder = $order->id}

Place this hook under </div> in line 381 (line may vary)

Kindly refer to this screenshot:

The installation of any module is very simple in QloApps.

  • Go to the Module and Services tab in the back office.  
  • Click on ‘Add New Module’.
QloApps new module installation

Click on the ‘Choose a file’ and upload the zip file of the module.

QloApps checkout custom fields zip upload

After uploading the ZIP file the module will start installing automatically.

QloApps Checkout Custom Fields installation

Once the module is installed, the user can see the prompt for successful installation and the module will be listed below. 

After installation, the module adds a new tab “CHECKOUT CUSTOM FIELD” under the Catalog tab.

QloApps Checkout Custom Fields

Under checkout custom fields, the user can see the following option:

  • General
  • Fields
  • Forms

In the general tab, the user can enable/disable the following options:

  1. Display custom fields on invoice: Enable this option to display the custom fields on the invoices.
  2. Display custom fields on order confirmation mail: Enable this option to display the custom fields on the order confirmation mail. This mail is sent to the customers, employees and admin. 
  3. Display custom fields on order confirmation page: Enable this option to display the custom fields on the order confirmation page.
  4. Display custom fields on order detail page: Enable this option to display the custom fields on the customer order detail page. 
  5. Display attachment URL in invoice and order confirmation mail: Enable this option the display the attachment URL on invoice and order confirmation mail.
QloApps Checkout Custom Fields General

After configurations, the user can create new fields and edit the other created fields in the Checkout Custom fields option from the back office

Checkout Custom Field > Fields

QloApps Checkout Custom Fields

The user can create a new field by following the given options:  

  • Input Type: The user can select the input type of the custom field such as:

Text

QloApps Checkout Custom Fields Text

Dropdown

QloApps Checkout Custom Fields dropdown

Checkbox

QloApps Checkout Custom Fields checkbox

Radio

QloApps Checkout Custom Fields radio

Attachment

QloApps Checkout Custom Fields attachment

Dropdown Multiselect

QloApps Checkout Custom Fields dropdown multi select

Text Area

QloApps Checkout Custom Fields text area

Date

QloApps Checkout Custom Fields date

Time

QloApps Checkout Custom Fields time

Date and Time

QloApps Checkout Custom Fields date and time
  • Field Name: Enter the name of the field.
  • Placeholder: This placeholder will be displayed if selects the input type as text or Textarea
  • Optional Values: This option values will be displayed if selects the input type as dropdown, checkbox, radio or dropdown multiselect. The user can add multiple values and each value and each value has to be followed by a comma. 
  • Enabled or Disable: To either enable or disable the custom field while creating form. 
  • Required: To make a custom field as a mandatory field. 

Note: If the input field is selected as Dropdown, Checkbox, Radio or Dropdown, the options values fields are added. Users can add multiple options and each option value has to be followed by a comma.

The customer can add a new form to assign their fields from the back office.

Checkout Custom Fields > Forms

In add form information block, the user can view and edit the following fields:

QloApps Checkout Custom Fields Form Configuration
  • Title: Users can enter the title of the form. 
  • Assign custom fields: Users can click on add fields option to assign the created custom fields.
  • Check out step: Users can select the step of the checkout page, where this form will be available.
  • Country and currency:  Users can select the country and currencies from the dropdown menu for which this form will be available. 
  • Minimum amount: Users can set the minimum cart amount for which this form will be available, with or without the taxes.
  • Availability date: The users can select the date range between which this form will be available.
    Note: If the user wants this form to be always available, leave this option empty.
  • Enabled: This allows users to enable/disable the form during checkout. 
  • Location / Hotels: The user can select the location/hotel in the cart for which this form will be available. 
  • Groups: Users can select the customer group for which this form will be available. 
  • Room type restrictions: Users can select the room type available in the cart for which this form will be available. 
    Note: Leave this field empty, if the user wants this form to be available for all the room types.  

The checkout field will be displayed on the Checkout Page.

QloApps Checkout Custom Fields checkout page

After successful checkout, the user can see custom checkout fields at the Confirmation Page.

QloApps Checkout Custom Fields confirmation page

The custom checkout fields will be displayed in the invoice.

QloApps Checkout Custom Fields invoice

Checkout custom fields at Order History page

QloApps Checkout Custom Fields order history

In the orders tab, the admin can also check the checkout customer field in the orders section in the back office.

QloApps Checkout Custom Fields Back office

That’s all for “QloApps Checkout Custom fields module.”

Above all, if you want to learn about the functionality of QloApps then you can visit this link: QloApps Reservation System

In case of any query, issue, or requirement please feel free to raise it on QloApps Forum.

Also, you can raise a ticket to connect with our experts for any assistance.

. . .

Comment

Add Your Comment

Be the first to comment.

Start a Project




    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home
    Table of ContentHide Index