Customizing WooCommerce documents using the code editor

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.

PDF invoice, Packing Slips, Delivery Notes & Shipping Labels plugin for WooCommerce helps you customize Woocommerce documents. The plugin provides you with pre-defined templates for each of the document types.

There are two ways to customize the WooCommerce document, using:

visual editor
code editor

This article explains how to customize the template using the code editor. To read more about customizing templates in the visual editor read this article.

Code editor customisation

To customize a template using the code editor follow the steps.

Step 1: Navigate to Invoice/Packing Slip from WordPress dashboard. Choose the document type and go to Customise tab. In the below example, Invoice > Customize tab is opened up.

Step 2: Click on Create new template (Change layout if template is not active) and select a template you want to customize.

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

The font size, style, color, and other specific attributes of a document can be changed.

Step 3: Click on the Code Editor tab.

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.

The Help is as shown below:

WooCommerce Invoice or packing-Invoice Settings- Customize-Code Editor-Help

Step 4: You can edit the template from the code editor, add custom CSS or link to CSS file. After finishing the customization, you can save and activate the template.

Related articles:

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 (6)

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

Customizing WooCommerce documents using the code editor

Code editor customisation

Written by

Comments (6)

Leave a Reply
Cancel reply

Leave a Reply

Our plugins

Customizing WooCommerce documents using the code editor

Code editor customisation

Share this post

Written by

Comments (6)

Leave a Reply Cancel reply

Leave a Reply

Leave a Reply
Cancel reply