Difference between revisions of "Standard Order Form Templates"

From WHMCS Documentation

(Templates)
 
(17 intermediate revisions by 5 users not shown)
Line 1: Line 1:
WHMCS includes a number of standard order form templates to choose from to provide the best ordering experience for your visitors. To select a template navigate to '''Setup > General Settings > Ordering tab'''. This page describes the various templates, for instructions customising them refer to [[Order Form Templates]].
+
Having an effective order can mean the difference between a visitor becoming a customer or abandoning their order. In WHMCS, you can choose from a variety of order form templates to showcase your products in the most effective way possible.
  
=Templates=
+
==Setting a Default Order Form Template==
  
==Standard Cart==
+
To set a default order form template, go to the '''[[Ordering Tab|Ordering]]''' tab at '''Configuration (<i class="fa fa-wrench" aria-hidden="true"></i>) > System Settings > General Settings''' or, prior to WHMCS 8.0, '''Setup > General Settings'''.
 +
 
 +
The system uses the default order form template for any product group for which you haven't set up a custom order form template.
 +
 
 +
==Setting a Product Group Template==
 +
 
 +
WHMCS allows you to specify an order form template for each product group you create. This allows you to use different order form templates for different types of products you offer.
 +
 
 +
To set a product group order form template, go to '''Configuration (<i class="fa fa-wrench" aria-hidden="true"></i>) > System Settings > [[Products and Services|Products/Services]]''' or, prior to WHMCS 8.0, '''Setup > Products/Services'''. Create or edit an existing product group to set the order form template for it.
 +
 
 +
==Order Form Landing Pages==
 +
 
 +
Order form landing pages in WHMCS are the first pages that users see when selecting a product group. They display and showcase your products in various different formats.
 +
 
 +
Order Form landing pages support many features to maximise the impact of the pages. You can control these from '''Configuration (<i class="fa fa-wrench" aria-hidden="true"></i>) > System Settings > [[Products and Services|Products/Services]]''' or, prior to WHMCS 8.0, '''Setup > Products/Services > Products/Services''' while creating or editing a group.
 +
 
 +
===Features===
 +
 
 +
* '''Product Group Name''' — The name of the product group in the Admin and Client Areas.
 +
* '''Product Group Headline''' — A headline at the top of the Order Form Landing Page. You can use this for a marketing promotional line.
 +
* '''Product Group Tagline''' — A tagline immediately below the headline (optional).
 +
* '''Group Features''' — An unlimited number of features to display below the plans in selected Landing Page Order Form Styles.
 +
* '''Order Form Template''' — A specific Order Form template for products within this product group.
 +
* '''Available Payment Gateways''' — A list of the payment gateways that are available for use with products inside a product group.
 +
* '''Hidden''' — Whether to display a link to the product group within the shopping cart. This link will continue to be accessible via '''Direct Cart Group'''.
 +
 
 +
==Feature Highlights==
 +
 
 +
Feature Highlights allow you to define features for products and their values in a way that WHMCS can interpret for comparison-based display.
 +
 
 +
Most order form templates support Feature Highlights (see above).
 +
 
 +
[[File:PremiumComparisonFeatureHighlights.png|right]]
 +
 
 +
===Usage===
 +
 
 +
Feature Highlights are part of the product description.  You must enter them in the following format, with one feature per line:
 +
 
 +
<div class="source-cli">
 +
Feature: Value
 +
</div>
 +
 
 +
For example, the description for a shared hosting product using Feature Highlights might look like this:
 +
 
 +
<div class="source-cli">
 +
Disk Space: 1000MB
 +
<br/>Bandwidth: 5GB
 +
<br/>Email Accounts: 5
 +
<br/>Subdomains: 3
 +
<br/>Addon Domains: 1
 +
</div>
 +
 
 +
The preview on the right shows how this example would display in the '''Premium Comparison''' order form.
 +
 
 +
