WebToffee Logo
  • Home
  • Plugins
  • Bundles
  • Blog
  • Documentation
  • Support
Login
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
    • 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
    • Invoice Pay
      • Accept WooCommerce Invoice Payment
    • 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.3

Documentation/Print Invoice, Packing Slip, Delivery Note & Label for WooCommerce/How to customize invoice in WooCommerce

How to customize invoice in WooCommerce

Last updated on January 31, 2023

WooCommerce PDF Invoices, Packing Slips, Delivery Notes & Shipping Labels plugin provides dynamic customizer to create custom invoices. It gives you ample flexibility to add, move and arrange different components of an invoice. You can drag and drop address details, order/product metadata, tax-related information, or any custom data, directly in the invoice.

Nonetheless, it has a variety of pre-defined templates, which eliminates the need to work from scratch and allows you to select a layout that is appropriate to your business.

Getting started

  1. Firstly, install and activate the plugin into your WooCommerce store.
  2. From your WordPress dashboard, go to the Invoice/Packing > Invoice.
  3. Next, head on to the Customize tab.

Dynamic customizer

The customizer consists of the following components:

  • Preview pane 
  • Editor pane
  • Predefined templates
  • Undo/Redo buttons
  • Code editor
  • PDF preview
WooCommerce invoice dynamic customizer (click to expand)

Let’s look into each of them in detail.

Preview pane

As the name suggests, the preview pane is where you get a full view of how the document will appear. The items in a preview pane are arranged in rows. Each row has a row toolbar that helps in the following:

Row toolbar

Change position of a set of blocks: Move row up or down

Move the entire row of blocks up or down using the arrow keys. From the toolbar, click on the up or down arrow as shown below:

Moving the entire row up or down (click to expand)

Add new items to the document: Insert rows above or below

To add more items to your document:

  • From the toolbar, click on the insert above/below icon. 
  • Then, from the available layouts, select a row type.
  • Now, you can either drag an existing block from the preview pane or add one from assets.
Note: Make sure to insert an appropriate row type depending on the block item you want to add to the document.

To drag an existing block to a row space: From the preview pane, click on a particular block and drag it to the newly created row space.

Dragging an existing block to a new row space (click to expand)

To add an item from assets: From the asset section, select the asset item you’d like to add. Drag the item into the newly created row space. Alternatively, you can add new order or product metadata from assets to the documents.

Inserting new blocks from assets (click to expand)

Deleting a row

To delete an entire row with multiple blocks, hover over the row and click on the delete icon on the toolbar. This will delete all the blocks in that row.

Deleting a row (click to expand)

Deleting a block

To delete a block, select a block and click on the close button. This will delete the selected block.

Deleting a block (click to expand)

Move blocks from one place to another: Drag and drop the blocks

You can drag a block from the preview pane and drop it to a row space to change its position on the document. 

To drag and drop, click and hold on a block and drop to a row space as shown below. 

Editor pane

The editor pane consists of Page, Assets, and Block. Let’s have a look into each item in detail.

Editor pane (click to expand)

Page

Customize the generic properties of an invoice such as Dimension/Background, Typography, Border from the Pages section.

Pages

Block

The preview pane consists of the following blocks:

  • Document title
  • From Address
  • Shipping Address
  • Billing Address
  • Order fields
  • Product table
  • Summary table
  • Return policy
  • Footer

You can further customize the dimension, background, and typography of each block. 

Block editor

Editing a block

To edit a block, choose a block from the preview pane. As a result, its property box will open up.

For example, let’s choose the block Shipping Address from the preview pane to edit it.

Edit the header texts and content of the shipping address here. Expand the item to view its properties. Customize each individual item of the chosen block from here.

Customizing a block (click to expand)

To alter the order of appearance of items in a block, select a block and click on the drag and rearrange icon and move the item to the desired position.

Rearranging items in block (click to expand)

Merging a block

To merge items in a block, click on the Merge icon. As a result, checkboxes will appear against each item. Select the items and click on the Merge button. You can view the merged item in the preview pane. 

Note that the Merge option is available only for the Address blocks.

