How to customize invoice from predefined layout in WooCommerce

Last updated on October 7, 2021

If you are using version 4.3 of the plugin, please refer to this article for guidance related to dynamic customizer.

WooCommerce PDF Invoices, Packing Slips, Delivery Notes & Shipping Labels plugin comprises pre-defined invoice templates from which you can design the invoice with the relevant data of your preferences.

Video tutorial

Watch the tutorial to know how an invoice can be customized easily.

Customize templates

Firstly, install and activate the plugin into your WooCommerce store.
Then, navigate to the Invoice/Packing > Invoice menu from your WordPress dashboard.
Next, head on to the Customize tab.

Click on Create new template. As a result, a popup appears with all the predefined templates offered by the plugin.

This image has an empty alt attribute; its file name is layout-invoice.png

Furthermore, select a template from the popup to customize it.

Note: The company logo, addresses, etc are populated from the general settings. You can further modify it from the customize tab.

Toggles to enable/disable

Switch the toggle button to enable/disable to have that element in the invoice. Expand an option to change the font size, style, color, etc of each item in the invoice.

Customization properties

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

Texts properties

Text: Allow to enter a custom text for the respective attribute.
Font Size: Allow to define the font size for the attribute. Enter a numeric value in terms of pixels.
Style: Allow to select a text style. It consists of two choices; Normal and Bold.
Text Color: Allow 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

Company logo

Display: Select company logo or company name to add to the invoice.
Logo Width and Height: Allow to adjust the width and height of the logo in pixels.
Extra Details: Allow 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: Allow 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

Product Table: Customize the product table items like product SKU, product name, quantity, and total price. Following elements are available for customizing the product table:
- Head Color: Allow to set the color for the product table header.
- Text Color: Allow to set the color for the text in the product table header section.
- SKU Align: Allow to set alignment for the SKU in the product table.
  It contains three choices; Right, Left and Center.
- Product Align: Allow to set alignment for the product in the product table. The choices are; Right, Left, and Center.
- Quantity Align: Allow to set alignment for the number of products in the product table to Right, Left, and Center options.
- Price Align: Allow to set alignment for the price of products in the product table.
- Total Price Align: Allow to set alignment for the total price of products in the product table.
- Body Color: Allow to set the color for the body text of the product table.
- SKU: Allow to set custom text for the table column indicating SKU information.
- Product: Allow to set custom text for the table column indicating product name.

Sample Preview

Click on Preview to get a sample preview of the recent order’s invoice in 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

Switch to the code editor and for additional customization provisions.

To sum up, the plugin offers predefined templates for documents and allows additional customizations too. Know more about customizing using the code editor.

Was this article helpful?
Yes, thanks!Not really

This article posted in Customizations, Documentation, Knowledge Base, Print Invoice, Packing Slip, Delivery Note & Label for WooCommerce

Written by

Shesna

Shesna is a technical content writer for WebToffee. She is familiar in working closely with the SMEs to break down complex technical information into a concise, easy to understand manner.

Comments (30)

Pamela

October 19, 2021

Hi, How can I change the packing slip size from a 8.5X11 to 4X6 when printing.

Reply
- Mike
  
  October 20, 2021
  
  Hi Pamela,
  
  You can customize the size by altering the packing slip template HTML (Invoice/Packing > Packing slip > Customize > Code) by adding CSS for controlling width and height.
  eg: .wfte_invoice-main{max-width:384px; max-height:576px;}
  
  Reply
kyle

October 14, 2021

Hi there,

I’m trying to add a text in my invoice but after inputting the HTML it in the template, it isn’t formatted correctly.
Please advise!

Reply
- Mike
  
  October 17, 2021
  
  Hi Kyle,
  
  Thanks for reaching out. Since it is a personalized requirement, kindly share your invoice template HTML (Invoice/Packing > Invoice > Customize > Code editor) and explain the requirement via this link.
  
  Reply
Karina Sanchez

May 26, 2021

Hi, How can I calculate and add VAT?

Reply
- Mark
  
  May 27, 2021
  
  Hi Karina,
  
  Please set up tax in woocommmerce to have VAT in your site. Hope this article helps.
  
  Reply
Kam Sandur

April 23, 2021

Is it possible to use my own template rather than one of the ones provided by the plugin?

Reply
- Mark
  
  April 25, 2021
  
  Hi Kam,
  
  Using the HTML code editor provided in the plugin,you can edit any existing template to look entirely different. You can remove whole default HTML code and add your own.
  
  Reply
giroz

March 25, 2021

How to make the paid or received stamp appear only when the order is paid online? and then, don’t show the stamp when the order is not paid?

Reply
- Mark
  
  March 31, 2021
  
  Hi Giroz,
  
  Please add below code snippet to your active theme’s functions.php
  add_filter('wf_pklist_toggle_received_seal','wf_pklist_toggle_received_seal_fn', 10, 3); function wf_pklist_toggle_received_seal_fn($is_enable_received_seal, $template_type, $order) { return ($order->get_status()=='completed'); }
  
  Reply
Abdurauf Fattakhov

February 17, 2021

how do I add a payment due date to a proforma invoice?

Reply
- Mark
  
  February 19, 2021
  
  Hi Abdurauf,
  
  You can print any data present in order details using the “add order meta” option in the plugin using their corresponding meta key.
  
  Reply
Kyaw Thura

January 23, 2021

Hello,

I would like to edit the text-alignment of the product column to right. When I search for the option in the code editor, I only found the option to edit the element. I searched for the “wfte_product_table_body wfte_table_body_color” in the css file of admin & public folder at the wordpress plugin editor, I don’t find class there. Please guide me how to edit the styles of the whole table. Thanks.

