Section Product Comparison

• Section Description
• Table Content
  • Products
  • Add/Edit Product
  • Features/Categories List
  • Table Groups
• Table Settings
  • Table Style
  • Table Type
  • Hide starting from text
  • Disable sticky header
  • Display billing cycle switcher with selected cycles
  • Reverse billing cycle order
  • Columns settings
• Section Actions
• Section Advanced Settings
• Advanced Customization
  • Replacing Existing Icons with Custom Icons
  • Implementation of custom HTML code

Welcome to the "Product Comparison" section of the Lagom WHMCS Website Builder. This feature enables you to present your products side by side in a straightforward comparison table, making it easier for your customers to see the differences and benefits of each offering. It is an excellent tool for hosting companies looking to help their clients make informed decisions about various service packages or product options. With this section, you can effectively highlight the key features and advantages of your products, enhancing customer experience and aiding in their selection process. Learn how to set up and customize your comparison tables with our detailed guide, and see this feature in action in our demo - "Product Comparison" (see demo) (opens new window).

Section Description

1. Caption - Provide a brief section caption to appear above the main title in a smaller font. You can skip this if you do not wish to display this element.
2. Title - Elevate page clarity and visual hierarchy using section titles. Optionally skip for not displaying this element.
3. Subtitle - Add concise text to clarify section content, enhancing context and user understanding. Content can be customized using a text editor (opens new window). You can also skip this if you do not want to display this element.

Table Content

In the Table Content section, you can build detailed tables from scratch. Add products and their features, and categorize them as needed. You can manage multiple tables that can be shown in tabs, perfect for detailing different product plans or options on a single page. The drag-and-drop feature makes it easy to organize your content without worrying about the order.

Products

This is a list used to manage products, which are displayed in the Comparison Table at the very top as headers of individual columns. See the example below.

1. Group table content in multiple tabs - This feature allows you to organize your products into groups, with each group displayed in a separate table. This arrangement helps in creating a cleaner and more structured display, especially when dealing with a large variety of products. For more details on configuring and managing these groups, see the detailed section below - Table Groups
2. Products - Products list, which displays a list of product boxes added to this section.
3. Edit - The "Edit" button opens a modal where you can personalize the already added "Product" to the list - learn more (opens new window).
4. Remove - Remove "Product" from the list.
5. Add New - Add a new "Product" item to the list - learn more (opens new window).

Add/Edit Product

The "Add/Edit Product" function enables you to manage the products featured in your comparison table. Within the table displayed on the website, each product is presented in a separate column, with key information about each product appearing in the first row. This setup helps customers easily compare and contrast the different options available.

Choose Group & Product

When the "Add/Edit New Product" modal is shown, you will be asked to choose the "Product Group". This select list product has been configured in the 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.

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 the WHMCS product configuration page. Title load string from the "Product Name" (opens new window) field. To manage this element click on the "Edit" button next to the field label.
2. Description - This field is just a preview of the product’s description generated from the WHMCS system and it will not be shown on your website for the Product Comparison section type.

Product Link

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 will be able to configure product button as per your requirements, using available settings.

1. Replace default order button with custom link - Decide if you would like to use default button, or replace it with your own.
2. Link Text - Enter button/link 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 field 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" (opens new window).

Advanced Settings

1. Custom Description - Usually, it overrides the default product description generated from the WHMCS database. However, for the "Product Comparison" section type, you can use it to input a tailored description visible only within the addon. Note: This custom description does not appear on the live website.
2. Custom Class - Adds custom class to the product package container, which lets you write your own CSS rules, to modify our product based on your requirements.

Features/Categories List

This section presents a manageable list where you can organize both categories and features that will appear on your website’s comparison page. You can arrange these items easily through a drag-and-drop system, adjusting their order as needed.

The list appears as a table that mirrors the comparison table displayed on your website. This setup makes it straightforward to assign the correct features and categories. You can enhance each category with its own image, and add specific values or icons to the features for clearer presentation.

This interactive layout not only simplifies the process of adding and organizing content but also ensures that each feature and category is visually represented in a way that is easy to understand for your visitors.

1. Edit Title - Enables editing the name for the first table’s column.
2. Add Category - This opens the window for creating a category.
3. Add Feature - This opens the window for creating a feature.
4. Management Options - Here you will find a context menu with additional options for managing products/categories. Their description can be found below.

Feature Management Options