<div class="docs-alert-info">
 +
We recommend using the same features in the same order for all products within the same product group.
 +
</div>
 +
 
 +
===Disabling Feature Highlights===
 +
 
 +
You may need to disable feature highlights when, for example, using other markup in the product description.
 +
 
 +
To do this:
 +
 
 +
# Open the <tt>/templates/orderforms/*your active template*/products.tpl</tt> template file for editing.
 +
# Remove or comment out the following lines:<div class="source-cli"><nowiki>
 +
{if $product.featuresdesc}
 +
    <p id="product{$product@iteration}-description">
 +
        {$product.featuresdesc}
 +
    </p>
 +
{/if}
 +
<ul>
 +
    {foreach $product.features as $feature => $value}
 +
        <li id="product{$product@iteration}-feature{$value@iteration}">
 +
            <span class="feature-value">{$value}</span>
 +
            {$feature}
 +
        </li>
 +
    {/foreach}
 +
</ul></nowiki></div>
 +
# Replace this with:<div class="source-cli">{$product.description}</div>
 +
 
 +
Save the changes and upload the modified order form template file. The system will now display product descriptions as you enter them.
 +
 
 +
==Templates==
 +
 
 +
===Standard Cart===
  
 
<div class="docs-alert-warning">
 
<div class="docs-alert-warning">
Line 12: Line 97:
 
Feature Highlights: Yes<br />
 
Feature Highlights: Yes<br />
 
Featured Products: Yes<br />
 
Featured Products: Yes<br />
Product Group Features: Yes<br />
+
Product Group Features: No<br />
 
Number of Products: For best results 3, supports unlimited.<br />
 
Number of Products: For best results 3, supports unlimited.<br />
Compatible With: Six template/Bootstrap 3
+
Compatible With: Six/Bootstrap 3, Twenty-One/Bootstrap 4
 
</div>
 
</div>
  
The default shopping cart experience in Version 6.1 and later. Compatible with all types of products.
+
This is the default order form template in Version 6.1 and later. This is compatible with all types of products.
  
==Premium Comparison==
+
===Premium Comparison===
 
[[File:Premium-Comparison.png‎|thumb|Premium Comparison]]
 
[[File:Premium-Comparison.png‎|thumb|Premium Comparison]]
 
<div class="docs-alert-warning">
 
<div class="docs-alert-warning">
Line 30: Line 115:
 
Product Group Features: Yes<br />
 
Product Group Features: Yes<br />
 
Number of Products: For best results 3, supports unlimited.<br />
 
Number of Products: For best results 3, supports unlimited.<br />
Compatible With: Six template/Bootstrap 3
+
Compatible With: Six/Bootstrap 3, Twenty-One/Bootstrap 4
 
</div>
 
</div>
  
Perfect for comparing a number of products/services. You should utilise the product features functionality to define comparable features/values, and ensure you have the same format/order for all descriptions of products within the group for best results.
+
Use this order form template for comparing several products or services. You can define comparable features and values and ensure that you have the same format or order for all descriptions of products within the group.
  
==Pure Comparison==
+
===Pure Comparison===
 
[[File:Pure-Comparison.png‎|thumb|Pure Comparison]]
 
[[File:Pure-Comparison.png‎|thumb|Pure Comparison]]
 
<div class="docs-alert-warning">
 
<div class="docs-alert-warning">
Line 46: Line 131:
 
Product Group Features: Yes<br />
 
Product Group Features: Yes<br />
 
Number of Products: For best results 4, supports unlimited.<br />
 
Number of Products: For best results 4, supports unlimited.<br />
Compatible With: Six template/Bootstrap 3
+
Compatible With: Six/Bootstrap 3, Twenty-One/Bootstrap 4
 
</div>
 
</div>
  
