Templates and design
Pick a template, add your logo and brand color, adjust fonts and spacing, and check every change in the live preview.
Every document uses one design. You set it on the Invoice design page and see the result at once in the live preview. The PDF matches the preview exactly, because both are made from the same data.
Add your logo and company details
Your company details and logo live in the general settings, because every document prints them.
- Go to Vite Invoice → Settings → General.
- Under Company information, click Choose logo next to Company logo.
- Fill in Company name, Billing email, Phone, Address and Tax or VAT number (optional).
- Add Footer text, such as your terms or a thank-you line.
- Under PDF, choose the Paper size (A4 or US Letter) and When someone opens a PDF: Download it or Open it in a new tab.
- Click Save Changes.
Without a logo, your company initials are used as an avatar.
Pick a template
- Go to Vite Invoice → Templates.
- Under Template, pick a design.
- Click Save Changes.
The free plugin includes the Basic template.
Pro: Pro adds five more templates: Modern, Compact, Bold, Elegant and Minimal.
Change the appearance
Under Appearance:
- Accent color: your brand color.
- Font: Sans-serif or Serif.
- Header style: Simple or Color band.
- Show initials avatar: when no logo is uploaded, shows your company initials next to the company name. An uploaded logo always shows.
- Footer text: leave it empty to use the footer from the general settings.
Below that, fine-tune the details:
| Group | Controls | Plan |
|---|---|---|
| Colors | Text color, Border color, Table header color, Table header text color | Free |
| Typography | Body font size, Heading font size, Line height | Free |
| Spacing | Page margin, Section spacing, Table cell padding | Pro |
| Layout | Header size, Header alignment, Title alignment, Product table style | Pro |
Click Reset to default to undo your changes, or Save Changes to keep them.
Use the live preview
The Live preview updates as you change things. Use the preview data switch to choose what it shows:
- Sample data: a made-up order. Used when your store has no orders yet.
- Latest order: your most recent WooCommerce order.
- Order number: search for any order and see its invoice.
Click the preview to enlarge it. The settings pages for each document type have a live preview too.
Custom CSS
Pro: With Pro, a Custom CSS section appears. Your rules apply to the PDF and the preview, and invalid rules are ignored. Click a part under "Parts you can style" to add a rule for it, such as the company name, the totals box or the footer text. Example:
.grand td { font-size: 16px; }.
Languages and right-to-left
Documents are written in your site language. On a right-to-left language such as Arabic, the whole page is mirrored. See Translation and RTL.