Templates control the look and layout of your invoices and quotes. JoomInvoice ships with two default templates - one for invoices and one for quotes - but you can create as many custom templates as you need.
Template List
Go to Components > JoomInvoice > Settings > Templates to see your templates.
How Templates Work
Each template has three separate layouts for different rendering contexts:
- Online Template - What clients see when viewing an invoice in their browser. Uses responsive styling.
- PDF Template - Used when generating PDF files. Must use table-based layout because the PDF engine has limited CSS support.
- Email Template - Used as the email body when sending invoices or quotes.
Each layout is independent, so you can optimize them separately for their target medium.
Editing Templates
- Open a template from the list.
- Edit the HTML for each layout (Online, PDF, Email).
- Use placeholders (see below) to insert dynamic invoice data.
- Use the Styles field to write CSS that applies to the PDF layout.
- Set the Company Logo filename (the file should be uploaded to
media/com_joominvoice/). - Click Save.
If you prefer a visual editor, enable Show editor for template editing in Configuration. Otherwise you edit the raw HTML directly.
Placeholders
Placeholders are special tokens that get replaced with actual invoice data when the template is rendered. They use curly braces: {placeholder_name}.
Invoice / Quote Details
| Placeholder | What It Shows |
|---|---|
{invoice_num} |
Formatted invoice or quote number |
{invoice_date} |
Invoice date |
{invoice_duedate} |
Due date |
{status} |
Status badge (colored label) |
{external_ref} |
External reference number |
{notes} |
Invoice notes (visible to client) |
{invoice_link} |
Link to view the invoice online |
{invoice_unlogged_link} |
Public link with secure access code (for guests) |
Recipient (Bill To)
| Placeholder | What It Shows |
|---|---|
{to_name} |
Client name |
{to_company} |
Client company |
{to_email} |
Client email |
{to_address} |
Client address |
{to_city} |
Client city |
{to_state} |
Client state/province |
{to_country} |
Client country |
{to_zipcode} |
Client postal code |
{to_vatid} |
Client VAT ID |
{to_phone} |
Client phone |
Sender (From)
| Placeholder | What It Shows |
|---|---|
{from_name} |
Your company name |
{from_address} |
Your company address |
{from_num} |
Your VAT number |
{from_email} |
Your email |
{from_phone} |
Your phone |
{from_url} |
Your website URL |
Totals and Amounts
| Placeholder | What It Shows |
|---|---|
{subtotal} |
Subtotal including item taxes |
{subtotal_items} |
Subtotal of items before global taxes |
{subtotal_items_less_total_discount} |
Subtotal minus discount |
{subtotal_items_no_discount} |
Subtotal before any discount |
{discount} |
Invoice discount amount |
{total} |
Grand total |
{total_items_tax} |
Total of all item-level taxes |
{total_items_discount} |
Total discount on items |
{total_payments} |
Total amount already paid |
{amount_outstanding} |
Remaining amount due |
Payment Information
| Placeholder | What It Shows |
|---|---|
{num_payments_received} |
Number of paid payments |
{num_pending_payments} |
Number of unpaid payments |
{paynow_button} |
A "Pay Now" button linking to the first unpaid payment |
Quote Actions
| Placeholder | What It Shows |
|---|---|
{accept_button} |
Accept quote button (for clients) |
{reject_button} |
Reject quote button (for clients) |
Company Logo
| Placeholder | What It Shows |
|---|---|
{company_logo} |
URL to the company logo image |
Use it in an <img> tag: <img src="/{company_logo}" width="300" />
Template Sections (Loops)
Some parts of an invoice repeat - like line items, taxes, and payments. Template sections handle this by repeating everything between the start and end markers for each record.
Items
Everything between <!--ITEMS--> and <!--/ITEMS--> repeats once for each line item:
<!--ITEMS-->
<tr>
<td>{sku}</td>
<td>{name}</td>
<td>{desc}</td>
<td>{value}</td>
<td>{amount}</td>
<td>{discount}</td>
<td>{tax}</td>
<td>{item_total}</td>
</tr>
<!--/ITEMS-->
Available item placeholders: {sku}, {name}, {desc}, {value} (unit price), {amount} (quantity), {discount}, {tax}, {tax_name}, {item_tax_value}, {item_with_tax}, {item_subtotal_no_discount}, {item_subtotal}, {item_total}.
Global Taxes
Everything between <!--TAXES--> and <!--/TAXES--> repeats for each global tax:
<!--TAXES-->
<tr>
<td>{name} ({tax_value})</td>
<td>{value}</td>
</tr>
<!--/TAXES-->
Grouped Taxes (Item-Level Taxes)
Shows individual item taxes grouped by tax name:
<!--GROUPED_TAXES-->
<tr>
<td>{name} ({tax_value}% of {calculated_on_amount})</td>
<td>{value}</td>
</tr>
<!--/GROUPED_TAXES-->
Grouped Taxes Total
Shows the total for each tax group:
<!--GROUPED_TAXES_TOTAL-->
<tr>
<td>{name}</td>
<td>{value}</td>
</tr>
<!--/GROUPED_TAXES_TOTAL-->
Paid Payments
Everything between <!--PAYMENTS--> and <!--/PAYMENTS--> repeats for each payment that has been received:
<!--PAYMENTS-->
<tr>
<td>{payment_datetime}</td>
<td>{description}</td>
<td>{payment_status}</td>
<td>{amount}</td>
</tr>
<!--/PAYMENTS-->
Unpaid Payments
Everything between <!--PAYMENTS2--> and <!--/PAYMENTS2--> repeats for each unpaid payment:
<!--PAYMENTS2-->
<tr>
<td>{duedate}</td>
<td>{description}</td>
<td>{payment_status}</td>
<td><a href="{payment_link}">Pay Now</a></td>
<td>{amount}</td>
</tr>
<!--/PAYMENTS2-->
Translation Keys
Use double square brackets [[KEY]] to include translated text in your templates. For example:
[[INVOICE_NUM]]- "Invoice Number" (translated to the invoice's language)[[ITEMS]]- "Items"[[TOTAL]]- "Total"[[FROM]],[[BILL_TO]],[[ADDRESS]],[[EMAIL]], etc.
This is especially useful if you send invoices in multiple languages. The labels automatically appear in whatever language the invoice is set to.
Template Assignment
Each invoice and quote can use a different template:
- Default templates are set in Configuration > Default invoice template and Default quote template.
- When creating or editing an individual invoice, you can override the template on the Form tab.