Difference between revisions of "Standard Order Form Templates"

From WHMCS Documentation

(Disabling Feature Highlights)
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 form is crucial as it can mean the difference between a visitor converting into a customer, or abandoning their order entirely.
  
=Templates=
+
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.
  
==Standard Cart==
+
==Setting a Default Template==
  
<div class="docs-alert-warning">
+
* To set a default order form template, navigate to Setup > General Settings > Ordering.
'''Supported Features'''
+
* The default order form template will be used for any product group for which no custom template is set.
 
 
Headline: Yes<br />
 
Tagline: Yes<br />
 
Feature Highlights: Yes<br />
 
Featured Products: Yes<br />
 
Product Group Features: No<br />
 
Number of Products: For best results 3, supports unlimited.<br />
 
Compatible With: Six template/Bootstrap 3
 
</div>
 
 
 
The default shopping cart experience in Version 6.1 and later. Compatible with all types of products.
 
 
 
==Premium Comparison==
 
[[File:Premium-Comparison.png‎|thumb|Premium Comparison]]
 
<div class="docs-alert-warning">
 
'''Supported Features'''
 
 
 
Headline: Yes<br />
 
Tagline: Yes<br />
 
Feature Highlights: Yes<br />
 
Featured Products: Yes<br />
 
Product Group Features: Yes<br />
 
Number of Products: For best results 3, supports unlimited.<br />
 
Compatible With: Six template/Bootstrap 3
 
</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.
 
 
 
==Pure Comparison==
 
[[File:Pure-Comparison.png‎|thumb|Pure Comparison]]
 
<div class="docs-alert-warning">
 
'''Supported Features'''
 
 
 
Headline: Yes<br />
 
Tagline: Yes<br />
 
Feature Highlights: Yes<br />
 
Featured Products: Yes<br />
 
Product Group Features: Yes<br />
 
Number of Products: For best results 4, supports unlimited.<br />
 
Compatible With: Six template/Bootstrap 3
 
</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.
+
==Setting a Product Group Template==
  
==Supreme Comparison==
+
* 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.
[[File:SupremeComparisonOrderForm.png‎|thumb|Supreme Comparison]]
+
* To set a product group order form template, navigate to Setup > Products/Services, and either create or edit an existing product group to set the order form template for it.
<div class="docs-alert-warning">
 
'''Supported Features'''
 
Headline: Yes<br />
 
Tagline: Yes<br />
 
Feature Highlights: Yes<br />
 
Featured Products: Yes<br />
 
Product Group Features: Yes<br />
 
Number of Products: For best results 6, supports unlimited.<br />
 
Compatible With: Six template/Bootstrap 3
 
</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.
 
 
 
==Universal Slider==
 
[[File:UniversalSliderOrderForm.png‎|thumb|Universal Slider]]
 
<div class="docs-alert-warning">
 
'''Supported Features'''
 
Headline: Yes<br />
 
Tagline: Yes<br />
 
Feature Highlights: Yes<br />
 
Featured Products: Yes<br />
 
Product Group Features: Yes<br />
 
Number of Products: For best results between 4 and 8, supports unlimited space permitting.<br />
 
Compatible With: Six template/Bootstrap 3
 
</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.
+
==Order Form Landing Pages==
  
==Cloud Slider==
+
* Order form landing pages in WHMCS are the first page users see when selecting a product group.
[[File:Cloud-Slider.png‎|thumb|Cloud Slider]]
+
* They display and showcase your products in various different formats.
<div class="docs-alert-warning">
+
* Order Form Landing Pages support a number of features you can take advantage of to maximise the impact of the pages. All of these are controlled from the Product Group management page.
'''Supported Features'''
+
* To access the product group management, , navigate to Setup > Products/Services, and either create or edit an existing product group to set the order form template for it.
  
Headline: Yes<br />
+
===Features===
Tagline: Yes<br />
 
Feature Highlights: Yes<br />
 
Featured Products: Yes<br />
 
Product Group Features: Yes<br />
 
Number of Products: For best results between 2 and 12, supports unlimited space permitting.<br />
 
Compatible With: Six template/Bootstrap 3
 
</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.
+
* '''Product Group Name''' - The name of the product group used in the admin and client area.
 +
* '''Product Group Headline''' - A headline displayed at the top of the Order Form Landing Page. Can be used for a catch marketing promotional line.
 +
* '''Product Group Tagline''' - A tagline displayed immediately below the headline (optional).
 +
