Reading list Switch to dark mode

    PrestaShop Checkout Custom Fields {User-Guide}

    Updated 22 December 2023

    PrestaShop Checkout Custom Fields module lets you add various types of custom fields to every checkout step. With this extension, the admin can take extra information from the users on the checkout steps by adding various custom fields like text, checkbox, radio button, attachment, dropdown, date and time, etc on the checkout steps.

    Key features of the module:

    • Add unlimited extra fields on checkout steps.
    • Create 11 types of custom fields.
    • Display custom fields on the cart page, personal information step, address step, shipping step, and payment step.
    • Display user input on the order confirmation page, order confirmation email, order detail page, delivery slip, and order invoice.
    • Create custom field groups to display multiple custom fields on a step.
    • Create conditions in the custom field group to display fields on the checkout step.

    Features of PrestaShop Checkout custom fields module

    • Create custom fields of several types like text, text area, checkbox, radio, attachment, dropdown, dropdown multiple selections, date, time, date & time, and readonly fields.
    • Admin can set required custom field.
    • Create custom groups based on conditions like category, minimum cart amount, date range, Country and currency, etc.
    • Admin can assign created custom fields on the custom group.
    • Display custom fields on the cart page, personal information, address step, shipping step, and payment step.
    • Customers can provide additional information in these fields.
    • Display custom fields on invoice, delivery slip, order confirmation mail, order confirmation page, customer order detail page, and admin order detail page.
    • Also, the admin can display multiple custom-field groups in a single checkout step.
    • Configuration to enable the display of custom fields on various pages.
    • Module is Prestashop GDPR compliant
    • This module is multishop compatible.

    Note: PrestaShop Checkout Custom Fields module is compatible with PrestaShop version 8.x.x.

    Installation

    • Firstly, go to the module manager in back office and click on ‘upload a module’.
    • After that, drag and drop the module file or select the file from the system.
    • In this way, the module installation will be successful.
    image-154
    image-155
    image-156

    Custom Hooks Information

    For proper functioning of the “PrestaShop checkout custom fields”, you have to add code on following tpl file:

     /templates/checkout/_partials/steps/addresses.tpl file:

    Searching for an experienced
    Prestashop Company ?
    Find out More

    Add

    {hook h='displayAddressSelectorBottom'}

    Place: Add this hook under </form>

    Refer the screenshot:

    hook

    How to configure the Checkout Custom Fields module

    After the successful installation of the module, you need to configure it. There are three sections in the module configuration.

    • General
    • Custom Fields
    • Custom Field Groups

    General

    configuration-page-1

    Under the general settings, the admin can enable options for the pages on which he wants to display the custom fields entered by the customer.

    • Display attachment URL in invoice, delivery slip and order confirmation mail: Enable this option if you want to display the attachment URL on the invoice, delivery slip, and order confirmation email.
    display-attachment-url-disabled

    If the admin wants then he can display the attachment file URL to the customer by enabling the display attachment URL option.

    display-attachment-url-is-enabled

    Custom fields

    custom-fileds

    Under the custom field option, the admin can create and view all the custom fields.

    Custom field groups

    Under the custom field group tab, the admin can create multiple groups and add multiple fields to a group to display the custom fields at the front end during the checkout process.

    Custom-filed-groups

    Creating custom Fields

    After configuring the general settings the admin needs to create the custom fields to display the custom options at the checkout stages.

    Custom-fields-1

    The admin can add the following types of custom fields to display at the checkout process:

    • Text
    • Dropdown
    • Checkbox
    • Radio
    • Attachment
    • Dropdown multiselect
    • Text area
    • Date
    • Time
    • Date and time
    • Readonly field

    Text

    Text

    Dropdown

    While adding the dropdown field, the admin needs to add the values so that the user can select them during the checkout process.

    Dropdown

    Checkbox

    The admin can add a checkbox field in a similar way he added the dropdown field.

    Checkbox

    Radio

    Radio-1

    Attachment

    Attachment

    Dropdown multiselect

    Dropdown-Multiselect

    Textarea

    The admin can add a textarea field in a similar way he added the text field the only difference between text and textarea field is in fewer input characters in the input box, while the textarea creates a bigger box meant for longer texts, like messages.

    Textarea

    Date

    With this field type, the admin can take user input as a date. The user needs to select the date from a calendar displayed on the front end.

    Date

    Time

    With this option, the admin can allow the customer to take input in time.

    time

    Date and time

    With the field option the admin can input as a date and time format.

    Date-and-time

    Readonly fields

    This field is only used to display a message to the users at the checkout stage. The admin can not take any user input by using this field.

    readonly-fields

    Creating custom field groups

    After creating the custom fields the admin need to create the field groups to display the field at the checkout stage.

    The admin can add multiple fields into a single custom field group. Also, the single field can be added in multiple custom field groups.

    Custom-field-groups-1

    To create a custom field group the admin needs to click on “Add new group button”. After clicking on button the admin will redirect to a page from where he can create a new custom field group.

    Create-custom-group-fields

    Group name: Enter the name of the custom group field.

    Assign custom fields: By clicking on the add field button the admin can add and choose the fields he wants to add to the group.

    Checkout step: Choose the checkout step on which the admin wants to display the options available in the group. There are following five steps available in the module on which the admin can display or take user input by adding the custom fields.

    • Cart page
    • Personal Information step
    • Address step
    • Shipping step
    • Payment step

    Country and currency: Choose the country and currency on which the admin wants to display the custom fields available in the group.

    Minimum Amount: Enter the minimum amount of the cart value to display the custom fields.

    Availability date: Set the display validity date of the custom fields available in the group.

    Status: Enable/Disable the status of the group.

    Categories: Select the categories for those products the admin wants to display the fields.

    Groups: Select the customer groups to display the custom fields.

    Product restriction: Select the products to display the custom fields on the checkout step.

    Note:

    These custom field group conditions will be applied if one of the following products exists in the cart. If not selected any products, it will be applicable to all products.

    All the set conditions must be fulfilled to display the custom fields on the selected step.

    For example: If the admin made a group with the conditions available in the below image.

    Custom-field-group-condition-1

    So, as per the conditions set by the admin for this custom field group in the above screenshot. The user should belong to the customer group and there should be at least one quantity of “Hummingbird printed t-shirt” product in his cart to view the custom fields on the cart page.

    Customer-registered-1

    As you can check in the above-mentioned image that the customer is registered and belongs to the customer group but the custom fields are not displayed on the cart page. This is because the admin has not added any quantity of the “Hummingbird printed t-shirt” product, which didn’t fulfill the condition as set by the admin while creating the custom field group.

    Option-displayed

    Now, after adding the “Hummingbird printed t-shirt” product to the cart the user can view the custom fields on the cart page.

    Display custom fields at front end

    Cart page

    Cart-page

    Personal information step

    custom-fileds-at-personal-information

    Address step

    address-step

    Shipping step

    shipping-step

    Payment step

    payment-step

    Display custom fields on the order confirmation page

    After successfully placing the order the user can view the custom fields data which he mentioned in the custom fields during the checkout process.

    order-confirmation-page

    Order confirmation email

    After placing the order the user can view the values in the order confirmation email too.

    order-confirmation-email

    Custom fields on the invoice

    Order-invoice

    Custom fields on the delivery slip

    delivery-slip

    Order detail page (front office)

    order-detail-page-front-office

    Order detail page (back office)

    The admin can view the custom fields on the order detail page.

    order-detail-page-backoffice-

    So, this was all about the PrestaShop checkout custom field module. I hope this document will help you in checking the functionality of the module in a better way.

    Support

    For any kind of technical assistance or query, please raise a ticket at http://webkul.uvdesk.com or send us a mail at [email protected]

    Also, please explore our Prestashop development services and vast range of quality Prestashop addons.

    Current Product Version - 1.0.0

    Supported Framework Version - 1.7.x.x

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

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

    Back to Home

    Table of Content