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

# Section Products

In the ever-evolving landscape of online business, it is essential to have tools that not only streamline your operations but also enhance your customers' experience. The "Products" (see demo) (opens new window) section type in Lagom WHMCS Website Builder is one such tool that empowers you to showcase your products and services in an engaging and organized manner.

Whether you are a seasoned entrepreneur or just starting your online journey, the "Products" boxes section type is designed to provide you with a user-friendly and visually appealing way to exhibit your offerings. This documentation will serve as your comprehensive guide to understanding and harnessing the full potential of this feature.

# Section Description

  1. Caption - Caption text shown above section title. Leave this field empty if you do not want to display that element.
  2. Title - Section title placed in <h2> tag. HTML tags are allowed in that field.
  3. Subtitle - Section subtitle, placed below section title. Leave this field empty if you do not want to display that element. Content can be customized using text editor.

# Products List

# Products

Presents inventory of products that have been included in this section and are set to be showcased on the website page. This compilation provides you with the ease of organizing items through a simple drag-and-drop mechanism, enabling you to finely tune their order as needed.

  1. Products - products list, which display list of product boxes added to this section.
  2. Edit - The "Edit" button opens a modal where you can personalize already added "Product" to the list.
  3. Remove - Remove "Product" from the list.
  4. Add New - Add new "Product" item to the list.

# Add/Manage Product

# Choose Group & Product

When "Add New product" modal will be shown, you wil be asked to choose the "Product Group". This select list product which has been configured in WHMCS "Product and Services" (opens new window) page.

Once "Product Group" will be selected, further option field will be shown, where you have to choose what "Product" would you like to add.

There are two methods for adding products to the section:

  1. All products from this group - By choosing this option, all visible products within this group will be automatically added. This eliminates the need for manual individual additions. It is important to note, though, that this method doesn't offer any extra customization options for the products.
  2. Specific product - You also have the alternative to handpick individual products from the chosen group. By opting for specific products, a modal will open with additional fields that grant you the ability to customize products, as outlined below.

# Product Title & Description

Product title and description is automatically loaded from WHMCS database, and these fields can not be managed via this modal.

  1. Title - Can be managed via WHMCS product configuration page. Title load string from "Product Name" (opens new window) field. To manage this element click on the "Edit" button next to the field label.
  2. Description - Can be managed via WHMCS product configuration page. Title load string from "Product Description" (opens new window) field. To manage this element click on the "Edit" button next to the field label. Explore example html code to write correct product description in tips section.

If "Replace default order button with custom link" option is disabled, our addon will automatically generate the link to the ordering process for following product.

When "Replace default order button with custom link" option is enabled, you'll be able to configure product button as per your requirements, using available settings.

  1. Replace default order button with custom link - Decide if you'd like to use default button, or replace it with your own.
  2. Link Text - Enter button text.
  3. Link Type - Choose button type.
    • Custom URL - When selected new field will be shown where custom URL can be entered.
    • WHMCS Page - When selected new filed will be shown with list of all available WHMCS and CMS pages.
    • Homepage - When selected, package will be linked to the website homepage.
  4. Custom URL - This field becomes visible only when the "Custom URL" link type is chosen. Different fields will be displayed for other link types.
  5. Open URL in new window - When activated, link will be opened as new browser window.

# Show Graphic

When the "Show graphics for this item" option is turned on, a list of available icons and graphics will be displayed. Learn more about "Media Modal".

# Advanced Settings

  1. Custom Description - Overrides default product description, generated from WHMCS database. Allows you to write different description for this specific product package.
  2. Custom Class - Adds custom class to the product package container, which lets you to write your own CSS rules, to modify our product based on your requirements.

# Group Products

The "Group Products" option enables you to generate multiple product groups, which will subsequently appear on the frontend as distinct tabs.

Take a look at an illustrative example of how these groups might be presented on the resulting website page.:

# Manage Group

  1. Group Name - Set the group name, which then will be shown as "tab", above "Feature" items list.
  2. Close/Edit - Click to hide or expand management options.
  3. Remove - Click to remove group and its items. IMPORTANT: all "items" from this group will be removed.
  4. Add Group - Click to create new group, where you can assign new Feature items.
  5. Products - List of "Product" items assigned to specific group.
  6. Group Heading - Second group heading, when "management" options are hidden.

# Products Settings

# Product Type

Choose the appearance of the product boxes on your generated website page by selecting one of the predefined types from the provided list.

# "Type 1" - Vertical aligned products

# "Type 2" - Vertical aligned small products

# "Type 3" - Horizontal aligned products

# "Type 4" - Graphic product without description

# Product Style

Choose the style for the created packages to determine how you want them to be displayed on the generated website page.

# "Boxed" Style

# "Bordered" Style

# Product Slider

The "Product Slider" feature empowers you to determine the screen resolutions at which the product packages will be displayed as a slider. This option proves beneficial especially when you have a substantial number of products to showcase, and you aim to prevent excessive page length.

When enabled you'll see additional multi select field, where you'd be able to choose multiple options from below list

  1. All - Slider will be visible on all screen resolutions.
  2. Desktop - Displayed on screens wider than 1320px.
  3. Tablet horizontal - SDisplayed on screens with widths ranging from 992px to 1319px.
  4. Tablet vertical - Displayed on screens with widths ranging from 768px to 991px.
  5. Mobile - Shown on screens with width smaller than 767px.

Here's an example of how the slider featuring "Product" packages appears on the generated website page:

# Product Billing Switcher

The "Product Billing Switcher" option enables you to display multiple billing cycle options for "Product" packages, so your customers can compare the pricing between different billing cycles

# Multiple Billing Cycles