* '''Group Features''' - Group features are displayed below the plans in selected Landing Page Order Form Styles. Add an unlimited number of features here for display.
 +
* '''Order Form Template''' - Allows you to override and use a specific Order Form Template for products within this product group.
 +
* '''Available Payment Gateways''' - Allows you to restrict the payment gateways that are made available for use with products inside a product group.
 +
* '''Hidden''' - Determines if a link is shown to the product group within the Shopping Cart. Will still be accessible via the ''Direct Cart Group'' link.
  
=Using 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 and their values for products in a way that WHMCS can interpret for comparison based display.
Line 104: Line 37:
  
 
[[File:PremiumComparisonFeatureHighlights.png|right]]
 
[[File:PremiumComparisonFeatureHighlights.png|right]]
==Usage==
+
===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 Highlights are specified as part of the product description.  They must be entered in the following format, with one feature per line.
Line 122: Line 55:
 
<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>
 
<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==
+
===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 one edit:
 
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 one edit:
Line 148: Line 81:
 
Save changes and upload the modified template file. Now product descriptions will be displayed as entered.
 
Save changes and upload the modified template file. Now product descriptions will be displayed as entered.
  
=Using Different Templates for Different Products=
+
==Templates==
 
 
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]]
 
  
=Depreciated Order Form Templates=
+
===Standard Cart===
The following shopping carts no longer receive updates and may not be compatible with the latest features. They are provided for legacy users only.
 
  
==Boxes==
 
[[File:Boxesthumb.gif‎|thumb|Boxes]]
 
 
<div class="docs-alert-warning">
 
<div class="docs-alert-warning">
 
'''Supported Features'''
 
'''Supported Features'''
  
Headline: No<br />
+
Headline: Yes<br />
Tagline: No<br />
+
Tagline: Yes<br />
Feature Highlights: No<br />
+
Feature Highlights: Yes<br />
Featured Products: No<br />
+
Featured Products: Yes<br />
 
Product Group Features: No<br />
 
Product Group Features: No<br />
Number of Products: Unlimited<br />
+
Number of Products: For best results 3, supports unlimited.<br />
 
Compatible With: Six template/Bootstrap 3
 
Compatible With: Six template/Bootstrap 3
 
</div>
 
</div>
  
A flexible cart that is designed to work for most types of products.  This cart is now deprecated and will no longer receive updates.
+
The default shopping cart experience in Version 6.1 and later. Compatible with all types of products.
  
==Modern==
+
===Premium Comparison===
[[File:Modernthumb.gif‎|thumb|Modern]]
+
[[File:Premium-Comparison.png‎|thumb|Premium Comparison]]
 
<div class="docs-alert-warning">
 
<div class="docs-alert-warning">
 
'''Supported Features'''
 
'''Supported Features'''
  
Headline: No<br />
+
Headline: Yes<br />
Tagline: No<br />
+
Tagline: Yes<br />
 
Feature Highlights: Yes<br />
 
Feature Highlights: Yes<br />
Featured Products: No<br />
+
Featured Products: Yes<br />
Product Group Features: No<br />
+
Product Group Features: Yes<br />
Number of Products: Unlimited<br />
+
Number of Products: For best results 3, supports unlimited.<br />
 
Compatible With: Six template/Bootstrap 3
 
Compatible With: Six template/Bootstrap 3
 
</div>
 
</div>
  
A flexible cart that is designed to work for all types of products.  This cart is now deprecated and will no longer receive updates.
+
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.
  
=Discontinued Order Form Templates=
+
===Pure Comparison===
 
+
[[File:Pure-Comparison.png‎|thumb|Pure Comparison]]
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">
 
<div class="docs-alert-warning">
 
'''Supported Features'''
 
'''Supported Features'''
  
Headline: No<br />
+
Headline: Yes<br />
Tagline: No<br />
+
Tagline: Yes<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 />
 
Feature Highlights: Yes<br />
Featured Products: No<br />
+
Featured Products: Yes<br />
Product Group Features: No<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: Five template/Bootstrap 2
+
Compatible With: Six template/Bootstrap 3
 
</div>
 
</div>
  
Replaced by Premium Comparison/Supreme Comparison in 6.1 and 6.2. This cart is now deprecated and will no longer receive updates.
+
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.
  
==Slider==
+
===Supreme Comparison===
[[File:Sliderthumb.gif‎|thumb|Slider]]
+
[[File:SupremeComparisonOrderForm.png‎|thumb|Supreme Comparison]]
 
<div class="docs-alert-warning">
 
<div class="docs-alert-warning">
 
