Exchange Product Types: Invoices

From IThemes Codex
Revision as of 17:40, January 22, 2014 by Ronald (Talk | contribs)
Jump to: navigation, search

The Invoices Add-on for Exchange allows you to send invoices to clients and customers directly from your site.

Once installed, you will see Add Invoice in your Exchange Menu (or just Add Product if Invoices is the only product type you have enabled).

You'll start by setting a title and price for your Invoice.


Next, you will select the client you'd like to assign to the invoice. You can either select an Existing Client customer or create a New Client. If you select the Existing Client option, you'll see a drop down menu where you can select a current customer on your site.


If you chose to create a New Client, you'll enter their name and email address. You can also enter their company name and have the option to create their username and password for them instead of it being created for you by Exchange.


Once you've selected or created your customer, you can then add their company name, an invoice number and a P.O. number. You can also determine if you want the link to the invoice sent to your client as soon as the invoice is published (by default, all invoices are hidden from the store; the email will contact their direct link to the invoice).


You can also, at this point, select the terms for the invoice. You can select:

  • No Terms
  • Due in 7 Days (Net 7)
  • Due in 10 Days
  • Due in 30 Days
  • Due in 60 Days
  • Due in 90 Days
  • Due on Receipt


Then you'll want to add the description for your invoice (for example, a list or description of services rendered). Below the description, you can add any additional notes for your client.


Once you've finished creating your invoice and publish the invoice, you will see a link to the invoice for your customer and the option to resend the email.


You can follow that link to view your new invoice.


Print Invoices

You can create a PDF file of your invoice, and/or add a Print function to your invoice. To do so, we need the following:

Install and activate the printfriendly WordPress plugin

Download the printfriendly plugin from the WordPress Plugin repository, install and activate. Since we only want the print/create PDF function for invoices, we need to adjust the following settings (via wp-dashboard > Settings > Printfriendly & PDF):

Make sure that you set the "Display button on" setting to "Add direct to template" (note that the code is already provided).


Optionally add a logo image you want to include on your invoice, and if you want to add further styling, add the location of a custom css file. In this case, I created an invoice.css stylesheet in my custom child theme folder.


Create a new Builder layout (Builder theme only)

Since we only want this button on the invoice page, create a new layout, or duplicate an existing layout (via wp-dashboard > My Theme > Layouts & Views) and name it something like "Invoice". Make sure that the layout contains a Content Module. Also add an html module above or below the content module. This html module will contain the code that will display the "print/create PDF button. In this example, the html module is added above the content.

Your layout will look like this:

In the html module, add the following code (you can copy this code from the plugin settings above)

<?php if(function_exists('pf_show_link')){echo pf_show_link();} ?>

and make sure that you enable PHP for this module.


Finally, edit the invoice, and set the Builder layout to the "Invoice" layout:


Create a custom page template (non Builder themes)


Style your invoice

This is optional, but recommended, as the default styling for the printed invoice isn't optimal. In the invoice.css in your child theme folder, add the following code:

/* Change font family and size */
#printfriendly {
    font-family: 'Courier New';
    font-size: 14px;

/* Hide the Page Title and Source URL */
#printfriendly #pf-src {
    display: none;

/* Left align labels on one line */
#printfriendly span.label {
    clear: left;
    margin-top: 30px;
    display: inline-block;

/* Add : after labels */
#printfriendly span.label:after {
    content: ": ";

/* Multi line description on multiple lines */
#printfriendly .it-exchange-invoice-from-block span.label,
#printfriendly .it-exchange-invoice-to-block span.label,
#printfriendly .it-exchange-invoice-description-block span.label {
    display: block;

/* Multi line description on multiple lines */
#printfriendly .it-exchange-invoice-description-block span.value {
    white-space: pre-line;

/* Hide checkout button */
#printfriendly #zero_sum_checkout_form {
    display: none;

Note that this is just sample code, and you may want to add, change or remove any code you want.

Tip: you can also copy the css code used for the invoices "online" into the invoice.css stylesheet.

More Links

See also

Quick Links



Report & Request

← Back to Exchange Codex Home

Personal tools
iThemes Codex
Codex Navigation