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

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)

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

      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
  2. Mark Mason

    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

      Mark

      June 20, 2019

      Hi Mark,

      We will get back to you on the support ticket you submitted.

      Reply

  3. waqas

    May 29, 2019

    Code editor doesn’t the data

    Reply
    • Mark

      Mark

      May 29, 2019

      Hi,

      Your query is not clear to us. Please reach us via support and brief the issue.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *