Lagom WHMCS Client Theme Documentation
Docs v2.x
/ /website-builder/ /extensions/ /module-integration/ /order-form/

# Display Manager

Lagom WHMCS Smart Order Form (opens new window) allows you to control how products and their configuration options are displayed during the order process. You can adjust the layout to match your business needs and create a clearer experience for your clients.

# Configurable Options

This section explains how to manage the display of configurable options for each WHMCS product and how to create different layouts for the configuration process.

It also presents how the available settings work, based on examples from our demo page (opens new window).

# Configurable Option Groups

This section shows configurable option groups available in your WHMCS system. To learn how to create and assign them, please check the official WHMCS documentation (opens new window).

# Group Settings

By default, each configurable option group assigned to a product is displayed as a separate section during the order process. If you want to change this behavior, edit the selected group and enable Configurable Options Displayed In Single Section.

When enabled, all configurable options from that group are grouped into one main section, and each option is shown as a sub-section inside it. This helps reduce visual complexity and keeps related options in one place.

You can see the difference in behavior by comparing separate sections layout with single section layout with sub-sections.

When Configurable Options Displayed In Single Section is enabled, the following settings become available.

# Title

Defines the name of the main section shown during the order process. This field is required.

# Description

Adds additional text displayed for this section. You can use it to explain the purpose of the available options or help clients understand what they are choosing. This field is optional and can be left empty.

# Description Type

Controls how the section description is displayed in the order process.

# Default

Shows the description directly in the section.

# Tooltip

Shows the description inside a tooltip, which helps keep the section more compact.

# Option List

This section shows all configurable options assigned to your configurable option groups. To learn how to create and manage them in WHMCS, please check the official WHMCS documentation (opens new window).

# Option Settings

To change how a specific configurable option is displayed in the order process, click the edit icon next to that option. Available settings depend on the selected Display Type, so the modal may show different fields for different configurations.

# Title

There is no separate title field for configurable options in the addon. The option name is taken directly from the configurable option created in WHMCS. If you want to change it, update the option name in your WHMCS configurable option settings as described in the official WHMCS documentation (opens new window).

# Description

This field works the same way as the Description field in configurable option groups. It lets you add extra text that helps clients understand the purpose of the option. You can read more in the Description section.

# Description Type

This field works the same way as the Description Type field in configurable option groups. It controls how the description is shown in the order process. You can read more in the Description Type section.

# Display Type

This setting controls how the configurable option is displayed in the order process. The available display types depend on the original option type selected in WHMCS, so not every option will be available in every case.

You can use the default WHMCS layout with System Default, or choose one of the custom layouts provided by Lagom Smart Order Form.

Available display types:

  • System Default – uses the standard WHMCS layout.
  • Radio Box – available for Radio and Dropdown.
  • Check Box – available for Yes/No.
  • Slider/Quantity – available for Quantity.
  • Group Box – available for Radio and Dropdown.
  • Product Box – available for Radio and Dropdown.
  • Addon Box – available for Radio and Dropdown.
  • Slider – available for Radio and Dropdown.

To see how each layout looks and behaves, check Radio Box, Check Box, Slider/Quantity, Group Box, Product Box, Addon Box, and Slider.

To learn how WHMCS option types work, please check the official WHMCS documentation (opens new window).

# Option Management

This section allows you to customize how configurable options and their suboptions are displayed in the order process.

This section is available only for custom display types. It is not available for System Default, because this layout is handled directly by WHMCS.

# Suboptions

This section shows suboptions created for a specific configurable option. Basic configuration of suboptions is managed in WHMCS. To learn more, see the official WHMCS documentation (opens new window).

# Manage Suboption

Click the Edit button next to a suboption to configure its additional settings.

  • Description – Adds extra information for the suboption. Leave empty to hide it.
  • Image – Assigns an image to the suboption. Images are selected from the Media Library.
  • Color – Defines a custom color for the suboption.

# Groups

This tab allows you to create groups and assign suboptions to them. Grouping helps organize options and improves readability in the order process, for example in sections like Server Location.

# Add/Manage Group

