How to customize invoice from predefined layout in WooCommerce

Invoice has a vital role when it comes to online business. The store owner may want to include different types of information in the invoice depending upon his business. Similarly, the customer would also want to receive an invoice which actually contains relevant information as proof of their purchase.

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

First and foremost, install and activate the plugin into your WooCommerce store. Navigate to 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.

The values configured in the General Settings like the company logo, addresses, etc. contains common information that is used across all the document types. If these elements are configured in general settings then those values will be populated by default in all the document types wherever applicable. However, provisions are given for overriding the general configurations from the individual document type settings.

WooCommerce Invoice-General Settings

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 customization options along with inbuilt layouts are integrated into the Customize tab of the invoice settings as shown below.

WooCommerce Invoice or packing-Invoice Settings- Customize

Some of the predefined invoice templates available in the plugin are classic, regal and imperial which can be accessed from the change layout option placed at the upper left corner of the window.

WooCommerce Invoice-Layouts

You can select any template from the available options and proceed further to customize it. The visibility of each element in the invoice can be controlled by the toggle button incorporated in this tab. Additionally, some generic elements like the font size, style, color, and other specific attributes of each element can also be changed as per your need. 

Let us go over a few customization attributes. Some generic elements that can be found most commonly across all elements are:

• • • Text: Allows you to enter a custom text for the respective attribute.
    • Font Size: Allows you to define the font size for the attribute. Enter a numeric value in terms of pixels.
    • Style: Allows you to select a text style. It consists of two choices; Normal and Bold.
    • Text Color: Allows you to select a text color.
      
      

      WooCommerce Invoice-Customize Tab-Common attributes

    • Text Align: Allows you to set the alignment of text.
      It contains two choices; right and left.
    • Title: Allows you to set a custom title.
      
      

      WooCommerce Invoice-Customize Tab-Common attributes-Text align and Title

Other specific customization fields are:

Company Logo: Use this option to set the company logo specifically for the invoice. If the logo is already uploaded in the general settings, then it will be populated here by default.

• Company Logo:
  • Display: Allows you to add either company logo or company name to the invoice.
  • Logo Width and Height: Allows you to adjust the width and height of the logo in pixels.
  • Extra Details:  Allows you to include additional text, which will be placed below the company logo or name. Enter the text “none”, for not including any additional text.
  • Extra Font Size: Allows you to define the font size, applicable only for the company name.
  • Header Color:
    
    

    WooCommerce Invoice-Customize Tab-Company Logo fields

• Invoice Number: 
  • Invoice Date: Format: Allows you to select a date format.
  • Order Date: Format: Allows you to select a date format.
    
    

    WooCommerce Invoice-Customize Tab-Format

• 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.
• This field contains the following elements for customizing the product table:
  • Head Color: Allows you to set the color for the product table header.
  • Text Color: Allows you to set the color for the text in the product table header section.
  • SKU Align: Allows you to set alignment for the SKU in the product table.
    It contains three choices; Right, Left and Center.
  • Product Align: Allows you to set alignment for the product in the product table. The choices are; Right, Left, and Center.
  • Quantity Align: Allows you to set alignment for the number of products in the product table. It also offers; Right, Left, and Center options.
  • Price Align: Allows you to set alignment for the price of products in the product table.
  • Total Price Align: Allows you to set alignment for the total price of products in the product table.
  • Body Color: Allows you to set the color for the body text of the product table.  
  • SKU: Allows you to set custom text for the table column indicating SKU information.
  • Product:  Allows you to set custom text for the table column indicating product name.
    
    

    WooCommerce Invoice-Customize Tab-Product table

• Preview: 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

• Code Editor: 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

• Help: 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