Como Personalizar o Template do WHMCS

Personalizar o WHMCS é essencial para oferecer uma experiência única aos seus clientes, reforçar a identidade visual da sua marca e melhorar a usabilidade da área do cliente e do painel administrativo. A boa notícia é que o WHMCS oferece uma estrutura flexível e organizada, permitindo alterações simples e avançadas conforme a necessidade.

Neste artigo, você aprenderá as principais formas de personalizar o template do WHMCS e quais práticas seguir para evitar problemas durante atualizações.

Entendendo a Estrutura de Templates do WHMCS

O WHMCS utiliza o mecanismo Smarty, que trabalha com arquivos .tpl responsáveis pelo layout da área do cliente.
A estrutura padrão fica em:

/whmcs/templates/template-nome/

Entre os arquivos mais importantes, estão:

• header.tpl – Cabeçalho do site

• footer.tpl – Rodapé

• clientareahome.tpl – Página inicial da área do cliente

• Pastas de CSS, JS e imagens

Criando um Template Personalizado (Método Recomendado)

A melhor prática é não editar diretamente o template padrão.
O ideal é criar uma cópia:

1. Acesse /templates/

2. Copie a pasta do template padrão (ex.: “six”)

3. Renomeie para algo como meu-template

4. Ative o novo template em:
   Setup > General Settings > General > Template

Dessa forma, ao atualizar o WHMCS, suas customizações permanecem intactas.

Personalizando Cores, Fontes e Layout

Você pode editar o arquivo principal de estilos, normalmente:

/templates/meu-template/css/custom.css

Caso não exista, você pode criar um arquivo custom.css e adicioná-lo no header.tpl.
Ao alterar cores, fontes e espaçamentos, você ajusta a identidade visual sem alterar a estrutura do template original.

Alterando Textos e Conteúdos via Arquivos .TPL

Os arquivos .tpl permitem editar:

• Estrutura HTML

• Textos da interface

• Blocos e seções personalizadas

• Inclusão de novas áreas para scripts

Por exemplo, para alterar o menu da área do cliente, edite:

/templates/meu-template/includes/navbar.tpl

Utilizando Hooks para Funcionalidades Avançadas

Se você precisa adicionar lógica personalizada — sem mexer no core — utilize hooks.

Crie um arquivo em:

/includes/hooks/minha-customizacao.php

Com hooks, você pode:

• Adicionar scripts dinamicamente

• Alterar variáveis Smarty

• Inserir novos itens de menu

• modificar comportamentos da área do cliente

Customizando o Template Administrativo

Embora menos comum, também é possível estilizar o admin:

• Acesse /admin/templates/

• Copie e renomeie o template padrão

• Ative em Setup > Staff Management > Administrator Roles

Recomenda-se modificar apenas CSS e não alterar a estrutura central para evitar incompatibilidades.

Boas Práticas ao Personalizar o WHMCS

• Nunca edite arquivos do core

• Faça backup antes de qualquer alteração

• Use custom.css sempre que possível

• Organize seu código para facilitar manutenção

• Após editar arquivos .tpl, limpe o cache do template em Utilities > System Cleanup

Conclusão

Personalizar o template do WHMCS permite oferecer uma experiência mais profissional, alinhada à identidade visual da sua empresa e às necessidades dos seus clientes. Com boas práticas, uso de hooks e um template duplicado, você garante estabilidade nas atualizações e flexibilidade total para melhorias futuras.