Use the Edit button to modify an existing group, or click Add Group in the top right corner to create a new one.

  • Name – Defines the group name shown in the order process.
  • Description – Adds additional information for the group. Leave empty to hide it.
  • Enable – Allows you to show or hide the group.
  • Image – Assigns an image to the group. Images are selected from the Media Library.
  • Suboptions – Selects which suboptions belong to this group. At least one suboption must be assigned, otherwise the group will not be displayed.
# Group Types

Groups can be displayed in different ways depending on the selected display type.

# Tabs

Groups are displayed as tabs, allowing users to switch between them.

# Boxes

When Group Box is selected as the display type, groups are shown as boxes, and suboptions are available inside a dropdown.

# Translations

You can translate option names, descriptions, and other fields using language variables. For a full guide, see Languages.

# Option Types

This section explains how each display type presents configurable options in the order process. Each type changes how suboptions are shown to the client, so choosing the right one affects both layout and usability.

Display types are available depending on the original option type selected in WHMCS.

# Radio Box

Displays suboptions as a list of selectable radio boxes.

This display type is available for Radio and Dropdown option types in WHMCS.

You can see this layout used, for example, in Server Location or Server Image.

# Available Elements
  1. Name – Can be split into two lines using a comma , in the option name.
  2. Image – Recommended minimum width is 42px.
  3. Description – Displays additional information for the suboption.
  4. Price – Displays the suboption price.

# Group Box

Displays suboptions grouped into categories, allowing users to switch between them.

This display type requires at least one group and is available for Radio and Dropdown option types.

You can see this layout used, for example, in Operating System & Control Panel or Server Location.

# Available Elements
  1. Image – Recommended minimum width is 72px.
  2. Name – Displays the suboption name.
  3. Description – Displays additional information for the suboption.
  4. Selected Suboption – Shows the currently selected option and its price.
  5. Suboptions List – Displays available suboptions. This list does not support images or descriptions.

# Product Box

Displays suboptions as product-style boxes with extended information.

This display type is available for Radio and Dropdown option types.

You can see this layout used, for example, in Server Size.

# Available Elements
  1. Image – Recommended minimum width is 64px.
  2. Name – Displays the suboption name.
  3. Price – Displays the suboption price.
  4. Description – Supports HTML content, which allows you to present features or specifications in a structured way, for example:
<ul class="package-features"><li><b>1</b> vCPU</li><li><b>10 GB</b> Memory</li><li><b>4 TB</b> Bandwidth</li></ul>

# Addon Box

Displays configurable options as selectable addon-style boxes with extended visual layout.

This display type is available for Radio and Dropdown option types.

You can see this layout used, for example, in Configure Server, Configure Hardware, or Services.

# Management
# Illustration Type

Defines how the image container is displayed for each option.

Default

Uses a container with 198px width. All graphics placed in this container will be shown with a maximum width of 198px.

Icon

Uses a 64px container designed for Lagom WHMCS Client Theme (opens new window) icons.

Illustration

Designed for larger illustrations available in Lagom WHMCS Client Theme (opens new window).

Small Illustration

Works the same as Illustration, but uses a smaller size.

# Available Elements
  1. Image – Displays the assigned image.
  2. Name – Displays the option name.
  3. Description – Displays additional information for the option.
  4. Suboptions List – Displays available suboptions.

# Checkbox

This display type uses a simple checkbox layout. No additional configuration options are available.

# Slider/Quantity

This display type allows users to select quantity using a slider. No additional configuration options are available.

# Slider

Allows users to select values using a slider with steps based on the suboptions configured for the selected configurable option.

This display type is available for Radio and Dropdown option types.

# Exemplary Configuration

This section shows practical examples of how to configure products in WHMCS and display them in the order form. Each example is based on a real setup from our demo page (opens new window) and shows how the configuration is created in WHMCS, adjusted in the Display Manager, and presented on the order page.

# Web Hosting

The Web Hosting (opens new window) product group in our demo page does not use configurable options.

This example shows a simple setup where the order form displays only predefined product parameters, without additional customization.

# VPS Hosting

The VPS Hosting (opens new window) product group uses multiple configurable options to allow full server customization.

The following examples present different ways to structure and display these options, depending on the type of configuration and the desired layout on the order page.

This makes VPS Hosting a good reference for understanding how configurable options affect both functionality and layout.

