WHMCS templates installation

We are giving only WHMCS templates that we designed on WHMCS's default template SIX. We did not change anything except design.

To use it:

  • You should have installed WHMCS on your server.
  • Check that WHMCS is working on a default template like SIX.
  • Then follow the below instructions to install the templates.


How to install the WHMCS templates?

We have professional WHMCS templates design with orderform. If you want to use kohost professional whmcs template then we need to follow the below steps to complete the template installation completely:

1. Add the kohost-professional and kohost-professional-rtl to the templates folder

2. Add the kohost-professional orderform to the orderforms folder

3. Add hooks to hooks folder

4. Add language to the language folder

5. Configure your price from WHMCS admin panel

6. Change the default WHMCS template and orderform from admin panel

Templates Folder

Add the kohost-professional and kohost-professional-rtl to the templates folder

  • Go to the path:  /<your-public-root-directory>/whmcs/templates
  • Unzip the kohost-professional and kohost-professional-rtl template folders if you have the zip version
  • Add the kohost-professional and kohost-professional-rtl folder
  • View this screenshot:


Add Orderforms

Add the kohost_professional orderform to the orderforms folder

  • Go to the path: /<your-public-root-directory>/whmcs/templates/orderforms
  • Unzip the kohost_professional orderform folder if you have the zip version
  • Add the kohost-profession folder

Add hooks to hooks folder

Add the hooks file in the hooks folder

  • Go to the path: /<your-public-root-directory>/whmcs/includes/hooks
  • Unzip the hooks folder if you have the zip version
  • Add the hooks file in the hooks folder folder


Add language

Add language to the lang folder

  • Got to the path: /<your-public-root-directory>/whmcs/lang
  • Unzip the lang folder if you have the zip version
  • Add the english.php file from the lang folder


Change Default Template and Orderforms

Change the default WHMCS template and orderform from admin panel. We can change our template and orderform from General setting but we can also set different orderform from the product group.

Change the default template from the general setting:

Click the setting icon right side of the navbar then click the general setting



Go to the general setting>general then select the template like kohost-professional



Change the default Orderform from General setting:

In this General settings click the tab Ordering then you can see the different types of the order form template. Now select the Kohost Professional. Check the below image:


After select, this then clicks the Save Change button.


Configure your price

Configure your product or price from WHMCS admin panel

First of all, login your whmcs admin panel then click the setting icon right side of the navbar> products/services follow the steps:


I hope you have already created product group name and under the group you have created single product package. If you don't have this package then you should create first. Then edit the single product package like bellow images:


Click the edit icon then you can see this bellow image. Copy this code and paste in the product description field like bellow image. You have to change the text or value based on your plan and follow for rest of the plan and product.

<ul class="list-unstyled pricing-feature-list">
    <li><span>10</span> Hosted Domains</li>
    <li><span>25 GB</span> RAID 10 Storage</li>
    <li><span>200 GB</span> Bandwidth</li>
    <li><span>1 Free</span> Domain included</li>
    <li><span>Super Fast</span> SSD Storage</li>
    <li><span>Free</span> SSL Certificate</li>
    <li>99.95% Uptime</li>
    <li>24/7 Phone Support</li>
</ul>



Change cart link from Domain Result Page

Open the domain-search-result.php from kohost/build folder and find the below code around line number 674

<td>
<a href="http://whmcs.themetags.com/cart.php?systpl=kohost-professional&a=add&domain=register&query=<?php echo $domainName; ?>" class="btn btn-brand-01 btn-sm">Add to Cart</a>
</td>

Change http://whmcs.themetags.com  with your WHMCS base URL. If you have made the kohost-professional as your default theme then you can remove also systpl=kohost-professional& from the link.


How to setup WHMCS Multi-Currency?

Go to your admin panel then click the setting icon right side of the navbar. Then type "currencies" on the search box, then click on it. check this bellow image-


After clicking it, now you need to add your currency like this-

 

Need to fill up the currency code, Prefix, Format and Base Conv. Rate. We need this currency code in the currency hook file. Now click the Add Currency button.

