Customizing the Invoice Template

Table of Contents

The WP-CRM System Invoicing extension allows you to customize the look and feel of your invoices through a template built especially for WP-CRM System Invoicing.

Customizing the Invoice Template #

WP-CRM System’s Invoicing extension has a template built into it, which displays the default version of the invoice. In order to customize this template, you will need to connect to your site via FTP and download the template file. This template file is located in the following directory:

/wp-content/plugins/wp-crm-system-invoicing/includes/template/wp-crm-system-invoicing-template.php

Once you download this file, you can change whatever you want with one exception. The first line that references the file invoice-data.php. This line should not be changed as this file generates invoice-specific information. Everything else can be edited as much as you want.

After you have finished updating the file wp-crm-system-invoicing-template.php upload it back to your site. This time, instead of replacing the original file that you downloaded, upload it to the root folder of your active theme. The reason you shouldn’t override the default template is that if there is an update to this plugin your changes will get lost in the update.

You would upload the file to this directory (replacing your-theme-folder with your actual theme’s folder).

/wp-content/themes/your-theme-folder/wp-crm-system-invoicing-template.php

This version of the template will take precedence over the original version from the Invoicing extension plugin.>

If you want to include specific information on the invoice the following variables and functions can be used:

$status //Returns 'not-paid' or 'paid'
$businessImage //Returns the URL to the image for your business set in WP-CRM System>Settings>Invoicing tab
$businessName //Returns the name of the business set in WP-CRM System>Settings>Invoicing tab
$businessAddress //Returns the address for the business set in WP-CRM System>Settings>Invoicing tab
$businessPhone  //Returns the phone number for the business set in WP-CRM System>Settings>Invoicing tab
$businessEmail  //Returns the email address for the business set in WP-CRM System>Settings>Invoicing tab
$businessURL //Returns the website URL for the business set in WP-CRM System>Settings>Invoicing tab
$numFields //Returns the number of line items for a specific invoice. Used to loop through each line. See for loop starting on line 124 of the default template.
  for ( $x = 1; $x <= $numFields; $x++ ) {
      $lineName[$x] //Returns the name of the product/service on a line item.
      $linePrice[$x] //Returns the per unit price for the product/service for a line item.
      $lineQty[$x] //Returns the quantity of the product/service for a line item.
      $lineTotal[$x] //Returns the total line item price ($linePrice[$x] * $lineQty[$x])
      $lineDesc[$x] = //Returns the description for a line item.
  }
$invNum //Returns the invoice number
$poNum //Returns the Purchase Order number
$invDate //Returns the date of the invoice
$invDue //Returns the due date of the invoice
$invTerms //Returns the terms and conditions set for the invoice
$invNote //Returns the customer notes set for the invoice
$invOrg //Returns the ID of the organization set for the invoice. Used to retrieve an organization's information (name, address, etc.). See lines 45-65 of the default template.
$invContact //Returns the ID of the contact set for the invoice. Used to retrieve the contact's information (name, address, etc.). See lines 66-86 of the default template.
$invProject //Returns the ID of the project set for the invoice. Can be used similarly to the $invOrg and $invContact, however it is not used in the default template.
$invCurrency //Returns the currency set for the invoice as a three character code (i.e. usd, gbp, eur).
$displaySymbol //Returns the symbol of the currency set for the invoice (i.e. usd = $, gbp = £, etc.).
$disableStripe //Returns '' or 'yes' depending on whether or not Stripe can accept the selected currency for the invoice.
$invTax //Returns the value of tax set for the invoice. If this is not set on an invoice it will not return a value. Better to use $tax - see below.
$taxRate //Returns the global tax rate set in WP-CRM System>Settings>Invoicing tab
$numDecimals //Returns the number of decimals used to display currency in WP-CRM System>Settings
$decPt //Returns the decimal symbol used to display currency in WP-CRM System>Settings
$thousands //Returns the thousands separateor used to display currency in WP-CRM System>Settings
$stripePK //Returns the Publishable key for Stripe as set in WP-CRM System>Settings>Invoicing tab
$stripeSK //Returns the Secret key for Stripe as set in WP-CRM System>Settings>Invoicing tab
$stripeImg //Returns the image for Stripe as set in WP-CRM System>Settings>Invoicing tab
$alternatePayment //Returns the alternate payment instructions set in WP-CRM System>Settings>Invoicing tab
$subtotal //Returns the pre-tax total of the invoice (i.e. sum of all line item totals)
$tax //Returns the total tax to be charged. If $invTax is set in an invoice $tax = $invTax. If $invTax is not set for an invoice $tax = $subtotal * $taxRate.
$total //Returns the total price to be paid for the invoice (calculated $subtotal + $tax)
$stripeTotal //Returns the total price to be charged through Stripe in cents. If $total = $20.00, $stripeTotal = 2000.
wpcrm_system_invoicing_payments(); //Returns the payment section including Stripe "Pay with Card" button, and $alternatePayment information. For Stripe payments this will also display payment information such as "This payment has been processed" or "Sorry your card has been declined", and if an invoice is marked as paid it will return "This invoice has been marked as paid".
  //To customize wpcrm_system_invoicing_payments(), you can copy the function towards the bottom of invoice-data.php into your theme's functions.php and edit it as much as you would like. Be sure to rename your function to avoid conflicts.

Change Styles Only #

If you don’t want to edit the template file, and only need to change the styles being applied to the layout, you can find a complete list of styles used below.

#wpcrm_system_invoice {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    margin-top: 0.75em;
    border: 2px solid #f5f5f5;
    font-family: sans-serif;
}
#wpcrm_system_header_customer, #wpcrm_system_header_invoice {
    width: 30%;
}
tr.wpcrm_system_header_row {
    vertical-align: top;
}
#wpcrm_invoice_logo, #wpcrm_invoice_business_info, #wpcrm_system_header_customer, #wpcrm_system_header_invoice {
    padding: 20px;
}
.wpcrm_invoice_head_name, .wpcrm_system_invoice_line_name, .wpcrm_system_invoice_line_description, .wpcrm_system_terms { 
    padding-left: 20px;
}
.wpcrm_line_total, .wpcrm_system_invoice_line_total, .wpcrm_system_invoice_line_description, #wpcrm_system_invoice_total_amt, #wpcrm_system_invoice_tax_amt, #wpcrm_system_invoice_subtotal_amt {
    padding-right: 20px;
}
.floatright {
    float: right;
    text-align: right;
}
.wpcrm_invoice_header {
    font-weight: 700;
    font-size: 1.5em;
    background-color: #f5f5f5;
    height: 1.5em;
}
.wpcrm_invoice_totals {
    font-weight: 700;
    font-size: 1em;
    background-color: #f5f5f5;
    height: 1.5em;
}
div#wpcrm_bill_to, .wpcrm_system_invoice_line_name {
    font-weight: 700;
}
.wpcrm_system_invoice_line_description {
    font-style: italic;
}
tr.evenline:hover, tr.oddline:hover {
    background-color: #f5f5f5;
}

You can add any of these to your own stylesheet file and they should override the stylesheet used by the plugin.

What are your Feelings