# Server Location

This example shows server locations displayed as grouped selection boxes, where each group represents a region and each option represents a specific location.

# WHMCS Configuration
  1. Create a new configurable option group (opens new window) and name it, for example "Server Location - Boxes".

  1. Assign the group to the relevant products in the "Assigned Products" section.

  2. Create a new configurable option, for example "Server Location".

  3. Create each location as a suboption. Separate the city and country with a comma. This allows the option name to be displayed in two lines on the order page – learn more.

# Display Manager Configuration

  1. Go to Lagom Smart Order Form → Display Manager → Configurable Options.

  2. Find the previously created group and click "Options".

  1. Click "Edit" next to the "Server Location" option.
  1. Set "Display Type" to "Group Box" to display locations as selectable regions.
  1. Save changes and click "Options" next to the "Server Location" row.
  1. Open the "Groups" tab and create region groups. Assign the correct suboptions to each group.
  1. Once completed, the configured groups will be displayed as separate regions on the order page.
# Server Image

This example shows server images displayed as visual options with icons, grouped into operating systems and applications.

# WHMCS Configuration
  1. Create a new configurable option group (opens new window) and name it, for example "Server Image - OS & Apps".

  1. Assign the group to the relevant products in the "Assigned Products" section.

  2. Create a new configurable option, for example "Server Image".

  3. Create suboptions for both operating systems and applications. Separate the name and version with a comma. This allows the option name to be displayed in two parts on the order page – learn more.

  1. Add application options in the same list. You will group them later in the Display Manager.
# Display Manager Configuration

  1. Go to Lagom Smart Order Form → Display Manager → Configurable Options.

  2. Find the created group and click "Options".

  3. Click "Edit" next to the "Server Image" option.

  4. Configure the display settings based on the example below.

  1. Save changes and click "Options" next to the "Server Image" row.
  1. Edit each suboption and assign the appropriate image.
  1. Open the "Groups" tab and create groups such as "Operating Systems" and "Applications". Assign the correct suboptions to each group.
  1. Once completed, the options will be displayed as grouped visual selections on the order page.
# Configure Server

This example shows how to build a server configuration section where clients can customize resources such as CPU, RAM, and storage.

# WHMCS Configuration
  1. Create a new configurable option group (opens new window) for each VPS product and name it, for example "VPS - Configure Server (VPS-1)".

  1. Assign the group to the selected product in the "VPS Hosting" product group.

  2. Create configurable options such as:

    • CPU Cores
    • RAM
    • Storage

  3. Create suboptions for each configurable option. The first suboption should match the base configuration of the product, for example "1 vCPU" if it is included in the package. Set this first suboption as free, because it represents the default value already included in the product price.

  1. Repeat the same structure for each VPS product, adjusting values to match the package specifications.
# Display Manager Configuration

  1. Go to Lagom Smart Order Form → Display Manager → Configurable Options.

  2. Click "Edit" next to the "VPS - Configure Server (VPS-1)" group.

  3. Configure the display settings based on the example below.

  1. Save changes and click "Options" next to the group.

  2. Edit each configurable option to adjust its display and behavior.

  1. Repeat the same configuration for all VPS products.
# Available Addons

This example shows how to display additional services as selectable addons on the order page.

Some addons, such as "Protect your site with SSL", may include a dropdown with multiple options. This behavior is specific to MarketConnect products and cannot be replicated with standard product addons.

# WHMCS Configuration

  1. Create a new product addon (opens new window) and assign it to the relevant VPS products.

    Addons are used for optional services that can be added to the order, such as backups, monitoring, or additional features.

    Standard addons are displayed with a simple "Add to Cart" button and do not support dropdown selection.

# Display Manager Configuration
  1. Go to Lagom Smart Order Form → Display Manager → Product Addons.

  1. Click "Edit" next to the addon you want to configure.

  2. Adjust its display settings based on the example below.

# Dedicated Servers

The Dedicated Servers (opens new window) product group uses multiple configurable options to present detailed server configuration with a different layout than VPS Hosting.

The following examples show how to structure and display options such as server location, operating system, and control panel using list-based and grouped layouts.

# Server Location

This example shows server locations displayed as a list of selectable options, grouped by region using tabs.

