How to Get a PDF Invoice in WooCommerce

Last updated on September 10, 2021

How to Get a PDF Invoice in WooCommerce

A seller’s responsibility doesn’t end with the 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, and 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.

Step 1: Install and activate the plugin

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 from the General Settings window. The general settings let you configure the company logo, address details, RTL support, and many more.

Step 2: Basic setup of the WooCommerce PDF invoice

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:

Invoice settings- general
  1. Enable invoice: Disabling will remove the invoice view/print provisions for orders, still the admin can customize the template and set the invoice number.
  2. Group by category: Choose ‘Yes’ to group products falling under the same category in the invoice.
  3. Use order date as invoice date: If you choose ‘No’, the invoice date will be the same as the date you printed, downloaded or attached invoice to the email.
  4. Sort products by: Here you can choose to sort products by the ascending or descending order of product name or product SKU.
  5. 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.
  6. Attach invoice PDF in the email: On choosing ‘Yes’ the PDF version of the currently active invoice template will be attached to the order email.
  7. Enable Print Invoice option for customers: On choosing ‘Yes’ you will able to display a print invoice button for customers in the order mail, order listing page, and order summary.
  8. Show print button for only chosen statuses : Choose statuses on which you need to generate invoices.
  9. Enable variation data: To include variation data of the product in the invoice, choose ‘Yes’.
  10. Total tax display: Choose how you want to display the total tax on the invoice.
Total tax column display
Total tax column display

11. Individaul tax column in product table: Choose ‘Yes’ to categorize different taxes in separate columns within the invoice.

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

Step 3: Invoice number settings

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

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

Choose invoice number format
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

    If you are choosing an invoice number pattern involving a prefix or/and suffix, you will need to configure the following settings as well.

  • 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 4: Customize and preview the invoice

    With the customizer, you can customize the appearance of invoice. 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.

    Customization of invoice template
    Invoice customization

    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.
    Choose a layout for invoice from the given options
    Choose an invoice layout
  • 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.
  • 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.

  • Preview WooCommerce invoice by entering the corresponding order number
    Enter the order number to preview the invoice
  • You can even switch to the code editor, to make additional customizations other than the one listed in the visual editor.

  • Invoice customization using code editor
    Invoice-customization via the code editor
  • 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:

  • Help section for code-editor based invoice customization
    Help section for code-editor based invoice customization
  • Save and activate the template to use it further for your invoice.
  • Step 5: Add additional/meta fields to invoice

    This step may not be necessary for everyone. But it helps to customize the invoice as per your store and customer needs.

    The advanced invoice settings can be used to add order/product metadata in WooCommerce invoice.

    WooCommerce Invoice/Pack Slip-Invoice Advanced
    WooCommerce invoice advanced settings
    • 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
    Add 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
    Search for meta fields to add to invoice
  • 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
    Add product meta field to WooCommerce invoice
  • 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 the 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-invoice-pdf
    Sample invoice

    Conclusion

    It’s nearly impossible to run an online store without serving invoice documents to your customers. You may not find it easy to generate invoices if you are selling internationally and have to comply with different tax and invoice standards. But with the WooCommerce invoice plugin, you can minimize your efforts of generating invoices to great extent.