How to Get a PDF Invoice in WooCommerce

A seller’s responsibility doesn’t end with shipping and delivery of the products to the customers. It is equally important to deliver all the documents related to purchase for establishing credibility among customers toward the store. Which will in turn help boost the sales of your store by retaining the customers. These documents consist of an invoice, packing slip, delivery note, shipping label etc.

Through this article let me take you through the process of generating a PDF invoice for a WooCommerce store. WebToffee’s Woocommerce PDF Invoices and packing slips plugin makes it easier than ever. If you are interested in getting more information on the plugin you can visit the product page.

Installation of the Plugin

After purchasing the Print Invoice, Packing Slip, Delivery Note & Label Plugin for WooCommerce, the plugin will be available as a zip file in the API Downloads section of your MY ACCOUNT page.

  1. Download the zip file from API Downloads by logging into your WebToffee MY ACCOUNTS page.
  2. Log in as the WordPress Admin of your online store.
  3. Navigate to Plugins > Add New to upload the downloaded plugin.
  4. Choose the plugin file to upload.
  5. Finally, activate the plugin.

Generating PDF Invoice

Once you have installed and activated this plugin, a new section is available in the WordPress menu titled Invoice/Packing. You can get to this section by navigating to the Invoice/Packing > Invoice menu from your WordPress dashboard. When you click on the Invoice sub menu, you will be taken to Invoice settings.

All the generic settings that need to be used across all the documents can be configured in the General Settings window. It contains provisions to configure the company logo, address details, RTL support and many more. To know more about general settings configurations, refer here.

You can set up an invoice in three easy steps:

Step 1: Basic Setup

In the basic set up you can configure invoice specific generic items and the invoice number.

The settings included in the general tab are as shown below:

WooCommerce Invoice or Packing Slip- Invoice-General Settings

WooCommerce Invoice or Packing Slip- Invoice-General Settings

  • Enable invoice: Disabling will remove the invoice view/print provisions for orders, still the admin can customize the template and set the invoice number.
  • Generate Invoice for Order Statuses– This option lists all the order statuses for which invoices can be generated. You can select multiple statuses based on your requirements.
  • Attach invoice PDF in the email: PDF version of the currently active invoice template will be attached to the order email.
  • Enable Print Invoice option for customers – You will able to display a print invoice button for your customers.
  • Enable variation data: To include variation data of the product in the invoice, enable this option.
  • Upload signature: If you want the signature to be displayed in the invoice, upload it in this field.
  • Custom logo for invoice: To have a custom logo different from that uploaded in the general settings page, upload it in this field. If left blank, then the default logo will be populated.

The settings can be saved by clicking on the Update Settings button.

Next, you can set up a custom invoice number with prefix/suffix/number series or even mirror the order number as invoice number respectively.

WooCommerce Invoice or packing-Invoice Settings- Invoice Number

WooCommerce Invoice or packing-Invoice Settings- Invoice Number

  • Invoice number format: Specify the format in which the invoice has to be generated. For example: [prefix][number][suffix]

    Invoice number format

  • Use the order number as invoice number: Choose Yes to use the order number as the invoice number. If you want to generate a custom invoice number then select No and input the necessary details into the populated fields. The fields are populated on the basis of the number format previously selected.
    • Invoice Start Number: Enter the Invoice Start Number.

      Custom invoice number

      Custom invoice number

  • Invoice Number Prefix: Enter the prefix which will be added before the invoice number. You can use any of the date formats or alphanumeric characters in this field as shown in the popup.

    Date formats

    Date formats

  • Invoice Number Suffix: Enter the suffix which will be added after the invoice number. You can use any of the date formats or alphanumeric characters as a suffix as shown in the image above.
  • Invoice Length: Indicates the total length of the invoice number. If the length of the generated invoice number is less than the provided, it will be padded with ‘0’. E.g if you specify 7 as invoice length and your invoice number is 8009, it will be represented as 0008009 in the respective documents.

