WHMCS  is a popular client management and billing system used by web hosting companies and other online service providers. It allows you to customize its appearance through templates, which are based on the Smarty template engine.

Here are the general steps to customize WHMCS templates:

1. Backup: Before making any changes, always back up your existing template files and the WHMCS database. This ensures you can revert to the original state if something goes wrong during the customization process.
2. Template Files: The template files for WHMCS can be found in the “templates” folder of your WHMCS installation. Each template typically has its own subfolder containing the necessary files.
3. Choose a Template: If you’re starting from scratch or want to modify an existing template, identify the template you want to work on. You can either edit the default template or create a new one based on the existing template.
4. Modify CSS: To change the appearance, you’ll primarily be working with CSS files. Locate the CSS file(s) associated with the template you’re customizing and edit them to adjust colors, fonts, layout, and other design elements.
5. Edit Template Files: WHMCS templates consist of various files, including .tpl (Smarty template files), .php (PHP files), and .css (CSS files). The .tpl files control the structure of the page, while the .php files handle the logic.
6. Smarty Tags: Smarty tags are used in the .tpl files to display dynamic content. Refer to the WHMCS documentation and Smarty documentation to understand how these tags work and how you can use them in your templates.
7. Header and Footer: Pay special attention to the header and footer files, as they are typically used across multiple pages. Modifying these files can have a significant impact on the overall look and feel of your WHMCS installation.
8. Template Hooks: WHMCS offers template hooks, which allow you to add custom content or code to specific locations in the template without modifying the core files. Utilize these hooks to maintain upgrade compatibility.
9. Testing: After making changes, thoroughly test the template on different pages and devices to ensure everything appears and functions as expected.
10. Version Upgrades: Keep track of your customizations, so when you upgrade WHMCS to a newer version, you can reapply your changes to the updated template files.

Always keep a development or staging environment to test your changes before deploying them to a live WHMCS installation. If you’re unsure about making significant changes, it’s a good idea to seek assistance from WHMCS experts or professionals experienced in customizing WHMCS templates.

Watch Video

Contact Developer