Perfect for comparing a number of products/services. You should utilise the product features functionality to define comparable features/values, and ensure you have the same format/order for all descriptions of products within the group for best results.
+
Use this order form template for comparing several products or services. You can use the product features functionality to define comparable features and values and ensure you have the same format or order for all descriptions of products within the group.
  
==Supreme Comparison==
+
===Supreme Comparison===
 
[[File:SupremeComparisonOrderForm.png‎|thumb|Supreme Comparison]]
 
[[File:SupremeComparisonOrderForm.png‎|thumb|Supreme Comparison]]
 
<div class="docs-alert-warning">
 
<div class="docs-alert-warning">
Line 61: Line 146:
 
Product Group Features: Yes<br />
 
Product Group Features: Yes<br />
 
Number of Products: For best results 6, supports unlimited.<br />
 
Number of Products: For best results 6, supports unlimited.<br />
Compatible With: Six template/Bootstrap 3
+
Compatible With: Six/Bootstrap 3, Twenty-One/Bootstrap 4
 
</div>
 
</div>
  
Perfect for comparing a number of products/services. You should utilise the product features functionality to define comparable features/values, and ensure you have the same format/order for all descriptions of products within the group for best results.
+
Use this order form template for comparing several products or services. You can use the product features functionality to define comparable features or values and ensure you have the same format or order for all descriptions of products within the group.
  
==Universal Slider==
+
===Universal Slider===
 
[[File:UniversalSliderOrderForm.png‎|thumb|Universal Slider]]
 
[[File:UniversalSliderOrderForm.png‎|thumb|Universal Slider]]
 
<div class="docs-alert-warning">
 
<div class="docs-alert-warning">
Line 75: Line 160:
 
Featured Products: Yes<br />
 
Featured Products: Yes<br />
 
Product Group Features: Yes<br />
 
Product Group Features: Yes<br />
Number of Products: For best results between 4 and 8, supports unlimited space permitting.<br />
+
Number of Products: For best results between 4 and 8, supports unlimited (space permitting).<br />
Compatible With: Six template/Bootstrap 3
+
Compatible With: Six/Bootstrap 3, Twenty-One/Bootstrap 4
 
</div>
 
</div>
  
Allows you to showcase your products in a slider format that can work universally for any type of product. Includes support for comparison of product features with percentage bars as well as support for a free-form text description. For best results we recommend utilising the product feature functionality to define 4 or 8 comparable features/values and using the same product description format for all products within the group - this avoids page shifting on sliding between products.
+
Use this order form template to showcase your products in a slider format that can work universally for any type of product. It includes support for product feature comparison with percentage bars and support for a free-form text description. For best results, we recommend using the product feature functionality to define four or eight comparable features or values. Then, use the same product description format for all products within the group. This avoids page shifting or sliding between products.
  
==Cloud Slider==
+
===Cloud Slider===
 
[[File:Cloud-Slider.png‎|thumb|Cloud Slider]]
 
[[File:Cloud-Slider.png‎|thumb|Cloud Slider]]
 
<div class="docs-alert-warning">
 
<div class="docs-alert-warning">
Line 91: Line 176:
 
Featured Products: Yes<br />
 
Featured Products: Yes<br />
 
Product Group Features: Yes<br />
 
Product Group Features: Yes<br />
Number of Products: For best results between 2 and 12, supports unlimited space permitting.<br />
+
Number of Products: For best results between 2 and 12, supports unlimited (space permitting).<br />
Compatible With: Six template/Bootstrap 3
+
Compatible With: Six/Bootstrap 3, Twenty-One/Bootstrap 4
</div>
 
 
 
Perfect for comparing a number of products/services. You should utilise the product features functionality to define comparable features/values. For best results use 4 feature/value comparisons. and ensure you have the same format/order for all descriptions of products within the group for best results.
 
 
 
==Boxes==
 
[[File:Boxesthumb.gif‎|thumb|Boxes]]
 
<div class="docs-alert-warning">
 
'''Supported Features'''
 
 
 
