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

# Section Product Groups

Welcome to the documentation article on utilizing "Product Groups" (see demo) (opens new window) boxes with Lagom WHMCS Website Builder. In this guide, we'll walk you through the seamless process of incorporating and optimizing "Product Group" boxes to showcase your offerings effectively. Learn how to leverage this feature to organize products, personalize packages, and create a visually appealing website that captures your audience's attention.

# 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.

# Product Group List

# Product Groups

Presents inventory of product groups 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. Product groups - List of product groups added to this section.
  2. Edit - The "Edit" button opens a modal where you can personalize already added "Product Group" to the list.
  3. Remove - Remove "Product Group" from the list.
  4. Add New - Add new "Product Group" item to the list.

# Add/Manage Product Group

# Choose Product Group

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

# Product Group Title & Description

Product group 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 Group 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 Group Tagline" (opens new window) field.

# Linked Page

Choose the WHMCS page or CMS page to which a specific product group will be linked. You can select from a comprehensive list of all available WHMCS pages and CMS pages to seamlessly integrate your product group.

# 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

Apply promotion code to this product group - This option allows you to directly assign a promotional code specific to the product group. For detailed instructions on how to use this feature, please refer to the Common Settings. It is important to familiarize yourself with these settings, as promotional codes can overlap, affecting how discounts are applied across different product groups.

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 Product Groups

The "Group" 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. Product Groups - List of "Product Group" items assigned to specific group.
  6. Group Heading - Second group heading, when "management" options are hidden.

# Product Group Settings

# Product Group 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" - Package with big price and "Learn More" button

# Product Group 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 Group Slider

The "Product Group 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 - Displayed 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:

# Price Display

The "Choose product group price display" option allows you to decide what pricing should be shown for selected product group box.

# Sort Products Groups By Price

This feature allows product groups to be sorted based on their monthly price equivalent. Once enabled, the sorting will automatically arrange products in the selected order.

  1. Lowest To Highest - displays products starting from the lowest monthly price equivalent to the highest. Products with the lowest monthly rate will appear first.
  2. Highest To Lowest - displays products starting from the highest monthly price equivalent to the lowest. Products with the highest monthly rate will appear first.

# Enable Additonal Sorting Categories

When this feature is enabled, your customers can sort product groups based on custom values defined within the product description. To use this option, you will need to modify your product descriptions to include a value that can be used for sorting.

Example of a compatible product description:

<ul class="package-features">
<li data-sort="CPU|4"><b>4</b> Core</li>
<li><b>10 GB</b> Storage</li
><li><b>Unlimited</b> Bandwidth</li>
</ul>

The data-sort attribute defines the value used for sorting. The format should follow Category|Value, where:

  • Category is the identifier for sorting (e.g., "CPU")
  • Value is the numeric value used to compare products

Sorting options:

  1. Lowest to Highest – Products are sorted in ascending order based on the data-sort value. For example, a product with CPU|1 will appear before one with CPU|4.
  2. Highest to Lowest – Products are sorted in descending order based on the data-sort value. For example, a product with CPU|99 will appear before one with CPU|4.

Make sure each product includes the appropriate data-sort value in its description to ensure accurate sorting.

# 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.

# 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. Apply promotion code to all product groups - This option allows you to assign promotional codes to all product groups in the "Product Groups" section simultaneously. For detailed instructions on how to use this feature, please refer to the Common Settings. It is important to familiarize yourself with these settings, as promotional codes can overlap, affecting how discounts are applied across different product groups.
  4. Additional Information Below Product Boxes - This option enables you to include additional information shown below product boxes, such as discounts, VAT inclusion, or payment terms.
  5. Product Custom Class - Allows you to assign custom class to all product packages added to this section.
  6. Section Anchor - Allows to set name for the section anchor, which then could be used, to link people to specific section - learn more.
  7. Section Custom Class - This setting assign custom classes to the section container - learn more.

# Tips

# Product Discount Calculation

The Lagom WHMCS Website Builder includes a helpful feature that shows customers which billing period offers the best value. This is especially useful for resellers who want to show why longer billing periods, like yearly payments, are better value compared to monthly payments.

If you do not wish to utilize this function, our Hide Billing Cycle Discounts feature lets you disable the discounts on your pages.

Within the "Products/Services" settings under the "Pricing" section in WHMCS system, you can set up various billing periods such as monthly, quarterly, and semi-annually.

The feature calculates the monthly cost for each billing period and shows how this compares to paying monthly.

To demonstrate, consider the following example product prices:

Billing cycle and its price Price per month How much % profitability relative to the monthly price
Monthly ($4.69) $4.69 -
Annually ($53.47) $4.46 ($53.47 / 12 months) 5% cheaper relative to the Monthly price
Biennially ($101.30) $4.22 ($101.30 / 24 months) 10% cheaper relative to the Monthly price
Triennially ($143.64) $3.99 ($143.64 / 36 months) 15% cheaper relative to the Monthly price

The most savings (15%) can be gained by choosing the triennially billing cycle.

← Section Product Comparison →