WebToffee Logo
  • Home
  • Plugins
  • Shopify apps
  • Bundles
  • Blog
  • Documentation
  • Support
Login
cart 0

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.

  • Overview
    • Plugin set up
    • General settings
  • Invoice
    • Invoice Pay
      • Accept WooCommerce Invoice Payment
    • Getting Started
      • Set up PDF Invoices
    • Email PDF Invoice
      • Email invoices by order status
    • Invoice Number
      • Create/reset invoice number
      • Use the order number as invoice number
    • Customizations
      • Dynamic customizer for invoice
      • Customization using code editor
      • Add a new row to the product table summary section of WooCommerce invoice
      • Add product description in WooCommerce invoice
      • Custom filename for PDF Invoice/Proforma Invoice
      • Add tax column in invoice
      • Fix logo, image missing, or character encoding issues in PDF documents
      • Add product attribute to Invoice
    • Fix logo, image missing, or character encoding issues in PDF documents
    • Add product attribute to Invoice
    • Bulk print invoice
  • Packing Slip
    • Getting Started
      • Set up Packing Slips
    • Customizations
      • Sort items by category and product name
      • Packing slip per item
      • Email packing slip to separate recipients
      • Change color of item quantity in Packing Slip
      • Set up Box Packing
    • Bulk Print Packing Slips
    • Add product attribute
  • Delivery Note
    • Set up Delivery Notes
    • Bulk print Delivery Note
  • Shipping Label
    • Set up Shipping Label
    • Add return policy
    • Bulk print shipment labels
    • Modify shipping states for selected country
    • Remove phone/email
  • Dispatch Label
    • Set up Dispatch Label
  • Address Label
    • Avery labels using Brother printer
    • Set up Address Label
    • Alter Font Size
  • Picklist
    • Set up Picklist
    • Add Customer's name in Pick List
  • Proforma Invoice
    • Set up Proforma Invoice
  • Credit Note
    • Set up Credit Note
  • Third-Party Compatibility
    • Plugins
  • Multilingual Support
    • Translate with WPML
  • Advanced Topics
    • Resolve image missing issue
    • Custom field in checkout page
    • Print invoice from 'My Account'
    • Provide print access for custom user roles
    • Add Custom Place Holders in Labels
    • Fixing character encoding issues
    • Include tracking number meta in invoices/labels
    • Deleting existing invoice numbers
    • Troubleshoot 'Unable to save settings'
    • Remove unnecessary product metadata
    • Extra Product Options Compatibility
    • Add custom fields to WooCommerce documents
    • Re-order Product Table
    • Print product meta data in a line
    • Hide Variation Details
    • Alter Address Format
    • Add order meta to WooCommerce documents
    • Pre-defined filters
    • Customer's name in invoices/labels
    • Compatibility with 'Product Add-Ons Ultimate'
    • Add empty column to the product table
  • FAQ
    • Frequently asked questions
  • Changelog
    • Version 4.4.5

Home » Docs » Print Invoice, Packing Slip, Delivery Note & Label for WooCommerce » Customizing WooCommerce documents using the code editor

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. 
Document code editor (click to expand)
  • 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

On this page

  • Getting started
  • Customizing invoices using the code editor
  • HTML editor for blocks
  • Code editor (Document)
  • Customising other documents using the code editor

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)

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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

Got any query? Please leave a comment or reach out to our support

Cancel reply

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

Webtoffee
Facebook
Twitter
Youtube
Linkein
WordPress

We develop awesome WordPress plugins & WooCommerce extensions to help build successful online businesses.

Trustpilot

© 2023 WebToffee. All rights reserved.

Our plugins

  • GDPR Cookie Consent
  • PDF Invoices & Packings Slips
  • Product Import Export Plugin
  • User & Customer Import Export
  • Import Export Suite
  • Sequential Order Numbers
  • Smart Coupons for WooCommerce
  • URL Coupons for WooCommerce
  • PayPal Express Checkout
  • Stripe Payment Gateway
  • Subscriptions for Woocommerce
  • Product Catalog Sync for Facebook
  • PrintNode for PDF Invoices
  • Order, coupon, subscriptions for WooCommerce
  • WordPress Backup and Migration
View more +

Get Started

  • Plugins
  • Testimonials
  • Affiliates
  • We're hiring

Help & Support

  • Documentation
  • Documentation (Basic)
  • FAQ
  • Support

Company

  • About Us
  • Terms & Conditions
  • Privacy Policy
  • Cookie Policy
  • Refund Policy
  • Support Policy
  • Installation Guides