Headline: No<br />
 
Tagline: No<br />
 
Feature Highlights: No<br />
 
Featured Products: No<br />
 
Product Group Features: No<br />
 
Number of Products: Unlimited<br />
 
Compatible With: Six template/Bootstrap 3
 
</div>
 
 
 
A flexible cart that is designed to work for most types of products.
 
 
 
==Modern==
 
[[File:Modernthumb.gif‎|thumb|Modern]]
 
<div class="docs-alert-warning">
 
'''Supported Features'''
 
 
 
Headline: No<br />
 
Tagline: No<br />
 
Feature Highlights: Yes<br />
 
Featured Products: No<br />
 
Product Group Features: No<br />
 
Number of Products: Unlimited<br />
 
Compatible With: Six template/Bootstrap 3
 
</div>
 
 
 
A flexible cart that is designed to work for all types of products.
 
 
 
=Using Feature Highlights=
 
 
 
Feature Highlights allow you to define features and their values for products in a way that WHMCS can interpret for comparison based display.
 
 
 
Feature Highlights are supported by most order form templates.  See the above descriptions for exact details.
 
 
 
[[File:PremiumComparisonFeatureHighlights.png|right]]
 
==Usage==
 
 
 
Feature Highlights are specified as part of the product description.  They must be entered in the following format, with one feature per line.
 
 
 
'''Feature: Value'''
 
 
 
For example, the description for a shared hosting product using Feature Highlights might look like this:
 
 
 
Disk Space: 1000MB
 
Bandwidth: 5GB
 
Email Accounts: 5
 
Subdomains: 3
 
Addon Domains: 1
 
 
 
The preview on the right shows how the above would be rendered in the Premium Comparison order form.
 
 
 
<div class="docs-alert-info">For best results we recommend that you use the same features and in the same order for all products within the same product group.</div>
 
 
 
==Disabling Feature Highlights==
 
 
 
There may be occasions when it's required to disable feature highlights, such as when wishing to use other markup in the product description. To do this, simply edit the /templates/orderforms/*your active template*/products.tpl template file and perform these two edits:
 
 
 
# Replace '''{$product.featuresdesc}''' with '''{$product.description}'''
 
# Remove/comment out:
 
<source lang="php">
 
{foreach from=$product.features key=feature item=value}
 
 
 
<span class="prodfeature"><span class="feature">{$feature}</span><br />{$value}</span>
 
{/foreach}
 
</source>
 
 
 
Save changes and upload the modified template file. Now product descriptions will be displayed as entered.
 
 
 
=Using Different Templates for Different Products=
 
 
 
It is possible to specify the template you want to use for a product in the URL you use to link to the order form. And therefore by doing that you can use multiple different templates concurrently and thus use the one that best suits each product or type of product you offer.
 
 
 
