How to customise an invoice in WooCommerce

How to customise an invoice in WooCommerce

Be it anything, people are always impressed with the look and feel of it. In fact, when it comes to various WooCommerce document types, store owners cannot compromise on their appearance. The store owner may want to include different types of information in the invoice depending upon his business needs. Similarly, the customer would also want to receive an invoice that actually contains relevant information as proof of their purchase.

WooCommerce PDF Invoices, Packing Slips, Delivery Notes & Shipping Labels (Pro) plugin consists of predefined invoice templates from which you can design the invoice with the relevant data of your choice.

[gap]

First, install and activate the plugin in your WooCommerce store. Navigate to the Invoice/Pack Slip menu from your dashboard which will redirect you to the General Settings page.

The general settings page consists of different document types (Invoice, Packing slip, Shipping label, Dispatch label, Address label, and Delivery note) that are enabled by default for users. You can click on the Settings under a document type to configure the respective settings. Activate/deactivate the respective document type using the toggle.

General Settings, like the company logo, address, etc., contain information that is common to all types of documents. The general settings allow all document types to display these elements by default. Yet, there are options for altering the default settings from each individual document type.

General Settings of an Woocommerce invoice/packing slip

To customize the layout of the invoice, move on to the invoice settings by clicking on the settings tab under the invoice document type. The Customize tab of the invoice settings includes both the customization choices and pre-built layouts, as seen below.

Customize tab layout of an Invoice

From the change layout option in the upper left corner of the window, you can access the classic, modern, and standard invoice templates.

Predefined layouts of an Invoice

For individuals who prefer to create their unique customized invoices, a blank template is also available. You can select any template from the available options and proceed further to customize it.

From the Customize tab, you can drag and drop each button to control the visibility of each element. By clicking on the properties from the right-hand side of Customize tab, you can also change some generic elements such as the font size, style, color, and other attributes of each element.

Let us go over a few customization attributes. Among the generic elements on the Page tab > Properties, the following are the most common:

Page Properties of an Invoice

Dimension/Background – Where you can adjust the width, padding, and background color to configure the invoice’s dimensions and background.

Typography – Here you can add Font, Text size, Line spacing, and Text color to the invoice.

Border – The option helps you to adjust border width, style, color, and radius to your invoice.

Assets tab of Invoice

Navigating to the Assets Tab, you can customize the invoice using the main elements.

Company Info

Use this option to add or upload the company logo/name specifically for the invoice.

company info in Assets tab of Invoice

When double clicking on the Company Logo/Name in the Invoice, you can edit the option in the Block tab according to your preference.

Extra details of edit company info

If you like coding, you have the option to edit in the HTML editor next to the Company logo/name.

HTML code editor option next to the company logo/name
HTML code editor

You should careful while editing the code, any wrong syntax can cause the unexpected behavior of the customizer.

  • Logo Image: Can upload company logo image along with dimensions.
Uploading Logo image in Company info
  • Company Name: An option to show your company name in Invoices. Simply click on the eye button next to the company name if you don’t want the company name shown, a bar appears on the eye.
Company name option in Invoice

Here you have the option to adjust the dimensions and typography of the company name like margin, padding background color as well as font, text size/color, and line spacing – Bold & Italic with alignments.

Addresses

This option helps you add all types of address fields in your invoice which include From Address, Billing Address, Shipping Address, and Return Address.

Address Options in Invoice

You can customize the address column to your requirements by changing the size, background color, and typography – text color & size. Additionally, it is possible to include address details such the name, address line, city, postcode, country, contact information, and company tax id.

From address of an Invoice

Similar changes you can make to the return address, shipping address, and billing address as well.

Order Fields

You can add every field imaginable to your invoices here, including the invoice number and date, order number and date, shipping and payment methods, tracking numbers, email addresses, phone numbers, and many more. Click the Add New button under the order fields if you want to add a field that isn’t in the list.

Order fields to add in invoice

The Add New button is easy to use. Simply click the button, enter the information (such as the Enter Label and Meta key), and then click the Save button. The list will be expanded to include the new field.

To add new order meta details in invoice
  • Invoice date: Format: This option allows you to select a date format.
Invoice date formats for invoice customization
  • Order Date: Format: This allows you to select a date format, which is similar to the Invoice date format shown above.

Product Table

This table will contain information related to products such as product SKU, product name, quantity, and total price. You can customize the font size, text alignment, and color.

Product table options for invoice

The Product table field contains both the Product table and the Summary table. You can include a table head, table body with the product’s image, quantity, price, and total price, as well as other elements like SKUs and tax items, if necessary, in the product table.

The inside details of a product table

The Summary table has the following columns: Subtotal, Shipping, Cart/Order Discount, Tax Items, and can add additional columns like total tax and coupon applied.

Summary Table in invoice

Other

Other significiant features for Invoice

The Other fields on an invoice contain additional details needed to appear professional touch, such as signatures, received seals, return policies, barcodes, footers, and document titles that will make your invoice look professional.

  • Signature: Where a legal signature of a representative must be affixed at the bottom of the invoice.
Signature options in invoice

Signatures can be of 3 types – Image, Manual, and Signature Label

  1. Image Signature: Here, you can upload your digital signature and adjust the size accordingly.
  2. Manual Signature: Here, you may add a signature space by adjusting the size. You can hide the manual signature by clicking the eye next to the title if you have a digital signature.
  3. Signature Label: Here you can enter the name of the person who signed the invoice.
  • Received Seal: A seal can be added to the invoice, with the option to customize the text color/font/size/size as well as the border color/size/style/radius.
  • Generate PDF Preview: You can examine a sample PDF preview of the invoice for the most recent order before activating the layout. A pop-up window containing the most recent order’s invoice will appear as soon as you click on the Generate PDF Preview button.
  • Code Editor: You can even switch to the code editor, to make additional customizations other than the one listed in the visual editor.
Code editor in Invoice to edit

The final invoice after customizing to the order fields is shown below:

The final PDF invoice of an order

Conclusion

Obtaining the invoices with your own customized details like company logo, addresses, etc is definitely an added advantage for the store owners. In-built templates and code editor features allow you to generate invoices with custom details.

If interested, do read our article on adding custom checkout fields to WooCommerce invoices.