Overview
Invoice
Packing Slip
Delivery Note
Shipping Label
Dispatch Label
Address Label
Picklist
Proforma Invoice
Credit Note
Third-Party Compatibility
Multilingual Support
Advanced Topics
FAQ
ChangelogPDF invoice, Packing Slips, Delivery Notes & Shipping Labels plugin for WooCommerce provides you with predefined templates for Woocommerce documents with additional customization options.
Getting started
- Navigate to Invoice/Packing Slip from the WordPress dashboard.
- Choose the document type and go to Customize tab.
Customizing invoices using the code editor
Go to Invoice > Customize tab. There are two ways to customize invoices using code editor:
- HTML editor – for making changes for individual blocks
- Document code editor
HTML editor for blocks
To edit the block via code:
- Select a block and click on the HTML editor(Block) from the Editor pane. The HTML editor for blocks will open up.
- You can make necessary changes to the editor and click on the Apply changes button.
- Click on Close or Cancel to exit the editor.
Code editor (Document)
To edit the whole document via code:
- Click on the HTML editor(Document) icon in the header. The HTML editor box will open up.
- You can make necessary changes to the editor and click on the Apply changes button.
- Click on Close or Cancel to exit the editor.
- You can also edit each individual block via code from the Block section.
- Altering the HTML code without proper syntax may cause unexpected behavior of the customizer. You may not be able to drag-and-drop blocks into the preview pane or edit them.
To read more on dynamic customizer for invoices, refer to this article.
Customising other documents using the code editor
Step 1: Choose the document type and go to Customise tab. In the below example, Packing Slip > Customize tab is opened up.
Step 2: Click on Create new template (Change layout if the template is not active) and select a template you want to customize.
The font size, style, color, and other specific attributes of a document can be changed.
Step 3: Switch to the Code Editor tab. You can edit the template from the code editor, add custom CSS or link to the CSS file. After finishing the customization, you can save and activate the template
- Was this article helpful?
- Yes, thanks!Not really
Comments (8)
Paul
November 30, 2022
Hello,
How to remove the product’s caterogies of the products list ?
Mike
December 4, 2022
Hi Paul,
Thanks for reaching out. You can disable the “Group products by ‘Category'” option located on the general tab of the invoice settings page to disable the category-wise display in the invoice document.
Mauricio
December 14, 2020
Hi! I own a flower shop, we deliver gifts and we are growing, so I need print a full page with custom fields and duplicated info, to give a elaboration order and a delivery note and print the message from my clients in the same page, but I can’t change the order of items and give another style, please help me
Mark
December 16, 2020
Hi Mauricio,
You can use the filter here to add custom place holders for each custom fields and use them as you need in the template editor.
Mark Mason
June 19, 2019
Hi.
Where are you saving these templates? is there a way to edit them directly from the code (wordpress theme directory)? I want to create a really customized shipping label template with fields that you don’t provide and custom styling.
Mark
June 20, 2019
Hi Mark,
We will get back to you on the support ticket you submitted.
waqas
May 29, 2019
Code editor doesn’t the data
Mark
May 29, 2019
Hi,
Your query is not clear to us. Please reach us via support and brief the issue.