Difference between revisions of "Standard Order Form Templates"

From WHMCS Documentation

Line 1: Line 1:
 
Having an effective order form is crucial. It can mean the difference between a visitor converting into a customer or abandoning their order entirely.
 
Having an effective order form is crucial. It can mean the difference between a visitor converting into a customer or abandoning their order entirely.
  
Whatever type of products and services you offer, WHMCS has a variety of order form styles you can choose from to showcase your products in the most effective way possible.
+
Whatever type of products and services you offer, WHMCS has a variety of order form templates you can choose from to showcase your products in the most effective way possible.
  
==Setting a Default Template==
+
==Setting a Default Order Form Template==
  
* To set a default order form template, navigate to '''Configuration (<i class="fa fa-wrench" aria-hidden="true"></i>) > System Settings > General Settings > Ordering''' or, prior to WHMCS 8.0, '''Setup > General Settings > Ordering'''.
+
To set a default order form template, navigate to '''Configuration (<i class="fa fa-wrench" aria-hidden="true"></i>) > System Settings > General Settings > Ordering''' or, prior to WHMCS 8.0, '''Setup > General Settings > Ordering'''.
* The system uses the default order form template for any product group for which you haven't set up a custom template.
+
 
 +
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==
 
==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 styles for different types of products you offer.
+
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, navigate to '''Configuration (<i class="fa fa-wrench" aria-hidden="true"></i>) > System Settings > Products/Services''' or, prior to WHMCS 8.0, '''Setup > Products/Services'''. Either create or edit an existing product group to set the order form template for it.
+
 
 +
To set a product group order form template, navigate to '''Configuration (<i class="fa fa-wrench" aria-hidden="true"></i>) > System Settings > Products/Services''' or, prior to WHMCS 8.0, '''Setup > Products/Services'''. Either create or edit an existing product group to set the order form template for it.
  
 
==Order Form Landing Pages==
 
==Order Form Landing Pages==
  
* Order form landing pages in WHMCS are the first pages users see when selecting a product group.
+
Order form landing pages in WHMCS are the first pages users see when selecting a product group. They display and showcase your products in various different formats.
* They display and showcase your products in various different formats.
+
 
* Order Form Landing Pages support many features you can take advantage of to maximise the impact of the pages. You can control these from from the Product Group management page.
+
Order Form landing pages support many features you can take advantage of 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/Services''' while creating or editing a group.
* To access the Product Group management page, navigate to '''Configuration (<i class="fa fa-wrench" aria-hidden="true"></i>) > System Settings > Products/Services''' or, prior to WHMCS 8.0, '''Setup > Products/Services''', and either create or edit an existing product group to set the order form template for it.
 
  
 
===Features===
 
===Features===
  
* '''Product Group Name''' — The name of the product group in the admin and client area.
+
* '''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 catch marketing promotional line.
+
* '''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).
 
* '''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.
 
* '''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.
+
* '''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.
 
* '''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 the ''Direct Cart Group'' link.
+
* '''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==
  
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 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 the above descriptions for exact details.
 
Most order form templates support Feature Highlights.  See the above descriptions for exact details.
  
 
[[File:PremiumComparisonFeatureHighlights.png|right]]
 
[[File:PremiumComparisonFeatureHighlights.png|right]]
 +
 
===Usage===
 
===Usage===
  
Feature Highlights are part of the product description.  You must enter them in the following format, with one feature per line.
+
Feature Highlights are part of the product description.  You must enter them in the following format, with one feature per line:
  
'''Feature: Value'''
+
<div class="source-cli">
 +
Feature: Value
 +
</div>
  
 
For example, the description for a shared hosting product using Feature Highlights might look like this:
 
For example, the description for a shared hosting product using Feature Highlights might look like this:
  
Disk Space: 1000MB
+
<div class="source-cli">
Bandwidth: 5GB
+
Disk Space: 1000MB
Email Accounts: 5
+
<br/>Bandwidth: 5GB
Subdomains: 3
+
<br/>Email Accounts: 5
Addon Domains: 1
+
<br/>Subdomains: 3
 +
<br/>Addon Domains: 1
 +
</div>
  
 
The preview on the right shows how the above would display in the Premium Comparison order form.
 
The preview on the right shows how the above would display in the Premium Comparison order form.
  
<div class="docs-alert-info">For the best results, we recommend that you use the same features in the same order for all products within the same product group.</div>
+
<div class="docs-alert-info">
 +
