Customizing Sprout Invoices Templates

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

Using the Customizer

You can use the Customizer to edit some of the basic styles for each template. From there, you can edit:

  •       Invoice & Estimate Logo
  •       Invoice Primary Color
  •       Invoice Header Background
  •       Estimate Primary Color
  •       Estimate Header Background

Note: If the Customizer link is not showing, make sure you are viewing an invoice (or estimate) from the front-end (the same page your clients will see) and not on your Dashboard. Or, you can access the Customizer from the Dashboard by going to Appearance à Customize.

Changing the logo

If you don’t want to use the Customizer (documented above), you can change the invoice/estimate logo with a simple theme override. To replace the logo, simply upload your logo to /wp-content/themes/[child-theme]/sa_templates/logo.(png|jpg|gif). After it is uploaded, it will automatically be used. 

Adding CSS

Starting in version 9.0, new style sheets can be dropped into your theme and be automatically loaded based on the content 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 load a style sheet/CSS based on certain conditions (Example: style sheets based on the client).

Customizations for the Default theme

  • Changing the color scheme to be lighter
    • Customizing the Default Theme with a Light Background

      You may need a lighter theme if the default theme is a bit too dark or too color specific for your branding. No worries –  it’s easy to add a custom style sheet to Sprout Invoices.

      The CSS embedded below is in case you already have a custom style sheet setup; however, if you don’t, here are the steps to add your new custom style sheet. 
    1. Download the CSS below (here’s a handy link) and unzip the file if needed. The file sprout-invoices.css is what you’ll ne

2. Move that file (sprout-invoices.css) to your (child) theme to be in a folder named “sa_templates.” If that folder doesn’t exist, you’ll need to create it and then put your file into it. 

3. Once the file is added to that folder, Sprout Invoices will automatically use it alongside the theme’s main style sheet(s). 

The result should look something like this:

For more details on customizing templates, including a way to add a separate style sheet for each estimate and invoice, please read the customization documentation.

           

Customizing Sprout Invoices Templates

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

  • Adjusting the font size.
    • Adjust Font Size in 2017 Default Theme

      The font size for the new 2017 Default theme might be too small for some, so we made a style sheet that will adjust things for you and get you started on further customizations – like font size.
    1. Download the file found here. Unzip the file, and you should see a sa_templates folder.
    2. Add directly to your (child) theme.
    3. Then, the CSS will automatically get picked up and will be used alongside the theme's style sheet(s). 

For more details on customizing templates, including a way to add a separate style sheet for each estimate and invoice, please read the customization documentation. 

If you are still having trouble with additional customization, please contact support. 

Code to remove the history section:

<?php // don't add this line, since your functions.php file already starts with it.


function si_add_css() {
	?>
		<style type="text/css">
			#doc_history {
				display: none;
			}
		</style>
	<?php
}
add_action( 'si_head', 'si_add_css' );

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 folder, you’ll find a /views folder. That folder contains all the front-facing templates that Sprout Invoices uses. Do not modify these files directly; instead, copy them to your own theme under a directory named /sa_templates. It’s recommended that you keep the same directory structure even though some templates can be placed in the root sa_templates directory. 

sa_templates

Multiple Custom Templates

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

<?php


/**
 * SA Template Name: Spanish Template
 *
 */


do_action( 'pre_si_invoice_view' ); ?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
	<head>

template path example

Examples of Template Overrides

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

Translating/Changing text strings in Sprout Invoices

Translating/Changing text in Sprout Invoices is relatively easy because 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. This includes translating/changing strings. 

Still need help? Contact Us Contact Us