'''Supported Features'''
 
'''Supported Features'''
 
+
Headline: Yes<br />
Headline: No<br />
+
Tagline: Yes<br />
Tagline: No<br />
 
 
Feature Highlights: Yes<br />
 
Feature Highlights: Yes<br />
Featured Products: No<br />
+
Featured Products: Yes<br />
Product Group Features: No<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 6, supports unlimited.<br />
Compatible With: Five template/Bootstrap 2
+
Compatible With: Six template/Bootstrap 3
 
</div>
 
</div>
  
Replaced by the Universal Slider in 6.2. This cart is now deprecated and will no longer receive updates.
+
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.
  
==Verticalsteps==
+
===Universal Slider===
[[File:Verticalstepsthumb.gif‎|thumb|Vertical Steps]]
+
[[File:UniversalSliderOrderForm.png‎|thumb|Universal Slider]]
 
<div class="docs-alert-warning">
 
<div class="docs-alert-warning">
 
'''Supported Features'''
 
'''Supported Features'''
 
+
Headline: Yes<br />
Headline: No<br />
+
Tagline: Yes<br />
Tagline: No<br />
+
Feature Highlights: Yes<br />
Feature Highlights: No<br />
+
Featured Products: Yes<br />
Featured Products: No<br />
+
Product Group Features: Yes<br />
Product Group Features: No<br />
+
Number of Products: For best results between 4 and 8, supports unlimited space permitting.<br />
Number of Products: Unlimited<br />
+
Compatible With: Six template/Bootstrap 3
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.
+
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.
  
==Ajax Cart==
+
===Cloud Slider===
 +
[[File:Cloud-Slider.png‎|thumb|Cloud Slider]]
 
<div class="docs-alert-warning">
 
<div class="docs-alert-warning">
 
'''Supported Features'''
 
'''Supported Features'''
  
Headline: No<br />
+
Headline: Yes<br />
Tagline: No<br />
+
Tagline: Yes<br />
Feature Highlights: No<br />
+
Feature Highlights: Yes<br />
Featured Products: No<br />
+
Featured Products: Yes<br />
Product Group Features: No<br />
+
Product Group Features: Yes<br />
Number of Products: Unlimited<br />
+
Number of Products: For best results between 2 and 12, supports unlimited space permitting.<br />
Compatible With: Five template/Bootstrap 2
+
Compatible With: Six template/Bootstrap 3
 
</div>
 
</div>
  
This cart was deprecated in 5.0 and will no longer receive updates.
+
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.
 
 
==Web20cart==
 
<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>
 
 
 
This cart was deprecated in 5.0 and will no longer receive updates.
 

Revision as of 16:16, 27 June 2018

Having an effective order form is crucial as 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.

Setting a Default Template

  • To set a default order form template, navigate to Setup > General Settings > Ordering.
  • The default order form template will be used for any product group for which no custom template is set.

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.
  • To set a product group order form template, navigate to Setup > Products/Services, and 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 page users see when selecting a product group.
  • They display and showcase your products in various different formats.
  • Order Form Landing Pages support a number of features you can take advantage of to maximise the impact of the pages. All of these are controlled from the Product Group management page.
  • To access the product group management, , navigate to Setup > Products/Services, and either create or edit an existing product group to set the order form template for it.

Features

  • Product Group Name - The name of the product group used in the admin and client area.
  • Product Group Headline - A headline displayed at the top of the Order Form Landing Page. Can be used for a catch marketing promotional line.
  • Product Group Tagline - A tagline displayed immediately below the headline (optional).
  • Group Features - Group features are displayed below the plans in selected Landing Page Order Form Styles. Add an unlimited number of features here for display.
  • Order Form Template - Allows you to override and use a specific Order Form Template for products within this product group.
  • Available Payment Gateways - Allows you to restrict the payment gateways that are made available for use with products inside a product group.
  • Hidden - Determines if a link is shown to the product group within the Shopping Cart. Will still be accessible via the Direct Cart Group link.

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.

PremiumComparisonFeatureHighlights.png

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.

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

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 one edit:

  1. Remove/comment out:
                                    {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>
  1. Replace with:
                                    {$product.description}

Save changes and upload the modified template file. Now product descriptions will be displayed as entered.

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 template/Bootstrap 3

The default shopping cart experience in Version 6.1 and later. 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 template/Bootstrap 3

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.

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 template/Bootstrap 3

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.

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 template/Bootstrap 3

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.

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 template/Bootstrap 3

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.

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 template/Bootstrap 3

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.