# WHMCS Configuration
  1. Create a new configurable option group (opens new window) and name it, for example "Server Location - Tabs".

  1. Assign the group to the relevant products in the "Assigned Products" section.

  2. Create a new configurable option, for example "Server Location".

  3. Create each location as a suboption. Separate the city and country with a comma. This allows the option name to be displayed in two lines on the order page – learn more.

# Display Manager Configuration

  1. Go to Lagom Smart Order Form → Display Manager → Configurable Options.

  2. Find the created group and click "Options".

  3. Click "Edit" next to the "Server Location" option.

  1. Configure the display settings to present locations as a list with grouped tabs.
  1. Save changes and click "Options" next to the "Server Location" row.
  1. Edit each suboption to adjust its content and appearance.
  1. Open the "Groups" tab and create region groups. Assign the correct suboptions to each group.
  1. Once completed, locations will be displayed as a tabbed list grouped by region on the order page.
# Operating System & Control Panel

This example shows how to configure options for selecting an operating system and a control panel.

Both options are created and configured in the same way, but represent different parts of the server setup.

# WHMCS Configuration
  1. Create a new configurable option group (opens new window) and name it, for example "OS & Control Panel".

  1. Assign the group to the relevant products in the "Assigned Products" section.

  2. Create two separate configurable options:

    • Operating System
    • Control Panel

  3. Create suboptions for each configurable option, such as different systems or panels.

# Display Manager Configuration

  1. Go to Lagom Smart Order Form → Display Manager → Configurable Options.

  2. Click "Options" next to the "OS & Control Panel" group.

  3. Configure each configurable option (Operating System and Control Panel) based on the example below.

  1. Save changes and click "Options" next to the "Operating System" row.
  1. Open the "Groups" tab and create groups for organizing the options.
  1. Once completed, the operating system options will be displayed as grouped selections on the order page.
  1. Repeat the same steps for the "Control Panel" configurable option.
# Configure Hardware, Network and Services

These sections are configured in the same way as the "Configure Server" example. The difference is only in the type of options you define. Hardware can include CPU, RAM or storage, network can include bandwidth or IP-related options, and services can include additional features or server-related services. Adjust the option names and values to match your configuration.

# Vultr Reseller

The Vultr Reseller (opens new window) product group shows how Vultr services can be structured and displayed in WHMCS using configurable options. You can explore the original Vultr offer (opens new window) and start with $100 free credits by using this link (opens new window).

# Products

Each server type available on the Vultr deploy page is created as a separate WHMCS product.

The same structure recreated in WHMCS is shown below.

# Server Location

This section uses the same configuration as the "Server Location" example from the Dedicated Servers product group.

# Server Image

This section uses the same configuration as the "Server Image" example from the VPS Hosting product group.

# Server Size

This example shows how to present predefined server sizes grouped by category.

# WHMCS Configuration

Each product in this group uses its own configurable option group, because each server type can have different size options.

  1. Create a new configurable option group (opens new window) for the selected product and name it, for example "Vultr Products - Cloud Compute".

  1. Assign the group to the selected product.

  2. Create a new configurable option, for example "Server Size".

  3. Create suboptions representing available server sizes.

    Start each suboption name with a category label, for example AMD High Performance or Intel High Frequency. The same labels will be used later to group options in the Display Manager. This is required to ensure that options are grouped correctly on the order page.

  1. Repeat the same setup for each product in this group.
# Display Manager Configuration

  1. Go to Lagom Smart Order Form → Display Manager → Configurable Options.

  2. Find the created group and click "Options".

  3. Click "Edit" next to the "Server Size" option and configure it based on the example below.

  1. Save changes and click "Options".

  2. Edit each suboption and add a description in the Description field using the example below.

    <ul class="package-features"><li><b>2</b> vCPU</li><li><b>2 GB</b> Memory</li><li><b>5 TB</b> Bandwidth</li></ul>
  1. Go to the "Groups" tab and create categories using the same names as in the suboptions. For example, if your suboptions start with AMD High Performance or Intel High Frequency, create groups with exactly the same names.
  1. Once completed, the server sizes will be displayed as grouped options on the order page.
# Available Addons

This section uses the same configuration as the "Available Addons" example from the VPS Hosting product group.