What do we need to do for the multiple currency support?

  1. Need to add currency from here. The currency code is BDT.
  2. Add the currency code and flag in the currency hook
  3. Add the domain price for your currency
  4. Add the product/ service price for your currency


Configure Domain and Product Price For Multi-Currency

For multi-currency domain price configuration:

Go to do admin panel click the setting icon right side of the navbar then go to the domain price option like the bellow image.

After click domain pricing then you will go to the domain price-setting option. After clicking the pricing button domain then open a popup option now you can set your multi-currency price value. Check bellow image
NB: This option available after enabled the multi-currency option.


For multi-currency product, price configure:

Go to the product/services configure option then click the edit icon. check this image


After clicking the product edit option then click the price tab on the tab option bar. Check the image below. 



NB: This option will be available after enabled the multi-currency option.

To customize or change the logo in the client area, log in to your admin panel and navigate to Help> Setup Wizard

After Open a popup box then click Next 


Choose your logo .png or .jpg file then click Next. If you want to set up other settings like Payments, Domains, etc then you can keep clicking Next otherwise click on Next for only General and it will update your logo. Now you check your website.

If you have 2 different logos such as a colorful and white version, follow the below steps:

1. Rename your colorful logo with "logo-primary.png". We are saying it is the primary logo.

2. Rename your another logo with "logo-secondary.png". We are saying it is the secondary logo.

3. Upload logo-color.png and logo-white.png logo to "templates/{your template}/img/" folder