Unmerging a block

To unmerge, click on the Unmerge icon. Note that the unmerge icon will appear only for the previously merged items. Clicking on unmerge will reinstate the items into their original position. You can view the unmerged items on the preview pane.

Note that the Unmerge option is available only for the Address blocks.
Merge or unmerge (click to expand)

HTML editor for blocks

Click on the HTML icon. The HTML editor for blocks will open up. 

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)

Deleting an item from the block

You can delete individual items from a block. 

  • To delete an item, click on the delete icon. 
  • As a result, checkboxes will appear against each item. 
  • Select the item/s and click on the Delete icon. The selected items will disappear from the preview pane.
  • Other items available in the block section shows all the deleted item.
  • Click on ADD to add the deleted item back to the block.
Deleting items in a block (click to expand)

Adding new item

Add Additional order or product-related information to the invoice by using the Add item feature. You can click on Order field blocks, Product table block, or the Summary table block to add items to it. 

Adding order meta

Add predefined order data

  • Select an order field block
  • Scroll down to Other items available in the block section. It lists down all the predefined items.
  • Click on ADD against the required item. It then adds the item to the block.
Add predefined order data (click to expand)

Add custom order metadata (third party plugin)

  • Select an order field block 
  • Hit on the Add button in the upper right corner. 
  • Into the pop-up that appears, enter the label name and the meta key(probably from another third-party plugin). The specified label will appear on the invoice.
  • Click on Save. 
Add custom order metadata (click to expand)
Fetch the meta key(third party plugin) from the WooCommerce > Orders > Custom field section. 

Alternatively, you can add custom order meta from Assets > Order fields > Add.

Adding product meta

Add predefined product data

  • Select the product table block
  • Scroll down to Other items available in the block section. It lists down all the predefined items.
  • Click on ADD against the required item. It then adds the item to the block.
Add predefined product data (click to expand)

Add custom product metadata(third party plugin)

  • Select the product table block
  • Hit on the Add button in the upper right corner. 
  • Into the pop-up that appears, enter the column header and select a value. The specified header will appear on the product table of the invoice.
  • Click on Save.
Add custom product meta (click to expand)

Assets

Insert a whole block or individual block items to the preview pane using Assets. Some of the predefined assets listed in the plugin are the following:

  • Company info
  • Addresses
  • Order fields
  • Product table
  • Others

Adding assets

  • To add an Asset, click on the expand icon.
  • The block along with its items will open up. 
  • Press and hold the drag icon to paste the entire block or its individual items to the preview pane. 
Adding company logo from Assets (click to expand)
Note that the assets are dropped to an empty row. If there isn’t a row in the position where you wish to drop the assets, then, insert a row first and then try to drop the asset.

Search assets

  • Input the name of the asset to search it in the predefined list.
  • Possible matches will be populated. Select the asset from the list and drag it to an empty row of the preview pane. 
Searching for an asset (click to expand)

Add new asset

  • The ‘Add new’ option is available only for the order field block. It is typically used to add order metadata to the invoice. 
  • To add order metadata, click on the Add new button.
  • Into the popup that appears, enter the label name and the meta key.
  • Click on Save.
Adding new order meta via assets (click to expand)

Predefined templates

Creating a template

To view the predefined templates:

  • From the upper left corner beneath the template name, click on Create new template.
  • A pop up window opens up with the available templates .
  • Choose a layout for the template. 
  • The selected layout will then be available for further customizations.
Creating and managing templates (click to expand)

Changing the layout of a template

At any point in your customization, you can switch between the layout of your template.

To change the layout:

  • From the upper left corner of the customizer window, click on Change layout.
  • A popup window opens up with the available templates.
  • Choose a layout for the template. 
  • The selected layout will then be available for further customizations.
Note that all the unsaved changes will be lost upon switching to a new layout.

Saving a template

To save a template for future use:

  • Click on the Save button from the header. 
  • Into the popup window that appears, enter a name for the template and click on save.
  • Access all the saved templates from the ‘My templates’ section for later use. 

Activating a template

