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.
Features of QloApps Checkout Custom Fields
- 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.
Prerequisites of Installation
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](https://qloapps.com/wp-content/uploads/2023/06/C_Hook_1.png)
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:
![](https://qloapps.com/wp-content/uploads/2023/06/C_Hook_2.png)
Add Hook:
{hook h='displayOrderConfirmationBetween' idOrder = $order->id}
Place this hook under </div> in line 381 (line may vary)
Kindly refer to this screenshot:
![](https://qloapps.com/wp-content/uploads/2023/06/C_Hook_3.png)
How to install QloApps Checkout Custom Fields
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](https://qloapps.com/wp-content/uploads/2023/06/1-1-1024x464.png)
Click on the ‘Choose a file’ and upload the zip file of the module.
![QloApps checkout custom fields zip upload](https://qloapps.com/wp-content/uploads/2023/06/C2-1024x463.png)
After uploading the ZIP file the module will start installing automatically.
![QloApps Checkout Custom Fields installation](https://qloapps.com/wp-content/uploads/2023/06/C3-1024x531.png)
Once the module is installed, the user can see the prompt for successful installation and the module will be listed below.
![](https://qloapps.com/wp-content/uploads/2023/06/C4-1024x553.png)
How to configure QloApps Checkout Custom Fields
After installation, the module adds a new tab “CHECKOUT CUSTOM FIELD” under the Catalog tab.
![QloApps Checkout Custom Fields](https://qloapps.com/wp-content/uploads/2023/06/C6-1024x479.jpeg)
Under checkout custom fields, the user can see the following option:
- General
- Fields
- Forms
General
In the general tab, the user can enable/disable the following options:
- Display custom fields on invoice: Enable this option to display the custom fields on the invoices.
- 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.
- Display custom fields on order confirmation page: Enable this option to display the custom fields on the order confirmation page.
- Display custom fields on order detail page: Enable this option to display the custom fields on the customer order detail page.
- 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](https://qloapps.com/wp-content/uploads/2023/06/C7-1024x487.png)
Workflow of QloApps Checkout Custom Fields
Fields
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](https://qloapps.com/wp-content/uploads/2023/06/C8-1024x482.png)
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](https://qloapps.com/wp-content/uploads/2023/06/C_review-1-1-1024x498.png)
Dropdown
![QloApps Checkout Custom Fields dropdown](https://qloapps.com/wp-content/uploads/2023/06/C_review_2-1024x548.png)
Checkbox
![QloApps Checkout Custom Fields checkbox](https://qloapps.com/wp-content/uploads/2023/06/C_review_3-1024x548.png)
Radio
![QloApps Checkout Custom Fields radio](https://qloapps.com/wp-content/uploads/2023/06/C_review_4-1024x548.png)
Attachment
![QloApps Checkout Custom Fields attachment](https://qloapps.com/wp-content/uploads/2023/06/C_review_5-1024x529.png)
Dropdown Multiselect
![QloApps Checkout Custom Fields dropdown multi select](https://qloapps.com/wp-content/uploads/2023/06/C_review_6-1024x548.png)
Text Area
![QloApps Checkout Custom Fields text area](https://qloapps.com/wp-content/uploads/2023/06/C_review_7-1024x529.png)
Date
![QloApps Checkout Custom Fields date](https://qloapps.com/wp-content/uploads/2023/06/C_review_8-1024x480.png)
Time
![QloApps Checkout Custom Fields time](https://qloapps.com/wp-content/uploads/2023/06/C_review_9-1024x529.png)
Date and Time
![QloApps Checkout Custom Fields date and time](https://qloapps.com/wp-content/uploads/2023/06/C_review_10-1024x529.png)
- 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.
![](https://qloapps.com/wp-content/uploads/2023/06/C9-1024x529.png)
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.
![](https://qloapps.com/wp-content/uploads/2023/06/C10-1024x529.png)
Forms
The customer can add a new form to assign their fields from the back office.
Checkout Custom Fields > Forms
![](https://qloapps.com/wp-content/uploads/2023/06/C11-1024x529.png)
In add form information block, the user can view and edit the following fields:
![QloApps Checkout Custom Fields Form Configuration](https://qloapps.com/wp-content/uploads/2023/06/W17-966x1024.png)
- 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.
Custom Checkout Fields at the front office
The checkout field will be displayed on the Checkout Page.
![QloApps Checkout Custom Fields checkout page](https://qloapps.com/wp-content/uploads/2023/06/C12-853x1024.png)
After successful checkout, the user can see custom checkout fields at the Confirmation Page.
![QloApps Checkout Custom Fields confirmation page](https://qloapps.com/wp-content/uploads/2023/06/C_review_16-939x1024.png)
The custom checkout fields will be displayed in the invoice.
![QloApps Checkout Custom Fields invoice](https://qloapps.com/wp-content/uploads/2023/06/C14.png)
Checkout custom fields at Order History page
![QloApps Checkout Custom Fields order history](https://qloapps.com/wp-content/uploads/2023/06/C_review_11-1024x556.png)
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](https://qloapps.com/wp-content/uploads/2023/06/C_reviwe_14-1024x489.png)
Conclusion
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.
Be the first to comment.