If you want to use a different name then rename the logo with your name and upload to the img folder (step#3). Also, you need to change the logo name in the template where we have used the logo. You will find: <your template>/includes/logo.tpl file.


How to manage home page Product Price

In this Hooks folder, you will get two PHP file "products.php" and "pricetable.php". Home page product price manages from those files.



Now go to your template folder open header.tpl file then you can see below section for the product price code.

<!--pricing section start-->
    {if count($myproducts) gt 0 && ($myproducts.0.monthly gt 0 || $myproducts.0.annually gt 0 || $myproducts.0.biennially gt 0 || $myproducts.0.triennially gt 0)}
    <section class="pricing-section ptb-100">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-12 col-lg-12">
                    <div class="section-heading-center text-center">
                        <h2>Our Flexible Pricing Plan</h2>
                        <p class="lead">
                            Distinctively recaptiualize principle-centered core competencies through client-centered
                            core competencies. Enthusiastically provide access.
                        </p>
                    </div>
                </div>
            </div>
            <div class="row align-items-center justify-content-between">
                {foreach $myproducts as $productKey => $myproduct}
                    <div class="col-lg-4 col-md-4 col-sm-6">
                        <div class="text-center gray-light-bg single-pricing-pack-2 mt-4 rounded border">
                            <div class="pricing-icon">
                                {if $productKey eq 0}
                                    <img src="{$WEB_ROOT}/templates/{$template}/img/dadicate-web-hosting.svg" width="60" alt="hosing">
                                {elseif $productKey eq 1}
                                    <img src="{$WEB_ROOT}/templates/{$template}/img/vps-hosting.svg" width="60" alt="hosing">
                                {elseif $productKey eq 2}
                                    <img src="{$WEB_ROOT}/templates/{$template}/img/cloud-hosting.svg" width="60" alt="hosing">
                                {/if}
                            </div>
                            <h4 class="package-title">{$myproduct.name}{if $myproduct.is_featured == '1'} <span class="badge color-1 color-1-bg">Popular</span>{/if}</h4>
                            
                            <div class="pricing-price pt-4">
                                <small>Starting at</small>
                                <div class="h2">{$myproduct.prefix}{$myproduct.monthly} <span class="price-cycle h4">/mo</span></div>
                            </div>
                            <a href="cart.php?a=add&pid={$myproduct.relid}" class="btn {if $myproduct.is_featured == '1'}primary-solid-btn{else}outline-btn{/if} mt-20">Get Started Now</a>
                        </div>
                    </div>
                {/foreach}
            </div>
        </div>
    </section>
    {/if}
    <!--pricing section end-->

How to add favicon

At first, add your favicon image in your templates/{your template name}/img folder. Make sure your favicon name will be favicon.png and height, the weight keeps the same like 80x80.



Configure WHMCS Hooks

We have customized 4 types of sections or blocks using WHMCS hooks. Go to the Hooks folder then you can see the bellow .php files:

1. Menu (menu.php)

2. Domain Price (pricetable.php)

3. Home Page Product price (products.php)

4. Client Area overdue message  (clientAreaPanel.php)

5. Multi-currency support (currency.php)


1. Menu (menu.php)

We have customized the menu using the bellow function on menu.php in the hooks folder. 

<?php
 
// This hook will adjust the button in the home page panels. You have two
// different options of setExtra() or setExtras(). Use of setExtras() requires
// passing all 'extra' related vars through the array.
 
use WHMCS\View\Menu\Item as MenuItem;

add_hook('ClientAreaPrimaryNavbar', 1, function (MenuItem $primaryNavbar) {
    // remove Network Status
    if (!is_null($primaryNavbar->getChild('Network Status'))) {
       $primaryNavbar->removeChild('Network Status');
    }
    
    // remove Affiliates
    if (!is_null($primaryNavbar->getChild('Affiliates'))) {
    //   $primaryNavbar->removeChild('Affiliates');
    }
    
    // Rename Announcements
    if (!is_null($primaryNavbar->getChild('Announcements'))) {
      $primaryNavbar->getChild("Announcements")->setLabel('News');
    }
    
    // after logged in topmenu: Rename Announcements
    if (!is_null($primaryNavbar->getChild('Support'))) {
      $primaryNavbar->getChild('Support')->getChild("Announcements")->setLabel('News');
    }
    
    // after logged in topmenu: Rename Announcements
    if (!is_null($primaryNavbar->getChild('Website Security'))) {
      $primaryNavbar->getChild('Website Security')->setLabel('Security');
    }
    
    // sidebar menu
    $secondarySidebar = Menu::secondarySidebar();
    if (!is_null($secondarySidebar->getChild('Support'))) {
      $secondarySidebar->getChild('Support')->getChild("Announcements")->setLabel('News');
    }
    
}); 


For more details: https://docs.whmcs.com/Editing_Client_Area_Menus

2. Domain Price (pricetable.php)

In the hero section, we have added domain lists like .com, .net, .org, etc, with a price. We have managed the domain price list from the pricetable.php hook file. 


here is the pricetable.php file

<?php
/**
 * Price Table Hook Function
 *
 * Please refer to the documentation @ https://docs.whmcs.com/Hooks for more information
 * The code in this hook is commented out by default. Uncomment to use.
 *
 * @package    WHMCS
 * @author     WHMCS Limited <development@whmcs.com>
 * @copyright  Copyright (c) WHMCS Limited 2005-2018
 * @license    https://www.whmcs.com/license/ WHMCS Eula
 * @version    $Id$
 * @link       https://www.whmcs.com/
 */

use Illuminate\Database\Capsule\Manager as Capsule;

if (!defined("WHMCS"))
    die("This file cannot be accessed directly");

function homepage_pricetable_hook($vars) {
   $currencyid   = (isset($_GET['currency']) ? intval($_GET['currency']) : $_SESSION['currency']);
   $domainPrices = Capsule::table('tbldomainpricing')
                   ->join('tblpricing', 'tbldomainpricing.id', '=', 'tblpricing.relid')
                   ->join('tblcurrencies', 'tblpricing.currency', '=', 'tblcurrencies.id')
                   ->select('tbldomainpricing.extension','tblpricing.*', 'tblcurrencies.*')
                   ->where('tblpricing.type', 'domainregister')
                   ->where('tblpricing.currency', $currencyid)
                   ->get();
                   
   $encodedata = json_encode($domainPrices);
   $decodedata = json_decode($encodedata, true);

   return array("pricetable" => $decodedata);
}

add_hook("ClientAreaPage", 1, "homepage_pricetable_hook");

Before that, you need to make sure that you have set the domain price from your admin panel. Go to Setup>Products/Services>Domain Pricing. Check the below image:


Click the pricing and set the domain price.


3. Managed Hosting Price in Home Page (products.php)

We have the hosting or product price on the home page. We have managed by the hooks (products.php).

In this products.php file, you can see homepage_products_hook function ->where('tblproducts.gid','1'). This line manages which product group price show in the home page. Number '1' is the product group id.

How to find out product group id number:

Go to your WHMCS admin panel then Setup>Products/Services>Products/Services


If you mouse hover over on group icon then you can see the product group id.


Go to the products.php file in the hooks folder then replace that group id with your product group id. 


<?php
/**
 * Price Table Hook Function
 *
 * Please refer to the documentation @ https://docs.whmcs.com/Hooks for more information
 * The code in this hook is commented out by default. Uncomment to use.
 *
 * @package    WHMCS
 * @author     WHMCS Limited <development@whmcs.com>
 * @copyright  Copyright (c) WHMCS Limited 2005-2018
 * @license    https://www.whmcs.com/license/ WHMCS Eula
 * @version    $Id$
 * @link       https://www.whmcs.com/
 */

use Illuminate\Database\Capsule\Manager as Capsule;

if (!defined("WHMCS"))
    die("This file cannot be accessed directly");

function homepage_products_hook($vars) {
   $currencyId = (isset($_GET['currency']) ? intval($_GET['currency']) : $_SESSION['currency']);
   $products   = Capsule::table('tblproducts')
                       ->join('tblpricing', 'tblproducts.id', '=', 'tblpricing.relid')
                       ->join('tblcurrencies', 'tblpricing.currency', '=', 'tblcurrencies.id')
                       ->select('tblproducts.*','tblpricing.*', 'tblcurrencies.*')
                       ->where('tblproducts.gid','1')
                       ->where('tblpricing.currency', $currencyId)
                       ->where('tblpricing.type', 'product')
                       ->get();

   $encodedata = json_encode($products);
   $decodedata = json_decode($encodedata, true);

   return array("myproducts" => $decodedata);
}

add_hook("ClientAreaPage", 1, "homepage_products_hook");


After updating the products.php file, you will see that product group price on the home page like below depending on your configuration.


Home page pricing section code here

<!--pricing section start-->
    {if count($myproducts) gt 0 && ($myproducts.0.monthly gt 0 || $myproducts.0.annually gt 0 || $myproducts.0.biennially gt 0 || $myproducts.0.triennially gt 0)}
    <section class="pricing-section ptb-100">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-12 col-lg-12">
                    <div class="section-heading-center text-center">
                        <h2>Our Flexible Pricing Plan</h2>
                        <p class="lead">
                            Distinctively recaptiualize principle-centered core competencies through client-centered
                            core competencies. Enthusiastically provide access.
                        </p>
                    </div>
                </div>
            </div>
            <div class="row align-items-center justify-content-between">
                {foreach $myproducts as $productKey => $myproduct}
                    <div class="col-lg-4 col-md-4 col-sm-6">
                        <div class="text-center gray-light-bg single-pricing-pack-2 mt-4 rounded border">
                            <div class="pricing-icon">
                                {if $productKey eq 0}
                                    <img src="{$WEB_ROOT}/templates/{$template}/img/dadicate-web-hosting.svg" width="60" alt="hosing">
                                {elseif $productKey eq 1}
                                    <img src="{$WEB_ROOT}/templates/{$template}/img/vps-hosting.svg" width="60" alt="hosing">
                                {elseif $productKey eq 2}
                                    <img src="{$WEB_ROOT}/templates/{$template}/img/cloud-hosting.svg" width="60" alt="hosing">
                                {/if}
                            </div>
                            <h4 class="package-title">{$myproduct.name}{if $myproduct.is_featured == '1'} <span class="badge color-1 color-1-bg">Popular</span>{/if}</h4>
                            
                            <div class="pricing-price pt-4">
                                <small>Starting at</small>
                                <div class="h2">{$myproduct.prefix}{$myproduct.monthly} <span class="price-cycle h4">/mo</span></div>
                            </div>
                            <a href="cart.php?a=add&pid={$myproduct.relid}" class="btn {if $myproduct.is_featured == '1'}primary-solid-btn{else}outline-btn{/if} mt-20">Get Started Now</a>
                        </div>
                    </div>
                {/foreach}
            </div>
        </div>
    </section>
    {/if}
    <!--pricing section end-->


4. Client Area overdue message (clientAreaPanel.php)

In this clientAreaPanel.php file, you can see the few options like 'color', 'btn-text', 'btn-link', 'btn-icon'.  We have managed the pay information by those. You need to replace the 'btn-link' with your link.

<?php
 
// This hook will adjust the button in the home page panels. You have two
// different options of setExtra() or setExtras(). Use of setExtras() requires
// passing all 'extra' related vars through the array.
 
use WHMCS\View\Menu\Item;
 
add_hook('ClientAreaHomepagePanels', 1, function (Item $homePagePanels) {
    $overdueInvoicesPanel = $homePagePanels->getChild('Overdue Invoices');
    if (!is_null($overdueInvoicesPanel)) {
        $overdueInvoicesPanel->setExtras(
            [
                'color' => 'amethyst',
                'btn-text' => 'Pay Now',
                'btn-link' => 'https://whmcs.themetags.com/clientarea.php?action=invoices',
                'btn-icon' => 'fas fa-wallet',
            ]
        );
    }
});


To check it, login to the client area panel fist then you can see the overdue message alert box on top. If you have an overdue invoice then you will see like below:




5. Multi-currency support (currency.php)

For multi-currency support, we customize  multiple_currency_hook in this currency.php file

<?php
/**
 * Price Table Hook Function
 *
 * Please refer to the documentation @ https://docs.whmcs.com/Hooks for more information
 * The code in this hook is commented out by default. Uncomment to use.
 *
 * @package    WHMCS
 * @author     WHMCS Limited <development@whmcs.com>
 * @copyright  Copyright (c) WHMCS Limited 2005-2018
 * @license    https://www.whmcs.com/license/ WHMCS Eula
 * @version    $Id$
 * @link       https://www.whmcs.com/
 */

use Illuminate\Database\Capsule\Manager as Capsule;
use WHMCS\Session;

if (!defined("WHMCS"))
    die("This file cannot be accessed directly");

function multiple_currency_hook($vars) {
    $currencyId   = (isset($_GET['currency']) ? intval($_GET['currency']) : $_SESSION['currency']);
    
    $currencyList = Capsule::table('tblcurrencies')->get();
    if(!empty($currencyList)) {
        $template = !empty($vars['template']) ? $vars['template'] : '';
        $flags    = getFlags();
        foreach($currencyList as &$currency) {
            $currency->flag = 'templates/' . $template . '/' . $flags[$currency->code];
            if(empty($currencyId) && $currency->default) {
                $currencyId = $currency->id;
            }
        }
    }
    
    $encodedata = json_encode($currencyList);
    $decodedata = json_decode($currencyList, true);
    
    $urlForCurrentcy = getUrlForCurrency($currencyId);
    $isQueryExist    = strpos($urlForCurrentcy, "?") !== false ? true : false;
    
    return array("multiCurrency" => $decodedata, 'selectedCurrency' => $currencyId, 'urlForCurrentcy' => $urlForCurrentcy, 'isQueryExist' => $isQueryExist);
}

add_hook("ClientAreaPage", 1, "multiple_currency_hook");

// get URL for currency withour currency query string
function getUrlForCurrency($currencyId) {
    $whmcsQueryStr   = [];
    $actualLink      = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
    $whmcsCurrentUrl = parse_url($actualLink);
    if(!empty($whmcsCurrentUrl['query'])) {
        parse_str($whmcsCurrentUrl['query'], $whmcsQueryStr);
    }

    if(!empty($whmcsQueryStr)) {
        foreach($whmcsQueryStr as $queryKey => $whmcsQuery) {
            if(strpos($queryKey, "currency") !== false) {
                unset($whmcsQueryStr[$queryKey]);    
            }
        }
    }
    
    $whmcsCurrentUrl['query']  = urldecode(http_build_query($whmcsQueryStr, '', '&amp;'));

    $fullUrl = unparseUrl($whmcsCurrentUrl);
    
    return $fullUrl;
}

// prepare full URL
function unparseUrl( $parsed_url , $ommit = array( ) ) {
    $url           = '';
    $p             = array();
    $p['scheme']   = isset( $parsed_url['scheme'] ) ? $parsed_url['scheme'] . '://' : '';
    $p['host']     = isset( $parsed_url['host'] ) ? $parsed_url['host'] : '';
    $p['port']     = isset( $parsed_url['port'] ) ? ':' . $parsed_url['port'] : '';
    $p['user']     = isset( $parsed_url['user'] ) ? $parsed_url['user'] : '';
    $p['pass']     = isset( $parsed_url['pass'] ) ? ':' . $parsed_url['pass']  : '';
    $p['pass']     = ( $p['user'] || $p['pass'] ) ? $p['pass']."@" : '';
    $p['path']     = isset( $parsed_url['path'] ) ? $parsed_url['path'] : '';
    $p['query']    = !empty( $parsed_url['query'] ) ? '?' . $parsed_url['query'] : '';
    $p['fragment'] = isset( $parsed_url['fragment'] ) ? '#' . $parsed_url['fragment'] : '';
    if ( $ommit ) {
        foreach ( $ommit as $key ) {
            if ( isset( $p[ $key ] ) ) {
                $p[ $key ] = '';    
            }
        }
    }
      
    return $p['scheme'].$p['user'].$p['pass'].$p['host'].$p['port'].$p['path'].$p['query'].$p['fragment']; 
}

// ************************************************************************************************************************
// Description: All flag list with currency code (We used flag from https://lipis.github.io/flag-icon-css/flags/4x3/us.svg.)
// key: currency code from WHMCS setting (Configuration > System Settings > Currencies). https://docs.whmcs.com/Currencies
// value: flag image path. Location: templates/{your-template}/img/flags/
//
// Instruction: the key needs to be the same as the currency code. 
// Example: 'USD'. We have set the currency code USD from Configuration > System Settings > Currencies
// ************************************************************************************************************************
function getFlags() {
    return [
        'AED' => 'img/flags/AED.svg',
        'AUD' => 'img/flags/AUD.svg',
        'BDT' => 'img/flags/BDT.svg',
        'BRL' => 'img/flags/BRL.svg',
        'COP' => 'img/flags/COP.svg',
        'CRC' => 'img/flags/CRC.svg',
        'DEM' => 'img/flags/DEM.svg',
        'EGP' => 'img/flags/EGP.svg',
        'ESP' => 'img/flags/ESP.svg',
        'FRF' => 'img/flags/FRF.svg',
        'GBP' => 'img/flags/GBP.svg',
        'IDR' => 'img/flags/IDR.svg',
        'ILS' => 'img/flags/ILS.svg',
        'INR' => 'img/flags/INR.svg',
        'ITL' => 'img/flags/ITL.svg',
        'MXN' => 'img/flags/MXN.svg',
        'NGN' => 'img/flags/NGN.svg',
        'NLG' => 'img/flags/NLG.svg',
        'PKR' => 'img/flags/PKR.svg',
        'PLN' => 'img/flags/PLN.svg',
        'SAR' => 'img/flags/SAR.svg',
        'TRY' => 'img/flags/TRY.svg',
        'USD' => 'img/flags/USD.svg',
    ];
}

In this multi-currency, we have used the country flag location path (.svg format). We have 23 country flags included in our templates/{your-template}/img/flags folder.

If you need to add a new country flag then:

  1. First, add your currency from add multiple currencies
  2. Then add/upload your flag in `templates/{your-template}/img/flags` folder
  3. And add the currency code and flag path in getFlags function like 'BDT' => 'img/flags/BDT.svg', . BDT has come from currency code field. Check that we have used BDT.


NB: Make sure your image name will be your country code like USD, GBP, etc...