Documentation/Print Invoice, Packing Slip, Delivery Note & Label for WooCommerce/Customizing WooCommerce documents using the code editor

Customizing WooCommerce documents using the code editor

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 Invoice/Packing Slip from WordPress dashboard. Choose the document type and go to Customise tab. Here, I have taken Invoice as the document type.

WooCommerce Invoice or packing-Invoice Settings- Customize

Step 2: Click on Create new template (Change layout if 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: Click on the Code Editor tab.

Invoice-CustomizeCode

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.

  • Was this article helpful?
  • YesNo