# Reseller Hosting

The Reseller Hosting (opens new window) product group does not use configurable options. This example shows a simple setup where all product parameters are predefined and no additional configuration is required on the order page.

# Product Addons

This section allows you to manage how product addons created in the WHMCS system (opens new window) are displayed in the order form. You can assign images and adjust how each addon is presented to the client.

# Manage Addons

  1. Go to Lagom Smart Order Form → Display Manager → Product Addons.

  2. Click "Edit" next to the addon you want to configure.

  1. Configure the addon using the available options:
  • Image – assigns an image to the addon. Images are selected from the Media Library
  • Illustration Type – defines how the image is displayed. Available types include Default, Icon, Illustration, and Small Illustration
  • Color – sets a custom background color for the addon

# Payment Gateway Icons

This section allows you to upload custom gateway icons and assign them to payment methods displayed on the order page.

  1. Go to Lagom Smart Order Form → Display Manager → Payment Gateway Icons.

  2. Upload a new icon in the "Icon Library" section.

  3. Assign the uploaded icon to a selected payment gateway using the "Click to assign icon" field.

# Checkout Order Fields

This section allows you to add custom fields to the order form, for example to collect additional information or meet legal requirements.

Custom order fields are displayed below the default WHMCS "Terms of Service" checkbox.

  1. Go to Lagom Smart Order Form → Display Manager → Checkout Order Fields.
  1. Add a new field or edit an existing one.
  1. Configure the field using the available options:
  • Type - Select the field type, such as checkbox, text input, or dropdown.
  • Name - Define the field label displayed to the client.
  • Required - Decide whether the field must be completed before placing the order.
  • Description - Add additional information displayed below the field.

After the field is saved, it is displayed on the checkout page.

In the example below, custom checkbox fields are displayed below the standard WHMCS "Terms of Service" checkbox.

# Media Library

This section allows you to manage images used in configurable options and product addons. You can find it in Lagom Smart Order Form → Display Manager → Media Library.

The library includes predefined graphics. You can also download a ready package from ModulesGarden (opens new window) or add your own files.

To use them, place the files in /modules/addons/LagomOrderForm/storage/gallery/. All graphics must be stored directly in the /gallery/ directory.

# Geolocation

Geolocation allows the order form to detect the client's location and automatically adjust language and currency based on the detected country and your settings.

To use this feature correctly, make sure the geolocation database is updated and configure how detected locations affect language and currency.

# Update Geolocation Database

The addon uses the GeoLite2 database from MaxMind to detect client location. You need to download and update this file manually.

  1. Create an account in the MaxMind portal. Instructions are available on the MaxMind website (opens new window).

  2. Log in and go to GeoIP2 / GeoLite2 → Download Files.

  3. Download the GeoLite2 Country database in .mmdb format.

  1. Replace the existing file in your WHMCS installation:

/yourWHMCS/modules/addons/LagomOrderForm/app/Integrations/Geolocation/Submodules/GeoIP2/GeoLite2-Country.mmdb

# Configure Geolocation Settings

Once the database is updated, you can configure how geolocation works in the order form. Go to Lagom Smart Order Form → Display Manager → Geolocation.

# Enable Geolocation

Enables automatic detection of the client's location and adjusts the language and currency based on your configuration. Use this option to provide a localized experience without requiring manual selection from the client.

# Custom IP Address

Allows you to simulate a different client location by providing a specific IP address. When used, the module ignores the real client IP address and applies location settings based on the provided IP. This is useful for testing how the order form behaves for users from different countries. Leave this field empty to use automatic detection.

# Default Currency

Defines which currency is used when no specific currency is assigned for a country in the "Country Settings" tab. This acts as a fallback to ensure that a currency is always selected.

# Default Language

Defines which language is used when no specific language is assigned for a country in the "Country Settings" tab. This ensures that the order form always has a language assigned, even if no country-specific configuration is set.

# Country Settings

Use the "Country Settings" tab to assign a specific currency and language to selected countries. When a client's country is detected, the assigned values will be used in the order form.

If no country-specific values are configured, the default settings will be used instead. You can also use mass actions to assign one language or currency to multiple countries at the same time.

← Settings →