How to customize invoice from predefined layout in WooCommerce
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 the 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.
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.
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.
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.
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.
It contains two choices; right and left.
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
- Invoice Date: Format: Allows you to select a date format.
- Order Date: Format: Allows you to select a date 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.
Comments (22)
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?
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');
}
Abdurauf Fattakhov
February 17, 2021
how do I add a payment due date to a proforma invoice?
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.
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.
Mark
January 25, 2021
Hi Kyaw,
Please reach us via support and share your active template HTML code.
Shivam Bansal
December 29, 2020
My company logo is in black and white. How do I keep it in colour?
Mark
December 29, 2020
Please submit a ticket here with the logo URL.
Ryan MacKenzie
December 11, 2020
Is it possible to display/print the Purchase Order Number ?
Mark
December 16, 2020
Hi,
The order number is already included in the invoice templates by default.
Henry
November 17, 2020
Hello, it is possible to increase the product image size?
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; }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
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.
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.
Mark
July 23, 2020
You can adjust the margin from the Customizer via the code editor.
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 ?
Mark
July 8, 2020
The plugin attached the PDF with woocommerce email. You can edit the woocommerce templates from Woocommmerce settings > Emails itself.
Keshav
July 30, 2020
Hello i want to know can we hide product name on the invoice and show only sku and price.
Mark
August 4, 2020
You can turn off product column from Product Table section on the right side panel from Customize page.
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?
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.