© 2023 WebToffee. All rights reserved.

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies. However you may visit Cookie Settings to provide a controlled consent.
Cookie settingsReject allAccept all
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of the basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website, to store user preferences and provide you with content and advertisements that are relevant. Such cookies will be stored on your browser but only upon procuring consent.

You will also have the option to opt-out of these cookies should you want to. But opting out of some of these cookies may have an effect on your browsing experience as per the descriptions elucidated against the respective categories below.

Necessary
Always Enabled
The cookies defined under this category are absolutely essential for the website to function. Hence they are loaded by default irrespective if user consent.
CookieDescription
__cfruidCloudflare sets this cookie to identify trusted web traffic.
__stripe_midStripe sets this cookie cookie to process payments.
__stripe_sidStripe sets this cookie cookie to process payments.
cookielawinfo-checkbox-advertisementSet by the GDPR Cookie Consent plugin, this cookie is used to record the user consent for the cookies in the "Advertisement" category .
cookielawinfo-checkbox-analyticsSet by the GDPR Cookie Consent plugin, this cookie is used to record the user consent for the cookies in the "Analytics" category .
cookielawinfo-checkbox-necessarySet by the GDPR Cookie Consent plugin, this cookie is used to record the user consent for the cookies in the "Necessary" category .
cookielawinfo-checkbox-preferencesThis cookie is set by the GDPR Cookie Consent plugin to check if the user has given consent to use cookies under the "Preferences" category.
CookieLawInfoConsentRecords the default button state of the corresponding category & the status of CCPA. It works only in coordination with the primary cookie.
PHPSESSIDThis 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_policyThe 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.
Analytics
Analytics cookies help us understand how our visitors interact with the website. It helps us understand the number of visitors, where the visitors are coming from, and the pages they navigate. The cookies collect this data and are reported anonymously.
CookieDescription
_gaThis 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_BQH8MSKD4MThis cookie is installed by Google Analytics.
_gat_gtagIdentification code of website for tracking visits.
_gidThis 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.
_hjAbsoluteSessionInProgressHotjar sets this cookie to detect the first pageview session of a user. This is a True/False flag set by the cookie.
_hjFirstSeenHotjar 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.
_hjidHotjar 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.
_hjIncludedInPageviewSampleHotjar sets this cookie to know whether a user is included in the data sampling defined by the site's pageview limit.
_hjIncludedInSampleThis cookie is set to let Hotjar know whether that visitor is included in the sample which is used to generate heatmaps, funnels, recordings, etc.
_hjIncludedInSessionSampleHotjar sets this cookie to know whether a user is included in the data sampling defined by the site's daily session limit.
_hjTLDTestTo 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.
CONSENTYouTube sets this cookie via embedded youtube-videos and registers anonymous statistical data.
has_recent_activityThis cookie is used to signal to the code repository website if the user has browsed other website resources during the current session.
tk_aiGathers 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_lrThis cookie is set by the JetPack plugin on sites using WooCommerce. This is a referral cookie used for analyzing referrer behavior for Jetpack.
tk_orThis cookie is set by the JetPack plugin on sites using WooCommerce. This is a referral cookie used for analyzing referrer behavior for Jetpack.
tk_qsGathers 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_r3dThe cookie is installed by JetPack. Used for the internal metrics for user activities to improve user experience.
Advertisement
Advertisement cookies help us provide our visitors with relevant ads and marketing campaigns.
CookieDescription
_fbpThis 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.
frThe 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_LIVEA cookie set by YouTube to measure bandwidth that determines whether the user gets the new or old player interface.
YSCYSC cookie is set by Youtube and is used to track the views of embedded videos on Youtube pages.
yt-remote-connected-devicesYouTube sets this cookie to store the video preferences of the user using embedded YouTube video.
yt-remote-device-idYouTube sets this cookie to store the video preferences of the user using embedded YouTube video.
Preferences
Preference cookies are used to store user preferences to provide them with content that is customized accordingly. This includes the language of the website or the location of the visitor.
CookieDescription
_gh_sessThis cookie is used to preserve users' states across page requests.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
CookieDurationDescription
_hjSession_137657130 minutesNo description
_hjSessionUser_13765711 yearNo description
_octo1 yearNo description available.
_zendesk_authenticatedpastNo description
_zendesk_sessionsessionNo description available.
_zendesk_shared_sessionsessionNo description available.
edd_wp_session12 hoursNo description available.
logged_in1 yearNo description available.
m2 yearsNo description available.