To activate an editing template:

  • From the upper right corner of the customizer window, click on the three lines. 
  • Select the option Activate.
  • The chosen template will be active and can be used for generating documents.
To activate previously saved template, go to ‘My template’ section.

Deleting a template

To delete an editing template,

  • From the upper right corner of the customizer window, click on the three lines. 
  • Select the option Delete.
To delete previously saved template, go to ‘My template’ section.

View, edit or delete previously saved template

View, edit, or delete all the saved templates from the ‘My templates’ section:

  • From the upper right corner of the customizer window, click on the three lines. 
  • Choose ‘My templates’. A dialog box will open up.
  • You can Activate, Customize or Delete a template from here.
    • To activate, click on Activate.
    • To customize an existing template, click on customize. The previously saved template will open up for customization.
    • To delete an existing template, click on delete.

Search a template

Type in an existing template name in the search box to search by its name.

Document title and status

You can view the document title and its current state from the upper left corner of the customizer header.

You can identify the current state of a template by examining its document title. For active templates, the plugin marks ‘Active’ in brackets beside the document title. For example, for a template ‘My new invoice’, its active state will be denoted as My new invoice(Active).

Document title and staus

The unsaved template will be shown as <Untitled template> on the header. 

Templates undergoing customization will show only their name without the state. For example, If an existing template ‘My invoice’ is subjected to edit, then its document title will be shown as ‘My invoice’ only.

Undo/Redo buttons

Undo or Redo any action done during the customization by using the undo/redo button on the customizer header.

Undo and redo buttons

PDF preview

From the upper right corner of the customizer header, click on the three lines. 

  • Click on Generate PDF preview. 
  • Invoice in PDF format will open up.
  • You can download, print, rotate, fit to page, zoom in/out from here.
  • Click on close to exit the preview
PDF Preview

Code editor (Document)

To edit the whole document via code:

  • From the upper right corner of the customizer header, click on the hamburger menu. 
  • Click on the Code editor. 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.
  • Was this article helpful?
  • Yes, thanks!Not really

On this page

  • Getting started
  • Dynamic customizer
  • Preview pane
  • Change position of a set of blocks: Move row up or down
  • Add new items to the document: Insert rows above or below
  • Deleting a row
  • Deleting a block
  • Move blocks from one place to another: Drag and drop the blocks
  • Page
  • Block
  • Editing a block
  • Merging a block
  • Unmerging a block
  • HTML editor for blocks
  • Deleting an item from the block
  • Adding new item
  • Adding order meta
  • Add predefined order data
  • Add custom order metadata (third party plugin)
  • Adding product meta
  • Add predefined product data
  • Add custom product metadata(third party plugin)
  • Assets
  • Adding assets
  • Search assets
  • Add new asset
  • Predefined templates
  • Creating a template
  • Changing the layout of a template
  • Saving a template
  • Activating a template
  • Deleting a template
  • View, edit or delete previously saved template
  • Search a template
  • Document title and status
  • Undo/Redo buttons
  • PDF preview
  • Code editor (Document)

This article posted in Customizations, Documentation, Print Invoice, Packing Slip, Delivery Note & Label for WooCommerce

Written by

Shesna

Shesna is a technical content writer for WebToffee. She is familiar in working closely with the SMEs to break down complex technical information into a concise, easy to understand manner.

Comments (2)

  1. Greg Guldenschuh

    Greg Guldenschuh

    April 24, 2022

    I need to add a static text box to my invoices telling our customers about the 3 different ways we have to pay. I tried putting the static text in the footer and saving it, but the inputted text never printed on the invoice. I believe that once I get the text printing, I should be able to move it to any spot of appropriate size on the invoice template.

    Reply
    • Mike

      Mike

      April 25, 2022

      Hi,

      We were not able to replicate the issue on our end. Could you please share your invoice template HTML code (Invoice/Packing > Invoice > Customize > Code) via this link?

      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 *

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

© 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

  • Terms & Conditions
  • Privacy Policy
  • Refund policy
  • Support policy
  • License Activation

© 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 settingsACCEPT
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.
Save & Accept