Since 28th December 2022, this plugin version has been discontinued for purchase. However, support will be continued for existing users. Post the aforementioned date, users who purchase the plugin, which now is made available as multiple add-ons, must refer to their corresponding setup guides. The drag-and-drop customizer feature that previously supported invoice customizations will soon be available for purchase, with extended support for other document types.

WooCommerce PDF Invoices, packing slips and credit notes plugin | WooCommerce Shipping labels, Dispatch labels and Delivery notes plugin | WooCommerce Address labels plugin | WooCommerce Picklists plugin | WooCommerce Proforma invoices plugin

Since 28th December 2022, this plugin version has been discontinued for purchase. However, support will be continued for existing users.

Customizing WooCommerce documents using the code editor

Last updated on May 8, 2023

PDF 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.

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.

HTML editor for blocks (click to expand)

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

While making changes via code editor it would be better for you to refer to the help which briefs about placeholders, alternate classes for RTL support, etc.

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

WebToffee Team

WebToffee Team is a group of WordPress and WooCommerce enthusiasts consisting of expert developers, testing engineers, technical support engineers, and SMEs.

Comments (12)

Mitz

March 22, 2023

Hi,
How can I alter the product_table_coupon and product_table_cart_discount. I couldn’t find it on the filters

Reply
- Hema
  
  March 28, 2023
  
  Hi Mitz,
  
  Thanks for reaching out to us.
  
  This type of customization is offered by our premium version. It would be nice if you could explain your requirement via this link for a better understanding. In that way, we can guide you in the right direction.
  
  Reply
Victor

December 12, 2022

How can I remove columns from the product table? I don’t want to show the total tax per item.

Reply
- Mike
  
  December 16, 2022
  
  Hi Victor,
  
  Kindly go through this article to delete any specific block from the invoice template.
  
  Reply
Paul

November 30, 2022

Hello,

How to remove the product’s caterogies of the products list ?

Reply
- 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.
  
  Reply
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

Reply
- 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.
  
  Reply
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.

Reply
- Mark
  
  June 20, 2019
  
  Hi Mark,
  
  We will get back to you on the support ticket you submitted.
  
  Reply
waqas

May 29, 2019

Code editor doesn’t the data

Reply
- Mark
  
  May 29, 2019
  
  Hi,
  
  Your query is not clear to us. Please reach us via support and brief the issue.
  
  Reply

Cookie	Description
__cfruid	Cloudflare sets this cookie to identify trusted web traffic.
__stripe_mid	Stripe sets this cookie cookie to process payments.
__stripe_sid	Stripe sets this cookie cookie to process payments.
cookielawinfo-checkbox-advertisement	Set by the GDPR Cookie Consent plugin, this cookie is used to record the user consent for the cookies in the "Advertisement" category .
cookielawinfo-checkbox-analytics	Set by the GDPR Cookie Consent plugin, this cookie is used to record the user consent for the cookies in the "Analytics" category .
cookielawinfo-checkbox-necessary	Set by the GDPR Cookie Consent plugin, this cookie is used to record the user consent for the cookies in the "Necessary" category .
cookielawinfo-checkbox-preferences	This cookie is set by the GDPR Cookie Consent plugin to check if the user has given consent to use cookies under the "Preferences" category.
CookieLawInfoConsent	Records the default button state of the corresponding category & the status of CCPA. It works only in coordination with the primary cookie.
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.
_ga_BQH8MSKD4M	This cookie is installed by Google Analytics.
_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.
_hjAbsoluteSessionInProgress	Hotjar sets this cookie to detect the first pageview session of a user. This is a True/False flag set by the cookie.
_hjFirstSeen	Hotjar sets this cookie to identify a new user’s first session. It stores a true/false value, indicating whether it was the first time Hotjar saw this user.
_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.
_hjIncludedInPageviewSample	Hotjar sets this cookie to know whether a user is included in the data sampling defined by the site's pageview limit.
_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.
_hjIncludedInSessionSample	Hotjar sets this cookie to know whether a user is included in the data sampling defined by the site's daily session limit.
_hjTLDTest	To determine the most generic cookie path that has to be used instead of the page hostname, Hotjar sets the _hjTLDTest cookie to store different URL substring alternatives until it fails.
CONSENT	YouTube sets this cookie via embedded youtube-videos and registers anonymous statistical data.
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.
VISITOR_INFO1_LIVE	A cookie set by YouTube to measure bandwidth that determines whether the user gets the new or old player interface.
YSC	YSC cookie is set by Youtube and is used to track the views of embedded videos on Youtube pages.
yt-remote-connected-devices	YouTube sets this cookie to store the video preferences of the user using embedded YouTube video.
yt-remote-device-id	YouTube sets this cookie to store the video preferences of the user using embedded YouTube video.

Cookie	Duration	Description
_hjSession_1376571	30 minutes	No description
_hjSessionUser_1376571	1 year	No description
_octo	1 year	No description available.
_zendesk_authenticated	past	No description
_zendesk_session	session	No description available.
_zendesk_shared_session	session	No description available.
edd_wp_session	12 hours	No description available.
logged_in	1 year	No description available.
m	2 years	No description available.

Customizing WooCommerce documents using the code editor

Getting started