Revision as of 14:04, 7 June 2013

WHMCS comes with many built in templates as standard. More information on these can be found @ Standard Order Form Templates However, you can also customise and create your own cart templates and the process is explained below.

An explanation of the purpose of each template file is provided below:

• products.tpl - Lists product categories and products
• adddomain.tpl - First step for domain registration only orders
• addons.tpl - Lists the addons a user can order for their existing packages when logged in
• domainrenewals.tpl - Lists domains in the clients account and allows for renewals to be ordered in advance
• configureproductdomain.tpl - Domain selection for domains attached to a product
• domainoptions.tpl - Used by some templates to display domain availability check results
• configproduct.tpl - Configure the product before adding to the cart eg. billing cycle, configurable options, custom fields
• configuredomains.tpl - Choose domain addons, complete custom field requirements & custom nameservers
• ordersummary.tpl - Used to display cart contents and product total summaries during order process
• viewcart.tpl - Showing cart contents & checkout process
• login.tpl - Used for login for existing users
• complete.tpl - This page is showed at the end of the checkout process

Creating a Custom Template

If you want to customise anything in the WHMCS templates, the first step we always recommend is to create your own template folder. You should never edit the default templates directly. So to do this, simply perform the following steps:

1. Duplicate one of the standard folders in the /templates/orderforms/ folder (cart, web20cart, modern, slider etc.) and rename it to a custom name
2. The directory name should be all one word and consist of just lowercase letters and numbers.
3. Now make your customisations and changes as desired (see section below for more details on this)
4. Once complete, upload your new templates folder to the templates directory of WHMCS on your server
5. You can preview your new template by specifying it using an url "on the fly" such as www.yourdomain.com/whmcs/?carttpl=xxxxx where xxxxx is the name of your new template. See Linking to WHMCS for more info on this.
6. Once you're happy with it and ready to show the world, you can set it live by going to Setup > General Settings and on the Ordering tab of the general settings choosing your new custom template name from the Template's dropdown menu

Whichever template is selected here is referred to throughout the documentation as the active template folder.

Third Party Order Conversion/Affiliate Tracking

When checkout is completed and the customer makes payment for their order, they get returned to the order completed page. This page is controlled by the complete.tpl template file in your active order template folder. So if you want to use a third party order conversion tracking or affiliate system and need to execute javascript after checkout, then you will need to insert code into this file.

This file contains an {if $ispaid}{/if} section as below so you can put code either inside those tags so that it only runs once an order has been paid for, or outside them so it runs regardless of payment status.

{if $ispaid}
Enter any HTML code which needs to be displayed once a user has
completed the checkout  of their order here - for example
conversion tracking and affiliate tracking scripts
{/if}

You can use variables including {$orderid} {$ordernumber} and {$amount} where necessary to fill in order details.

Remove Fields From Order Form

By default most of the client's profile fields are required on the order form, it is possible via the Setup > General Settings > Other tab > Optional Client Profile Fields option to make certain fields optional. If you want to remove one of the default fields on your order form entirerly, you can change the field type to hidden and supply a default value of NA. The following example shows to to hide the Address 2 field from the viewcart.tpl page:

Find:

<input type="text" name="address2" style="width:80%;" value="{$clientsdetails.address2}" />

Replace with:

<input type="hidden" name="address2" style="width:80%;" value="NA" />