Customizing Sprout Invoices Templates

Customizing templates for estimates, invoices or any other front-end generated content from Sprout Invoices is easy.

Using the Customizer

On the estimate or invoice screen click the Customizer and edit some of the basic styles for each template.

Note: If the Customizer link is not showing, make sure you are viewing and invoice (or estimate) from the front-end and not the admin; the same page your clients will see.

Changing the logo

If you don't want to use the Customizer (documented above) you could replace the logo with a simple theme override. To replace the logo: simply upload yours to /wp-content/themes/[child-theme]/sa_templates/logo.(png|jpg|gif) and it will automatically be used.

Adding CSS

Starting in version 9.0 new stylesheets can be dropped into your theme and be automatically loaded based on the context of the record being viewed.

General CSS - /wp-content/themes/[child-theme]/sa_templates/sprout-invoices.css 

Invoice Template Only - /wp-content/themes/[child-theme]/sa_templates/invoices.css 

Estimate Template Only - /wp-content/themes/[child-theme]/sa_templates/estimates.css

css loaded from theme

The old way to add CSS is by using a filter, which may come in handy if you want to add some additional logic to only load a stylesheet/CSS based on certain conditions, e.g. stylesheets based on the client.

Customizations for the Default theme

Example of how to remove the history section:

Overriding Templates

All views in Sprout Invoices are easily customizable by overriding templates in your own WordPress theme.

When you open up the Sprout Invoices plugin you'll find a /views folder, in that folder are all the front-facing templates that Sprout Invoices uses. Don't modify these files directly, instead copy them to your own theme under a directory named /sa_templates. It's recommended you keep the same directory structure even though some templates can be placed in the root sa_templates directory.


Multiple Custom Templates

If you would like to use multiple templates make sure add a PHP header comment with the template name. The comment is very similar to a custom page templates, the only difference is that we use "SA Template Name", see the example below.

template path example

Examples of Template Overrides

We have a special Sprout Invoices Library that itself is a child theme for Twenty Fourteen. It's a working version of example theme overrides, template modifications, and custom templates. The library is not updated regularly.

Translating/Changing text strings in Sprout Invoices

Translating/Changing text in Sprout Invoices is relatively easy since every string is filtered via gettext (a core WordPress filter). Using this filter will help alleviate translating/changing text where creating a new customized template can't help; for example, translating/changing strings from functions.

Still need help? Contact Us Contact Us