Reply
- Mark
  
  January 25, 2021
  
  Hi Kyaw,
  
  Please reach us via support and share your active template HTML code.
  
  Reply
Shivam Bansal

December 29, 2020

My company logo is in black and white. How do I keep it in colour?

Reply
- Mark
  
  December 29, 2020
  
  Please submit a ticket here with the logo URL.
  
  Reply
Ryan MacKenzie

December 11, 2020

Is it possible to display/print the Purchase Order Number ?

Reply
- Mark
  
  December 16, 2020
  
  Hi,
  
  The order number is already included in the invoice templates by default.
  
  Reply
Henry

November 17, 2020

Hello, it is possible to increase the product image size?

Reply
- Mark
  
  November 17, 2020
  
  Hi Henry,
  
  Please add the below CSS to the template HTML of the invoice by going into the code view mentioned in the above article. The below code will set the image width as 100px. You can alter it according to the requirement.
  
  .wfte_product_image_thumb{ max-width:none !important; max-height:none !important; width:100px; }
  
  Reply
Lorri C Nevil

September 18, 2020

I need to be able to print the main product, plus all their options and their pricing. I’ve had one I’ve used for years, and it only prints the total now. It’s very important to be able to do that.
Will your product do that?
Thanks

Reply
- Mark
  
  September 28, 2020
  
  Hi Lorri,
  
  Using our plugin you can print the price of each product and if they are variation, the option names will also be included.
  
  Reply
Andrew

July 22, 2020

Hi, nice product. Is it possible to change the default margins so they are not so close to the edge of the paper? Right now I am adjusting the margins before I print.

Reply
- Mark
  
  July 23, 2020
  
  You can adjust the margin from the Customizer via the code editor.
  
  Reply
Jonathan

June 29, 2020

How can I change the default invoice sent by woocomerce by this one ?

When I test with “Order Actions” and I click on “Email Invoice / order details to customer” it send the Woocommerce default template. How can I send the one built with your plugin ?

Reply
- Mark
  
  July 8, 2020
  
  The plugin attached the PDF with woocommerce email. You can edit the woocommerce templates from Woocommmerce settings > Emails itself.
  
  Reply
  - Keshav
    
    July 30, 2020
    
    Hello i want to know can we hide product name on the invoice and show only sku and price.
    
    Reply
    - Mark
      
      August 4, 2020
      
      You can turn off product column from Product Table section on the right side panel from Customize page.
      
      Reply
Adrian

October 25, 2019

Hi
I’m unclear as to where the invoice gets its data from. Specifically I want the product table to display pricing with tax inc. I can’t see where I can set this attribute unless it is controlled by woocommerce admin settings, in which case the Tax tab probably controls tax display but it doesn’t mention printed invoices. In any case I’ve selected it to show tax inclusive in both the shop and the cart. Is that why I should expect to see the invoice line items to display tax inclusive was well?

Reply
- Mark
  
  October 25, 2019
  
  Hi,
  
  Order details are printed on the invoice as how they are stored in the data order details.(Woocommercer > Orders > Order edit page). You can set to show inclusive or exclusive tax in invoices under Invoice /Packing list > General > Advanced > Show tax.
  
  Reply

Cookie	Description
PHPSESSID	This cookie is native to PHP applications. The cookie is used to store and identify a users' unique session ID for the purpose of managing user sessions on the website. The cookie is a session cookie and is deleted when all the browser windows are closed.
viewed_cookie_policy	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not a user has consented to the use of cookies. It does not store any personal data.

Cookie	Description
_ga	This cookie is installed by Google Analytics. The cookie is used to calculate visitor, session, campaign data and keep track of site usage for the site's analytics report. The cookies store information anonymously and assigns a randomly generated number to identify unique visitors.
_gat_gtag	Identification code of website for tracking visits.
_gid	This cookie is installed by Google Analytics. The cookie is used to store information on how visitors use a website and helps in creating an analytics report of how the website is doing. The data collected including the number visitors, the source where they have come from, and the pages visited in an anonymous form.
_hjid	Hotjar cookie. This cookie is set when the customer first lands on a page with the Hotjar script. It is used to persist the random user ID, unique to that site on the browser. This ensures that behavior in subsequent visits to the same site will be attributed to the same user ID.
_hjIncludedInSample	This cookie is set to let Hotjar know whether that visitor is included in the sample which is used to generate heatmaps, funnels, recordings, etc.
has_recent_activity	This cookie is used to signal to the code repository website if the user has browsed other website resources during the current session.
tk_ai	Gathers information for our own first-party analytics tool about how our services are used. A collection of internal metrics for user activity and is used to improve user experience.
tk_lr	This cookie is set by the JetPack plugin on sites using WooCommerce. This is a referral cookie used for analyzing referrer behavior for Jetpack.
tk_or	This cookie is set by the JetPack plugin on sites using WooCommerce. This is a referral cookie used for analyzing referrer behavior for Jetpack.
tk_qs	Gathers information for our own first-party analytics tool about how our services are used. A collection of internal metrics for user activity and is used to improve user experience.
tk_r3d	The cookie is installed by JetPack. Used for the internal metrics for user activities to improve user experience.

Cookie	Description
_fbp	This cookie is set by Facebook to deliver advertisements when they are on Facebook or on a digital platform powered by Facebook advertising after visiting this website.
fr	The cookie is set by Facebook to show relevant advertisements to the users and measure and improve the advertisements. The cookie also tracks the behavior of the user across the web on sites that have Facebook Pixel or Facebook social plugin.

How to customize invoice from predefined layout in WooCommerce

Video tutorial

Customize templates

Toggles to enable/disable