Update and reset the invoice number format settings by clicking on the Update and Reset button.

Step 2: Customize and Preview

With the customizer, you can personalize the overall appearance of your document. You are provided with inbuilt themes to choose from as well as you can create new themes or templates from the existing ones. Additionally, toggle controls are given at the right-hand side of the window, which when enabled or disabled will be reflected in the sample invoice template.

WooCommerce Invoice or packing-Invoice Settings- Customize

WooCommerce Invoice or packing-Invoice Settings- Customize

To create a new invoice template,

  1. Select a template from the Create new template option.
  2. From the inbuilt templates that pop up, choose a layout.

    Invoice/Pack Slip-Theme

    Invoice/Pack Slip-Theme

  3. The chosen layout will then be displayed in the customize window. The elements that are already configured from General Settings will be auto-populated. Users can make the necessary changes to the layout using the toggle options.
  4. Prior to activating the layout, you can have a sample preview of the recent order’s invoice in the PDF format. To get the preview of a specific order, key in with the respective order number in the field provided.

    WooCommerce Invoice or packing-Invoice Settings- Customize-Preview

    WooCommerce Invoice or packing-Invoice Settings- Customize-Preview

  5. You can even switch to the code editor, to make additional customizations other than the one listed in the visual editor.

    WooCommerce Invoice or packing-Invoice Settings- Customize-Code Editor

    WooCommerce Invoice or packing-Invoice Settings- Customize-Code Editor

  6. While making changes via code editor it would be better for you to refer the help which briefs about placeholders, alternate classes for RTL support, etc as shown below:

    WooCommerce Invoice or packing-Invoice Settings- Customize-Code Editor-Help

    WooCommerce Invoice or packing-Invoice Settings- Customize-Code Editor-Help

  7. Save and activate the template to use it further for your invoice.

Step 3: Advanced Settings

The advanced invoice settings can be used to configure additional information with respect to order/product meta.

WooCommerce Invoice/Pack Slip-Invoice Advanced

WooCommerce Invoice/Pack Slip-Invoice Advanced

  • Order meta fields: Append additional order information in the invoice by selecting the required item from the drop-down. You can select a field from the list of default fields or click the Add Existing Order Meta Field button to create custom meta fields by providing a custom Field Name and the respective meta key for the field. The order meta keys can be found in the custom field section in the WooCommerce Order page of a product.
    WooCommerce Invoice:Pack Slip-Invoice Advanced-Order meta fields

    WooCommerce Invoice/Pack Slip-Invoice Advanced-Order meta fields

    To add other order meta details other than the ones displayed in the drop-down, click on Add Existing Order Meta Field.

    WooCommerce Invoice:Pack Slip-Invoice Advanced-Add Order meta fields

    WooCommerce Invoice/Pack Slip-Invoice Advanced-Add Order meta fields

  • Product meta fields: Select/add additional product information in the invoice. Click the Add Product Meta to add a new product meta field by providing a custom Field Name and the respective meta key for the field. The product meta keys can be found in the custom field section of the product page.

    WooCommerce Invoice:Pack Slip-Invoice Advanced-Product meta fields

    WooCommerce Invoice/Pack Slip-Invoice Advanced-Product meta fields

  • Custom footer for invoice: Key in with a custom footer for the invoice in the text area. If left blank, then the default footer from General settings will be loaded.

The settings can be saved by clicking on the Update Settings button.

On placing an order, the PDF version of the active invoice template will be attached to the order mail with download and print provisions as shown below.

WooCommerce invoice attached in e-mail

WooCommerce invoice attached in an e-mail

You can even print/download the invoice from WooCommerce Orders page as shown below:

WooCommerce Order Page-Print shipments

WooCommerce Order Page-Print shipments

A sample invoice will be as shown below:

Sample WooCommerce PDF Invoice

Sample WooCommerce PDF Invoice

For detailed information, you can refer to the Product Page.

  • Was this article helpful ?
  • YesNo

Leave a Reply

Your email address will not be published. Required fields are marked *