When you choose multiple billing cycle options from the list, a switcher will appear above the product boxes, as demonstrated in the example below.

The billing cycle will be presented in the form of a dropdown when the product boxes are organized into multiple tabs, as depicted below:

Additionally when this option is enabled, our addon automatically calculate the price difference between billing cycles, and displays savings labels, as can be seen in our demo pages. Learn more about price calculation.

# Single Billing Cycle

When you pick just one billing cycle from the selection, you get to decide which price shows up for your "Product" packages. This happens because when the "Product Billing Switcher" option is turned off, our addon automatically shows the price of the first billing cycle that's set in the product pricing.

For instance, if you want to show prices from the "Triennial" billing cycle for your product packages, simply choose that specific option from the list.

# Product Columns

  1. Columns on desktop - Define the number of columns for features displayed on screens wider than 1320px.
  2. Columns on tablet horizontal - Specify the number of columns for features displayed on screens with widths ranging from 992px to 1319px.
  3. Columns on tablet vertical - Choose the number of columns for features displayed on screens with widths ranging from 768px to 991px.
  4. Columns on mobile - Set amount of columns with features, shown on screens with width smaller than 767px.

# Hide Starting From

When the "Hide starting from text" option is enabled, product will not show "Starting from" text above the pricing. This text is shown by WHMCS system, where product has configurable options assigned.

# Reverse Billing Cycle Order

Product billing cycles are displayed from the longest to the shortest by default.

This feature allows you to reverse the order of the product's billing cycles. When selected, the billing cycles will be displayed from the shortest cycle to the longest.

# Section Actions

In this section you are able to add additional CTA buttons which will be shown below product boxes. Learn more how to add buttons using Add Button Manager modal.

# Section Advanced Settings

  1. Combine This Section With Section Below - When activated it will remove bottom padding and border from this section. This setting was designed to combine two sections into single section - learn more.
  2. Overlay Section Below on This Section - This setting pull below section over this section, moreover it adds additional bottom padding - learn more.
  3. Product Custom Class - Allows you to assign custom class to all product packages added to this section.
  4. Section Anchor - Allows to set name for the section anchor, which then could be used, to link people to specific section - learn more.
  5. Section Custom Class - This setting assign custom classes to the section container - learn more.

# Tips

# Default Product description

  1. Description - can be placed in <p></p> tags, for example:
<p>Ideal for small and medium businesses.</p>
  1. Feature List - should be created as html list, as shown in below example:
<ul class="package-features">
    <li><b>Unlimited</b> Website</li>
    <li><b>50 GB</b> NVMe Storage</li>
    <li><b>Unmetered</b> Bandwidth</li>
    <li><b>Unlimited</b> Emails & DBs</li>
    <li><b>Free</b> SSL Certificate</li>
    <li class="premium-divider"><span>Premium Features</span></li>
    <li><b>On-demand</b> Backups</li>
    <li><b>50% Faster</b> Servers</li>
    <li><b>Priority</b> Support</li>
</ul>
  1. Feature Divider - should be placed as one of the list item <li class="premium-divider"><span>Premium Features</span></li>

# Inline Product Description

<ul class="package-features package-features-lg">
    <li>
        <b><i class="ls ls-apps"></i>4 Cores</b>3.6GHZ Frequency
    </li>
    <li>
        <b><i class="ls ls-credit-card"></i>16GB</b> Memory
    </li>
    <li>
        <b><i class="ls ls-hosting"></i>1x240GB</b> SSD Storage
    </li>
    <li>
        <b><i class="ls ls-spark"></i>20TB </b>1Gbps Transfer
    </li>
</ul>

# Feature Tooltips

There is an option to use bootstrap tooltips functionality, if you need to show additional description to your products features, as shown in below example:

To add "info" icon with a tooltip as shown in above example, you have to add following code to your product description in WHMCS settings:

<span data-toggle="tooltip" data-placement="top" title="Tooltip message"><i class="ls ls-info-circle"></i></span>

Where tooltip message should be located in place of Tooltip message text. Final code should look like below:

<ul class="package-features">
    <li><b>Unlimited</b> Website <span data-toggle="tooltip" data-placement="top" title="Tooltip message"><i class="ls ls-info-circle"></i></span></li>
    <li><b>50 GB</b> NVMe Storage <span data-toggle="tooltip" data-placement="top" title="Tooltip message"><i class="ls ls-info-circle"></i></span></li>
    <li><b>Unmetered</b> Bandwidth <span data-toggle="tooltip" data-placement="top" title="Tooltip message"><i class="ls ls-info-circle"></i></span></li>
    <li><b>Unlimited</b> Emails & DBs <span data-toggle="tooltip" data-placement="top" title="Tooltip message"><i class="ls ls-info-circle"></i></span></li>
    <li><b>Free</b> SSL Certificate <span data-toggle="tooltip" data-placement="top" title="Tooltip message"><i class="ls ls-info-circle"></i></span></li>
    <li class="premium-divider"><span>Premium Features</span> <span data-toggle="tooltip" data-placement="top" title="Tooltip message"><i class="ls ls-info-circle"></i></span></li>
    <li><b>On-demand</b> Backups <span data-toggle="tooltip" data-placement="top" title="Tooltip message"><i class="ls ls-info-circle"></i></span></li>
    <li><b>50% Faster</b> Servers <span data-toggle="tooltip" data-placement="top" title="Tooltip message"><i class="ls ls-info-circle"></i></span></li>
    <li><b>Priority</b> Support <span data-toggle="tooltip" data-placement="top" title="Tooltip message"><i class="ls ls-info-circle"></i></span></li>
</ul>

← Section Product Groups →