<span class="title">Features</span><br />
 +
For the best results, we recommend that you use the same features in the same order for all products within the same product group.
 +
</div>
  
 
===Disabling Feature Highlights===
 
===Disabling Feature Highlights===
  
There may be occasions when you must disable feature highlights, such as when you want 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 one edit:
+
There may be occasions when you must disable feature highlights, such as when you want to use 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:
 
# Remove or comment out:
<source lang="php">
+
<div class="source-cli">
                                    {if $product.featuresdesc}
+
{if $product.featuresdesc}
                                        <p id="product{$product@iteration}-description">
+
<br/>    <p id="product{$product@iteration}-description">
                                            {$product.featuresdesc}
+
<br/>        {$product.featuresdesc}
                                        </p>
+
<br/>    </p>
                                    {/if}
+
<br/>{/if}
                                    <ul>
+
<br/><ul>
                                        {foreach $product.features as $feature => $value}
+
<br/>    {foreach $product.features as $feature => $value}
                                            <li id="product{$product@iteration}-feature{$value@iteration}">
+
<br/>        <li id="product{$product@iteration}-feature{$value@iteration}">
                                                <span class="feature-value">{$value}</span>
+
<br/>            <span class="feature-value">{$value}</span>
                                                {$feature}
+
<br/>            {$feature}
                                            </li>
+
<br/>        </li>
                                        {/foreach}
+
<br/>    {/foreach}
                                    </ul>
+
<br/></ul>
</source>
+
</div>
#Replace it with:
+
# Replace it with:
<source lang="php">
+
<div class="source-cli">{$product.description}</div>
                                    {$product.description}
 
</source>
 
  
Save the changes and upload the modified template file. Now, the system will display product descriptions as you enter them.
+
Save the changes and upload the modified order form template file. Now, the system will display product descriptions as you enter them.
  
 
==Templates==
 
==Templates==
Line 94: Line 103:
 
Product Group Features: No<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>
  
This is the default shopping cart experience in Version 6.1 and later. This is 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===
Line 110: Line 119:
 
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>
  
This is perfect for comparing a number of products or services. You should 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.
+
This is perfect for comparing a number of products or services. You should 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.
  
 
===Pure Comparison===
 
===Pure Comparison===
Line 126: Line 135:
 
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>
  
This is perfect for comparing a number of products or services. You should 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.
+
This is perfect for comparing a number of products or services. You should 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===
Line 141: Line 150:
 
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>
  
This is perfect for comparing a number of products or services. You should 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 for best results.
+
This is perfect for comparing a number of products or services. You should 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 for best results.
  
 
===Universal Slider===
 
===Universal Slider===
Line 156: Line 165:
 
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>
  
Line 172: Line 181:
 
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>
 
</div>
  
This is perfect for comparing a number of products or services. You should 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.
+
This is perfect for comparing a number of products or services. You should 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.

Revision as of 22:05, 20 November 2020

Having an effective order form is crucial. It can mean the difference between a visitor converting into a customer or abandoning their order entirely.

Whatever type of products and services you offer, WHMCS has a variety of order form templates you can choose from to showcase your products in the most effective way possible.

Setting a Default Order Form Template

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

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, navigate to Configuration () > System Settings > Products/Services or, prior to WHMCS 8.0, Setup > Products/Services. Either 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 users see when selecting a product group. They display and showcase your products in various different formats.

Order Form landing pages support many features you can take advantage of to maximise the impact of the pages. You can control these from Configuration () > System Settings > 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 the above descriptions for exact details.

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 the above would display in the Premium Comparison order form.

Features
For the best results, we recommend that you use the same features in the same order for all products within the same product group.

Disabling Feature Highlights

There may be occasions when you must disable feature highlights, such as when you want to use 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:

{if $product.featuresdesc}



{$product.featuresdesc}


{/if}



    {foreach $product.features as $feature => $value}

  • {$value}
    {$feature}

  • {/foreach}


  1. Replace it with:
{$product.description}

Save the changes and upload the modified order form template file. Now, the system will 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

This is perfect for comparing a number of products or services. You should 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.

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

This is perfect for comparing a number of products or services. You should 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

This is perfect for comparing a number of products or services. You should 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 for best results.

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

This allows you to showcase your products in a slider format that can work universally for any type of product. It 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 using the product feature functionality to define four or eight comparable features or values and using 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

This is perfect for comparing a number of products or services. You should 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.