Exchange Product Types: Invoices

(Difference between revisions)
Jump to: navigation, search
(Created page with "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...")
 
(5 intermediate revisions by one user not shown)
Line 11: Line 11:
 
<br />
 
<br />
  
Next, you will select the client you'd like to assign to the invoice.  You can either select a current customer or create a new customer.
+
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.
  
 
<br />
 
<br />
Line 18: Line 18:
  
 
<br />
 
<br />
 +
 +
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.
  
 
<br />
 
<br />
Line 24: Line 26:
  
 
<br />
 
<br />
 +
 +
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).
 +
 +
<br />
 +
 +
[[File:InvoiceDetails.png|InvoiceDetails.png|link=]]
 +
 +
<br />
 +
 +
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
 +
 +
<br />
 +
 +
[[File:InvoiceTerms.png|InvoiceTerms.png|link=]]
 +
 +
<br />
 +
 +
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. 
 +
 +
<br />
 +
 +
[[File:InvoiceDescriptionNotes.png|InvoiceDescriptionNotes.png|link=]]
 +
 +
<br />
 +
 +
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.
 +
 +
<br />
 +
 +
[[File:InvoiceClientLink.png|InvoiceClientLink.png|link=]]
 +
 +
<br />
 +
 +
You can follow that link to view your new invoice.
 +
 +
<br />
 +
 +
[[File:Invoice.png|Invoice.png|link=]]
 +
 +
<br />
 +
=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 [http://wordpress.org/plugins/printfriendly/ printfriendly WordPress plugin]
 +
* when using [http://ithemes.com/purchase/builder-theme/ Builder theme], create a new layout or
 +
* create a custom page template (will work for all themes)
 +
* style the invoice
 +
 +
==Install and activate the printfriendly WordPress plugin==
 +
Download the printfriendly plugin from the WordPress Plugin repository, [http://wordpress.org/plugins/printfriendly/installation/ 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).
 +
 +
[[File:Pfsettings1.jpg|Pfsettings1.jpg|link=]]
 +
 +
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.
 +
 +
[[File:Pfsettings2.jpg|Pfsettings2.jpg|link=]]
 +
 +
==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:<br />
 +
[[File:Builder-layout1.jpg|Builder-layout1.jpg|link=]]
 +
 +
In the html module, add the following code (you can copy this code from the plugin settings above)
 +
 +
<pre class="brush:php;">
 +
<?php if(function_exists('pf_show_link')){echo pf_show_link();} ?>
 +
</pre>
 +
 +
and make sure that you enable PHP for this module.
 +
 +
[[File:Builder-layout2.jpg|Builder-layout2.jpg|link=]]
 +
 +
Finally, edit the invoice, and set the Builder layout to the "Invoice" layout:
 +
 +
[[File:Editinvoice1.jpg|Editinvoice1.jpg|link=]]
 +
 +
==Create a custom page template (non Builder themes)==
 +
 +
todo
 +
 +
==Style your invoice==
 +
This is optional, but recommended, as the default styling for the printed invoice isn't optimal. In the <code>invoice.css</code> in your child theme folder, add the following code:
 +
 +
<pre class="brush:css;">
 +
/* 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;
 +
}
 +
</pre>
 +
 +
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 <code>invoice.css</code> stylesheet.
 +
 +
__NOTOC__
 +
==More Links==
 +
 +
*[http://ithemes.com/2013/12/19/send-invoices-with-wordpress/ Send Invoices with WordPress]
 +
 +
==See also==
 +
 +
*Free Product Types
 +
**[[:Exchange_Product_Types:_Digital_Downloads|Digital Downloads]]
 +
**[[:Exchange_Product_Types:_Physical_Products|Physical Products]]
 +
**[[:Exchange_Product_Types:_Simple_Products|Simple Products]]
 +
*Premium Product Types
 +
**[[:Exchange_Product_Types:_Invoices|Invoices]]
 +
**[[:Exchange_Product_Types:_Memberships|Memberships]]
 +
 +
==Quick Links==__NOEDITSECTION__
 +
 +
====Resources====__NOEDITSECTION__
 +
*'''[http://ithemes.com/2013/12/19/send-invoices-with-wordpress/ Send Invoices with WordPress]''' - iThemes Blog
 +
*'''[http://ithemes.com/tutorial/category/ithemes-exchange/ Tutorials]''' - Short video tutorials to help you become an Exchange expert.
 +
====Support====__NOEDITSECTION__
 +
*'''[http://ithemes.com/forum/forum/207-exchange-ecommerce-plugin/ Get Basic Help]''' - Get free help on some basics of Exchange.
 +
*'''[http://ithemes.com/member/signup.php?price_group=250&product_id=315 Get Premium Support]''' - Get premium and priority support for Exchange.
 +
====Report & Request====__NOEDITSECTION__
 +
*'''[http://ithemes.com/exchange/bugs/ Report a Bug or Problem]''' - Help us fix an issue that you have found in Exchange
 +
*'''[http://ithemes.com/exchange/feature-request/ Request a Feature]''' - Help us improve Exchange for everyone
 +
 +
<br />
 +
[[:Exchange|← Back to Exchange Codex Home]]

Revision as of 17:40, January 22, 2014

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.


InvoiceTitlepng


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.


InvoicesExistingClient.png


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.


InvoiceNewClient.png


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).


InvoiceDetails.png


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


InvoiceTerms.png


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.


InvoiceDescriptionNotes.png


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.


InvoiceClientLink.png


You can follow that link to view your new invoice.


Invoice.png


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).

Pfsettings1.jpg

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.

Pfsettings2.jpg

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:
Builder-layout1.jpg

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.

Builder-layout2.jpg

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

Editinvoice1.jpg

Create a custom page template (non Builder themes)

todo

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

Resources

Support

Report & Request


← Back to Exchange Codex Home

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox