How to Customize Invoice, Packing Slip, Delivery Note, Shipping Label and Dispatch Label

All-In-One - Generate PDF Invoice, Packing Slip, Labels & Delivery Note.

Used by 4,000+ WooCommerce Stores

#1 in Customer Satisfaction

WebToffee Guarantee: Get Your Money Back if You Are Not Satisfied With The Product

Buy Now!

This article explains how to customize Invoice, Packing Slip, Delivery Note, Shipping Label and Dispatch Label templates in the Print Invoice, Packing Slip, Delivery Note & Label Plugin for WooCommerce.
To know more about the plugin features, refer to the Product page. To know how to set up the plugin, read How to Setup Print Invoice, Packing Slip, Delivery Note & Label Plugin for WooCommerce.

Getting started

The Customize tab present in Invoice, Shipping Label, Packing Slip, Delivery Note, and Dispatch Label section helps you personalize your shipping documents in Print Invoice, Packing Slip, Delivery Note & Label Plugin for WooCommerce.

customization

Once you click on the Customize tab, you will be taken to the template customization section. It mainly consists of two parts: the Preview section on the left and the Field Attributes section on the right. Based on the Invoice settings configured, the template will appear as shown below:field atrribute customization 1

By default, the plugin shows the first invoice template for customization. To customize other templates, go to the Templates section in the invoice settings (or packing slip & delivery note settings for respective templates). You can activate a template from the available standard templates as shown below:

invoice template popup

Let us now understand the field attributes for customizing invoice templates. The attributes can be enabled or disabled with the help of the i/o (enable/disable) button provided on the right of each attribute.

Field Attributes1

The following are the field attributes for Invoice template:

  • Company Logo: When you enable this field, the invoice contains the company logo or the company name. You can customize the size of the logo, font size, or add additional details below the logo/name.invoice Company Logo
    This field contains the following settings for customizing the Company Logo/Company Name –

    • Display: Allows you to add either company logo or company name to the invoice.Company Invoice Display
    • Width: Allows you to define the width of the logo or name. Enter a numeric value in terms of pixels or set it to auto size.
    • Height: Allows you to define the height of the logo or name. Enter a numeric value (will be in terms of pixels) or set it to auto size.
    • 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.
    • Font Size: Allows you to define the font size of the company name. Enter a numeric value (will be in terms of pixels).

 

  • Invoice Number: When enabled, the invoice number will be displayed on the invoice. Based on the configuration set in the Invoice settings, that is, either using order number as invoice number or setting custom invoice number, the invoice number will be displayed accordingly.
    C Invoice InvoiceNo
    This field contains the following settings for customizing Invoice Number –

    • Font Size: Allows you to define the font size for the invoice number. Enter a numeric value (will be in terms of pixels).
    • Text: Allows you to enter a custom text for the invoice number.
    • Style: Allows you to select a text style.
      It consists of two choices; Normal and Bold.
      C Invoice Font Style 1
    • Color:  Allows you to select a text color.C Invoice Color
  • Invoice Date: When enabled, invoice date will be displayed on the invoice. You can customize the date format, font size, style, and color.
    C Invoice InvoiceDate 1
    This field contains the following settings for customizing the Invoice Date –

    • Format: Allows you to select a date format.C Invoice DateFormat
    • Font Size: Allows you to define the font size for the invoice date. Enter a numeric value in terms of pixels.
    • Text: Allows you to enter a custom text for invoice date option.
    • Style: Allows you to select a text style.
      It consists of two choices; Normal and Bold.
    • Color:  Allows you to select a text color.

 

  • Order Date: When enabled, displays the order date on the invoice. You can customize the date format, font size, style, and color.
    C Invoice OrderDate
    This field contains the following settings for customizing order date –

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

 

  • From Address: When enabled, displays ‘from address’ on the invoice. You can customize the title, text alignment, and color.
    C Invoice InvoiceFromAddr
    This field contains the following settings for customizing ‘from address’:

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

 

  • Billing Address: When enabled, displays the billing address on the invoice. You can customize the title, text alignment, and color.
    C Invoice InvoiceBillAddr
    This field contains the following settings for customizing the billing address:

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

 

  • Shipping Address: When enabled, displays the shipping address on the invoice. You can customize the title, text alignment, and color.
    C Invoice InvoiceShipAddr
    This field contains the following settings for customizing shipping address:

    • Title: Allows you to set a custom title for indicating the shipping address.
    • Text Align: Allows you to set the alignment of the text.
      It contains two choices: right and left.
    • Color:  Allows you to select a text color.

     

  • Tel Field: When enabled, displays the telephone number on the invoice. You can customize the font size, title, text alignment and color.
    C Invoice TelField
    This field contains the following settings for customizing the telephone field:

    • Font Size: Allows you to define the font size for the telephone number. Enter a numeric value (will be in terms of pixels).
    • Text: Allows you to set a custom text.
    • Text Align: Allows you to set the alignment of text.
      It contains two choices; right and left.
    • Color:  Allows you to select a text color.

 

  • VAT Field: When enabled, displays the VAT number on the invoice. You can customize the font size, title, text alignment and color.
    VAT Field
    This field contains the following settings for customizing the VAT field:

    • Font Size: Allows you to define the font size for the VAT number. Enter a numeric value (will be in terms of pixels).
    • Text: Allows you to set a custom text.
    • Text Align: Allows you to set the alignment of text.
      It contains two choices; right and left.
    • Color:  Allows you to select a text color.

 

  • SSN Field: When enabled, displays your SSN number on the invoice. You can customize the font size, title, text alignment and color.
    SSN FieldThis field contains the following settings for customizing the SSN field:

    • Font Size: Allows you to define the font size for your SSN. Enter a numeric value (will be in terms of pixels).
    • Text: Allows you to set a custom text.
    • Text Align: Allows you to set the alignment of text.
      It contains two choices; right and left.
    • Color:  Allows you to select a text color.

 

  • Shipping Method: When enabled, displays the shipping method in the invoice. You can customize the title, text alignment, and color.
    C Invoice InvoiceShipAddr
    This field contains the following settings for customizing the shipping method:

    • Font Size: Allows you to define the font size for the shipping method title. Enter a numeric value in terms of pixels.
    • Text: Allows you to set a custom title.
    • Text Align: Allows you to set the alignment of the text.
      It contains two choices: right and left.
    • Color:  Allows you to select a text color.

     

  • Tracking Number: When enabled, tracking number will be displayed on the invoice. You can customize the font size, text alignment, and color.C Invoice Invoice TrkgNo
    This field contains the following settings for customizing tracking number:

    • Font Size: Allows you to define the font size for the tracking number. Enter a numeric value in terms of pixels.
    • Text: Allows you to set a custom title.
    • Text Align: Allows you to set the alignment of text.
      It contains two choices: right and left.
    • Color:  Allows you to select a text color.

 

  • Product Table: When enabled, the product table will be displayed on the invoice. 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
    This field contains the following settings 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 quantity 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.
    • Qty: Allows you to set custom text for the table column representing the quantity of the products.
    • Price: Allows you to set price for each product.
    • Total: Allows you to set custom text for the table column representing the total price of the products.
  • Extra Charges Fields: The extra charges fields are exclusively available in the invoice settings.extra charges field
    It contains the following:

    • Sub Total: Allows you to set a custom text for the title representing subtotal information.
    • Shipping: Allows you to set a custom text for the title representing shipping cost.
    • Cart Discount: Allows you to set a custom text for the title representing the cart discount rate.
    • Order Discount: Allows you to set a custom text for the title representing order discount rate.
    • Total Tax: Allows you to set a custom text for the title representing the total calculated tax.
    • Total: Allows you to set a custom text for the title representing total cost after including all taxes and discount rates applied.
    • Fee: Allows you to set a custom text for the title representing fee.
    • Payment Method: Allows you to set a custom text for the title representing the payment method.

Unlike other field attributes, this field cannot be disabled and will appear in the invoice product table as shown in the screenshot below:product table image

 

Once all the settings are configured, click the Save & Activate button in the top right corner of Field Attributes section.

save and activate

Now the new template is activated and will be available in the Custom Templates section of the respective shipping document settings (in this document, Invoice settings).

Note: Whenever a template is customized and saved, a new template is generated in the Custom Templates section of the respective shipping document settings.

Screenshot of Customization of Packing Slippacking slip

Screenshot of Customization of Delivery Notedelivery note

Screenshot of Customization of Shipping Labelshipping label

Screenshot of Customization of Dispatch Labeldispatch label

Screenshot of Customization of Address Label

address label

Check the product page to purchase the plugin or to know more about the features. You can view screenshots of all shipping documents as well.

All-In-One - Generate PDF Invoice, Packing Slip, Labels & Delivery Note.

Used by 4,000+ WooCommerce Stores

#1 in Customer Satisfaction

WebToffee Guarantee: Get Your Money Back if You Are Not Satisfied With The Product

Buy Now!

Leave a Reply

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