Automatically create and send custom PDF invoice in WooCommerce

Annoying, but essential topic in your business has a lot of solutions. We are aiming on invoice customization to give you more flexibility and new features to impress your customers.

Requirements

eledo.online account
Eledo PDF Attachments for WooCommerce plugin

Eledo is online PDF service allowing you to design PDF template and create document with dynamic data. FREE accounts are also available. WooCommerce plugin was created to integrate the service with your e-shop. It is open source and free of charge.

Dry run

Before we spend some time with customization, let's make a dry run.

Create account at https://eledo.online/register
Get API Key from Integrations->API page
Install Eledo PDF Attachments for WooCommerce plugin
Navigate to WooCommerce->Settings->Eledo PDF and set the API KEY
Select public Invoice template and save configuration.
Navigate to WooCommerce->PDF Documents and click Create action on some order (this is manual way of creating Invoice)
Review created document

What happened?

You most probably got a PDF Invoice for your Order, which is not fully populated. Invoice number is not as you expect it, Logo is not yours, you don't like the color. Everything can be changed to your satisfaction, keep reading.

Customization

PDF template we have used is a public one and therefore read only. To make changes you need to copy it to your personal directory. It's a simple task, click edit on public template and then click copy.

Company details

Some values are usually included in multiple documents and therefore it's good idea to define them globally. For this purpose there are two types of variables you can define in your eledo user profile. First one is standard property. It is used for text values like Company name, address, phone number etc. Second type is a counter. It is a number value and increments automatically.

To populate global variables used by the template, go to edit screen, choose Input fields and press Add missing to profile. Missing variables will be added to your profile, so you just need to populate them and save the profile.

Company logo

It can be changed directly in template editor. Double-click on old logo to open image preferences dialog. Upload your logo in upload tab. Then in a first tab use Browse Server button to select your logo. Change width and height if necessary and confirm with OK button.

We strongly recommend to use an SVG image format.

Invoice number generation

PDF document identificator (or file name) is generated from expression defined in File Name field in template editor. In this case we will use it for Invoice number format. Following is the format from public Invoice document:

$InvoicePrefix + num(#InvoiceCreated,4)

This will produce Invoice number like INV0034 with InvoicePrefix followed by 4 digit number from InvoiceCreated counter. Variable with $ sign is user's profile one and # sign means it is a counter, also defined in user's profile. Expression function num(N, x) will print number N and pad it with leading zeroes to match x digits.

If we want to derive Invoice number from Order number, File name expression could look like this:

$InvoicePrefix + num(id, 4)

To add Year for example, use date functions like this:

$InvoicePrefix + num(year(), 2) + num(#InvoiceCreated, 4)

Styling with CSS

Color, font size or border thickness can be changed using tools in template editor, or in more advanced way - using Cascading Style Sheets. It allows you to change style of all tables or paragraphs at once for example. CSS can be typed into Document->Styles tab of template editor.

Email settings and automation

So far you have created Invoice manually. Where is the automation? It comes with email settings. Invoice is generated on demand, by email notification trigger. Invoice is also generated only once per Order, even if it is included in multiple email notifications. Now you need to select email notifications you want Invoice to be attached to. Payment method filter helps you prepare different invoice types per payment method. For example, you can send Pre-Invoice for Bacs method with QR code to make your customer's payment more comfortable.