1. Edit Details - Opens the window for editing feature details - "learn more".
2. Copy Feature - This allows you to duplicate an existing feature without re-entering the same information, streamlining the process of adding similar features.
3. Hide Feature - This enables you to temporarily remove a feature from your website without deleting it. When activated, the feature will appear grayed out, and a "Show Feature" option will become available in the context menu to easily bring it back.
4. Delete - Allows you to delete a feature.

Category Management Options

1. Edit Category - Opens the window for editing category details.
2. Copy Category - Allows you to duplicate an existing category without re-entering the same information, streamlining the process of adding similar features.
3. Hide Category - Enables you to temporarily remove a category from your website without deleting it. When activated, the category will appear grayed out, and a "Show Category" option will become available in the context menu to easily bring it back.
4. Delete - Allows you to delete a category.

Add/Edit Feature

This function allows you to add or modify the features of products in your comparison table. A "feature" refers to specific attributes or benefits of a hosting product, such as disk space, bandwidth, or SSL certificates. Through the "Add/Edit Feature" modal, you can specify the details and characteristics that distinguish each product, helping customers make informed decisions by directly comparing these features across different hosting plans.

Feature Details

1. Feature Name - Enter the name for the feature that will be displayed in the first column of the comparison table.
2. Show hint for this feature - Enable this option to display a tooltip that offers additional information about the feature.
3. Hint Description - Provide the text for the tooltip; this description will assist users in understanding the feature better.

Products Value

1. Product name - The names of products that have been previously added to the comparison table are displayed here.
2. Icon selector - Allows you to enhance the feature's visual representation by choosing from a set of predefined icons. Select an icon to symbolize the presence, absence, or other special attributes (like "Hot", "Denial", "Globe", "Shield") of a feature within a product. If no specific representation is needed, you can opt for "None" to keep the feature text-only. If icons available by default doesn't meet your expecations you can replace them with icons of your own according to instruction here.
3. Input field - This is a text input field where you can specify the value or description of the feature for each product. It enables you to detail how each product meets this feature, such as specific capacities, capabilities, or any unique selling points that are relevant to the feature being described. This field supports plain text to accommodate a variety of information you may wish to include about the feature.

Advanced Settings

Custom feature class - Adds a custom class to the feature container, allowing you to write your CSS rules and modify the category element based on your requirements.

Add/Edit Category

This function allows you to organize features into distinct categories, enhancing the clarity and structure of your comparison table. Categories appear as separate rows in the table, helping to group related features. You can name each category and optionally assign an image to visually represent it. Like feature elements in the table, categories can be rearranged using a simple drag-and-drop mechanism, allowing you to position them as needed within the table layout.

1. Category Title - Input the name for the category. This name will be displayed as a header row in the comparison table, serving as a label to group related features.
2. Show graphic for this item - This option allows you to select an icon for the category. You can choose from a list of pre-defined icons to add visual flair to your category’s design.
3. Custom category class - Adds a custom class to the category package container, allowing you to write your CSS rules and modify the category element based on your requirements.

Table Groups

"Table Groups" is a feature that allows you to create and manage multiple tables within a single "Product Comparison" Lagom Website Builder’s section. This feature is particularly useful for resellers who wish to showcase different products or various configurations of a single product. Each group or table is accessible as a tab above the main table, enabling users to switch between tabs to view different tables. This setup offers a flexible way to present diverse product offerings or comparisons in a structured and organized manner.

Group table content

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

1. Products group - This list enables the management and organization of different product groups. Each group corresponds to a separate comparison table.
2. Move Up/Down arrow - These buttons allow you to adjust the order in which product groups are displayed.
3. Edit group - Expands a given group of products allowing you to edit the group’s content - learn more.
4. Remove - This function enables you to delete a product group from the list, removing all associated data and settings.
5. Add Group - Add a new product group item to the list - learn more.

Add Group

This interface allows you to complete the information for the new group, which essentially means, create a new comparison table.

1. Group Title - Assign a title to your product group that will be displayed as a tab above the comparison table on your website helping users navigate between different groups.
2. Graphic for this group - Choose a graphic to display on the group tab. For further details about adding graphics, refer to the "Media Modal" (opens new window) section of our documentation.
3. Products - Use the "Add New" function to add products to the group. Note: You must add at least two products before you can include features.

Manage Group

1. Add Group - Click to create a new group, where you can assign new Feature items.
2. Close/Edit - Click to hide or expand management options.
3. Remove - Click to remove the group and its items. IMPORTANT: all items from this group will be removed.
4. Group Title - Assign a title to your product group that will appear as a tab above the comparison table on your website.
5. Edit Graphic - Replace the existing graphic for the group.
6. Remove Graphic - Delete the graphic associated with the group.
7. Products - Displays the products included in this group.
8. Features - Shows the features associated with the products in this group.

Group Tabs Style

The groups can be presented on the website page in two table tab forms that can be changed in the Advanced Section Settings of the "Product Comparison" section.

Take a look at the illustrative examples below:

• Tabs Style - Default

• Tabs Style - Boxed

Table Settings

Table Style

Choose the appearance of the created product packages to determine how you want them to be displayed on the generated website page.

"Bordered" Style

"Boxed" Style

Table Type

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

Type 1 - Collapsible Groups

Type 2 - Expanded Groups

Hide starting from text

When this option is enabled, the product will not show "Starting from" text above the pricing. This text is shown by the WHMCS system when the product has a configurable option assigned.

Disable sticky header

Sticky headers keep the header and feature categories visible at the top as you scroll, which is helpful for navigating long comparison tables. Enabling "Disable sticky header" turns off this behavior, allowing the entire page to scroll normally for a cleaner view.

See how the sticky header looks on the webpage.

Display billing cycle switcher with selected cycles

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

Below is an example of the "Billing Cycle Switcher" for a single table.

Below is an example of the "Billing Cycle Switcher" for table groups.

Reverse billing cycle order

When this option is enabled, billing cycles will be displayed from the shortest to the longest cycle.

Columns settings

Specify the number of columns to display for different screen resolutions here. If the number of columns set is less than the total number of products, a slider feature will be activated on the page. This allows users to view additional product packages by sliding across the table or clicking the "Next Package" and "Previous Package" buttons.

Section Actions

In this section you are able to add additional Call To Action (CTA) buttons which will be shown below product boxes. Learn more how to add buttons using Add Button Manager (opens new window) modal.

Section Advanced Settings

1. Combine This Section With Section Below - When activated it will remove the bottom padding and border from this section. This setting was designed to combine two sections into a single section - learn more (opens new window).
2. Overlay Section Below on This Section - This setting pulls the below section over this section, moreover it adds additional bottom padding - learn more (opens new window).
3. Section Anchor - Allows to set name for the section anchor, which then could be used, to link people to specific sections - learn more (opens new window).
4. Section Custom Class - This setting assigns custom classes to the section container - learn more (opens new window).
5. Tabs Style - Choose the style for the created tabs to determine how you want them to be displayed on the generated website page. This option works only when the ‘Group table content in multiple tabs’ option is enabled.

Advanced Customization

Replacing Existing Icons with Custom Icons

If you would like to replace the icons in the Product Comparison section with custom ones, please follow the steps below:

1. Use an FTP/SFTP client to access your server.
2. Navigate to the following directory on your server: templates\lagom2\assets\img\cms\comparison.
3. Create templates\lagom2\assets\img\cms\comparison\custom directory.
4. Place your custom icon file in the custom folder. Supported file formats include .png, .svg, and .tpl.
5. Rename the custom icon file to match the name of the existing icon you wish to replace.
6. Go to: WHMCS Admin Area > Utilities > System > System Cleanup > Empty Template Cache to clear the cache.
7. Navigate to: RS Themes Addon > Tools and refresh both the pricing and section cache.

Your custom icons should now appear in the Product Comparison section on your website.

Implementation of custom HTML code

With version 1.1.3, we introduced the ability to implement custom HTML code within the Product Comparison section of your website, offering greater flexibility to align the display according to your preferences.

This feature allows you to enhance the Product Comparison section with personalized content, such as custom icons, images, or additional text formatting. By utilizing this option, you can tailor the section’s appearance and functionality to better match your branding and user experience goals.

If you would like to implement custom HTML code, please follow these steps. Below is an example of how to incorporate HTML code for custom icon implementation:

1. Edit your Features/Categories List (opens new window)
2. Within avaiable text fields insert your HTML code, for example:
   • <i class="fas fa-tree"></i>
   • <i class="ls ls-configure" style="color: green; margin-right: 10px;"></i> Feature name

3. Click Edit and Save Changes.
4. Review effect on your website.