Details on how to do this can be found in the article: [[Linking_to_WHMCS#Order_Links|Linking to WHMCS - Order Links]]
 
 
 
=Discontinued Order Form Templates=
 
 
 
The following shopping carts are no longer shipped with releases and are provided for legacy users only.
 
 
 
==Cart==
 
[[File:Cartthumb.gif‎|thumb|Cart]]
 
<div class="docs-alert-warning">
 
'''Supported Features'''
 
 
 
Headline: No<br />
 
Tagline: No<br />
 
Feature Highlights: No<br />
 
Featured Products: No<br />
 
Product Group Features: No<br />
 
Number of Products: Unlimited<br />
 
Compatible With: Five template/Bootstrap 2
 
</div>
 
 
 
Replaced by the Standard Cart in 6.1. This cart is now deprecated and will no longer receive updates.
 
 
 
==Comparison==
 
[[File:Comparisonthumb.gif‎|thumb|Comparison]]
 
<div class="docs-alert-warning">
 
'''Supported Features'''
 
 
 
Headline: No<br />
 
Tagline: No<br />
 
Feature Highlights: Yes<br />
 
Featured Products: No<br />
 
Product Group Features: No<br />
 
Number of Products: For best results 4, supports unlimited.<br />
 
Compatible With: Five template/Bootstrap 2
 
</div>
 
 
 
Replaced by Premium Comparison/Supreme Comparison in 6.1 and 6.2. This cart is now deprecated and will no longer receive updates.
 
 
 
==Slider==
 
[[File:Sliderthumb.gif‎|thumb|Slider]]
 
<div class="docs-alert-warning">
 
'''Supported Features'''
 
 
 
Headline: No<br />
 
Tagline: No<br />
 
Feature Highlights: Yes<br />
 
Featured Products: No<br />
 
Product Group Features: No<br />
 
Number of Products: For best results between 2 and 12, supports unlimited space permitting.<br />
 
Compatible With: Five template/Bootstrap 2
 
</div>
 
 
 
Replaced by the Universal Slider in 6.2. This cart is now deprecated and will no longer receive updates.
 
 
 
==Verticalsteps==
 
[[File:Verticalstepsthumb.gif‎|thumb|Vertical Steps]]
 
<div class="docs-alert-warning">
 
'''Supported Features'''
 
 
 
Headline: No<br />
 
Tagline: No<br />
 
Feature Highlights: No<br />
 
Featured Products: No<br />
 
Product Group Features: No<br />
 
Number of Products: Unlimited<br />
 
Compatible With: Five template/Bootstrap 2
 
 
</div>
 
</div>
  
Replaced by the Standard Cart in 6.1. This cart is now deprecated and will no longer receive updates.
+
Use this order form template for comparing a number of products or services. Use the product features' functionality to define comparable features or values. For best results, use four feature or value comparisons and ensure you have the same format or order for all descriptions of products within the group.

Latest revision as of 16:20, 5 May 2022

Having an effective order can mean the difference between a visitor becoming a customer or abandoning their order. In WHMCS, you can choose from a variety of order form templates to showcase your products in the most effective way possible.

Setting a Default Order Form Template

To set a default order form template, go to the Ordering tab at Configuration () > System Settings > General Settings or, prior to WHMCS 8.0, Setup > General Settings.

The system uses the default order form template for any product group for which you haven't set up a custom order form template.

Setting a Product Group Template

WHMCS allows you to specify an order form template for each product group you create. This allows you to use different order form templates for different types of products you offer.

To set a product group order form template, go to Configuration () > System Settings > Products/Services or, prior to WHMCS 8.0, Setup > Products/Services. Create or edit an existing product group to set the order form template for it.

Order Form Landing Pages

Order form landing pages in WHMCS are the first pages that users see when selecting a product group. They display and showcase your products in various different formats.

Order Form landing pages support many features to maximise the impact of the pages. You can control these from Configuration () > System Settings > Products/Services or, prior to WHMCS 8.0, Setup > Products/Services > Products/Services while creating or editing a group.

Features

  • Product Group Name — The name of the product group in the Admin and Client Areas.
  • Product Group Headline — A headline at the top of the Order Form Landing Page. You can use this for a marketing promotional line.
  • Product Group Tagline — A tagline immediately below the headline (optional).
  • Group Features — An unlimited number of features to display below the plans in selected Landing Page Order Form Styles.
  • Order Form Template — A specific Order Form template for products within this product group.
  • Available Payment Gateways — A list of the payment gateways that are available for use with products inside a product group.
  • Hidden — Whether to display a link to the product group within the shopping cart. This link will continue to be accessible via Direct Cart Group.

Feature Highlights

Feature Highlights allow you to define features for products and their values in a way that WHMCS can interpret for comparison-based display.

Most order form templates support Feature Highlights (see above).

PremiumComparisonFeatureHighlights.png

Usage

Feature Highlights are part of the product description. You must enter them in the following format, with one feature per line:

Feature: Value

For example, the description for a shared hosting product using Feature Highlights might look like this:

Disk Space: 1000MB
Bandwidth: 5GB
Email Accounts: 5
Subdomains: 3
Addon Domains: 1

The preview on the right shows how this example would display in the Premium Comparison order form.

We recommend using the same features in the same order for all products within the same product group.

Disabling Feature Highlights

You may need to disable feature highlights when, for example, using other markup in the product description.

To do this:

  1. Open the /templates/orderforms/*your active template*/products.tpl template file for editing.
  2. Remove or comment out the following lines:
    {if $product.featuresdesc} <p id="product{$product@iteration}-description"> {$product.featuresdesc} </p> {/if} <ul> {foreach $product.features as $feature => $value} <li id="product{$product@iteration}-feature{$value@iteration}"> <span class="feature-value">{$value}</span> {$feature} </li> {/foreach} </ul>
  3. Replace this with:
    {$product.description}

Save the changes and upload the modified order form template file. The system will now display product descriptions as you enter them.

Templates

Standard Cart

Supported Features

Headline: Yes
Tagline: Yes
Feature Highlights: Yes
Featured Products: Yes
Product Group Features: No
Number of Products: For best results 3, supports unlimited.
Compatible With: Six/Bootstrap 3, Twenty-One/Bootstrap 4

This is the default order form template in Version 6.1 and later. This is compatible with all types of products.

Premium Comparison

Premium Comparison

Supported Features

Headline: Yes
Tagline: Yes
Feature Highlights: Yes
Featured Products: Yes
Product Group Features: Yes
Number of Products: For best results 3, supports unlimited.
Compatible With: Six/Bootstrap 3, Twenty-One/Bootstrap 4

Use this order form template for comparing several products or services. You can define comparable features and values and ensure that you have the same format or order for all descriptions of products within the group.

Pure Comparison

Pure Comparison

Supported Features

Headline: Yes
Tagline: Yes
Feature Highlights: Yes
Featured Products: Yes
Product Group Features: Yes
Number of Products: For best results 4, supports unlimited.
Compatible With: Six/Bootstrap 3, Twenty-One/Bootstrap 4

Use this order form template for comparing several products or services. You can use the product features functionality to define comparable features and values and ensure you have the same format or order for all descriptions of products within the group.

Supreme Comparison

Supreme Comparison

Supported Features Headline: Yes
Tagline: Yes
Feature Highlights: Yes
Featured Products: Yes
Product Group Features: Yes
Number of Products: For best results 6, supports unlimited.
Compatible With: Six/Bootstrap 3, Twenty-One/Bootstrap 4

Use this order form template for comparing several products or services. You can use the product features functionality to define comparable features or values and ensure you have the same format or order for all descriptions of products within the group.

Universal Slider

Universal Slider

Supported Features Headline: Yes
Tagline: Yes
Feature Highlights: Yes
Featured Products: Yes
Product Group Features: Yes
Number of Products: For best results between 4 and 8, supports unlimited (space permitting).
Compatible With: Six/Bootstrap 3, Twenty-One/Bootstrap 4

Use this order form template to showcase your products in a slider format that can work universally for any type of product. It includes support for product feature comparison with percentage bars and support for a free-form text description. For best results, we recommend using the product feature functionality to define four or eight comparable features or values. Then, use the same product description format for all products within the group. This avoids page shifting or sliding between products.

Cloud Slider

Cloud Slider

Supported Features

Headline: Yes
Tagline: Yes
Feature Highlights: Yes
Featured Products: Yes
Product Group Features: Yes
Number of Products: For best results between 2 and 12, supports unlimited (space permitting).
Compatible With: Six/Bootstrap 3, Twenty-One/Bootstrap 4

Use this order form template for comparing a number of products or services. Use the product features' functionality to define comparable features or values. For best results, use four feature or value comparisons and ensure you have the same format or order for all descriptions of products within the group.