View Product Page

Default template

To use the default template for your PDF documents, go to YITH > PDF Invoices & Packing Slips > PDF Templates > Settings and select Use the default template in the option PDF template to use.

A new tab, Style, will appear under the Settings tab if you select the option of default templates (please, refer to this section in the documentation regarding the Style options).

Default template option

Settings

In the Settings tab, besides which PDF template to use, you will be able to configure the following options:

Company information options

You can set here everything related to your company information in the invoices: company name, logo, and details, and choose whether to show them or not by selecting the related checkboxes.

Company information options

Invoice and pro-forma template settings

In this section, you can configure other settings that should appear on the invoice and on the pro-forma invoice.

Invoice and pro-forma template settings

Choose the order info to show from the order number, order date, order amount, and order payment method.

You can also print the customer’s details related to the invoice or the pro-forma using the placeholders provided (check the complete placeholders list here).

You can choose to enable notes and a footer on the invoice and the proforma invoice. When you enable these options, you will see the according fields where you can add your text:

  • Invoice notes
  • Pro-forma invoice notes
  • Invoice footer
  • Pro-forma invoice footer
  • Show footer only on the last page
Invoice and pro-forma template settings
Invoice and pro-forma template settings

There are extra options to decide whether you want to show or hide certain information in the Total section:

  • Show order subtotal inclusive of order discount.
  • Show the order discount in the invoice summary accounts.
  • Show broken-down taxes in the invoice summary.

Visible columns:

  • Product picture
  • Product SKU
  • Product short description
  • Product variation
  • Quantity
  • Regular price
  • On sale price
  • Product price
  • Line total
  • Tax
  • Tax percentage
  • Total (incl. tax)
  • Show discount percentage

Credit note template setting

Here you can configure the settings that should show on the credit note.

Credit note template settings

Decide to enable notes and a footer on the credit note. When you enable these options, you will see the according fields where you can add your text:

  • Notes on credit notes
  • Credit note footer

There are other options related to which information to show:

  • Info to show: decide to show or hide this information on the credit note:
    • Product name
    • Product SKU
    • Product Image
  • Show subtotal
  • Show total tax
  • Show positive amounts: Show amounts with positive values (if necessary for your country).

Packing slip template settings

Here you can configure other settings that should appear on the packing slip.

Packing slip template settings

Print the customer’s details related to the packing slip using the placeholders provided (check the complete placeholders list here).

Decide to enable notes and a footer on the packing slip. When you enable these options, you will see the according fields where you can add your text:

  • Packing slip notes
  • Packing slip footer

Packing slip template settings
  • Show order totals: decide to show or not show the order total.

Visible columns:

  • Product picture
  • Product SKU
  • Weight and dimension
  • Product short description
  • Product variation
  • Quantity
  • Regular price
  • On sale price
  • Product price
  • Line total
  • Tax
  • Tax percentage
  • Total (incl. tax).
  • Show discount percentage

Style options

If you have chosen to use the default template, you can change the template of your documents through the Style section.

There are 3 default templates that come with the plugin (if you wish to have a templated with advanced customization, we suggest to check the options of the Custom templates from this page).

Default document templates

The 3 styles available that come with the plugin are the following:

  • Default
  • Black & White
  • Modern stripes

Based on the selection you make here, the options below will change. These options allow you to change the colors of your selected template. (It is not possible to get a live preview of the changes).

Default template style options

Depending on the template you choose, you can change the following colors:

  • Background color(s)
  • Borders color
  • Invoice number color
  • Table header color
  • Table header font color
  • Data section color
  • Total section color

Default template example

default template style

Black and white template example

Black and white default template style

Modern stripes template example

Modern stripes default template style

Custom templates

To create custom templates for your PDF documents, go to YITH > PDF Invoices & Packing Slips > PDF Templates > Settings and select Create and choose a custom templates.

A new tab, Templates, will show under the Settings tab if you select the option of custom templates (please, refer to this section in the documentation regarding the Templates options)

Custom template

To edit the default PDF template and create new ones, make sure to enable Gutenberg first.

Settings

In the Settings tab, you will be able to choose a different template for each document: invoice, pro-forma, packing slip, and credit note. Select one from the dropdown to set it as the template for that specific document.

Custom template document selection

You can also enable the option to show amounts with positive values (if necessary for your country) for the credit note.

How to create a new template

In the Templates tab you will find the list with all the available custom templates. Click on the button +Add new template then select one of the available templates and enter a title to identify it.

PDF custom templates list

In this list, you can also use the action buttons to edit, duplicate or delete an existing template.

Please note – to use the other 8 templates available in the plugin library, you need to have a valid and active license.

PDF template edit page

You can upload a background image and enter your company name in the Footer, and, if the template will have more than one page, use the placeholder {PAGENO} to show the number of the page in the PDF.

Add footer to PDF template

The available blocks are:

Customer info

If you want to show the customer details in the PDF template, you can take advantage of the Customer info block. When adding this block, you will find a set of options and you will be able to rename “customer info” as you prefer.

How to add customer info to the PDF template

Customer data will be added through the following placeholders:

  • {{billing_first_name}}
  • {{billing_last_name}}
  • {{billing_vat_number}}
  • {{billing_vat_ssn}}
  • {{billing_receiver_type}}
  • {{billing_invoice_type}}
  • {{billing_company}}
  • {{billing_country}}
  • {{billing_address_1}}
  • {{billing_address_2}}
  • {{billing_city}}
  • {{billing_state}}
  • {{billing_receiver_id}}
  • {{billing_postcode}}
  • {{billing_phone}}
  • {{billing_receiver_pec}}
  • {{billing_email}}g_postcode}}
  • Dimensions: set the margin (right, top, bottom, left) and padding (in px).
  • Color: set the color for the text and/or background.
  • Typography: set the size, appearance, line height, letter spacing.
  • Advanced: here, you can enter additional CSS classes.

Shipping info

To show the shipping info in the PDF template, you can use the Shipping info block. When adding this block, you will find the following set of options.

Shipping info will be added through the following placeholders:

  • {{shipping_first_name}}
  • {{shipping_last_name}}
  • {{shipping_company}}
  • {{shipping_country}}
  • {{shipping_address_1}}
  • {{shipping_address_2}}
  • {{shipping_city}}
  • {{shipping_state}}
  • {{shipping_postcode}}
  • Color: set the color for the text and/or background.
  • Typography: set the size, appearance, line height, and letter spacing.
  • Advanced: here, you can enter additional CSS classes.

Product table

To show the product table in the PDF template, you can use the Product table block. When adding this block, you will find the following set of options.

Invoice

 

Enable/disable the info you want to show in the PDF:

  • product thumbnail
  • product name
  • product SKU
  • description
  • weight
  • dimensions
  • quantity
  • regular price
  • sale price
  • price
  • discount percentage
  • tax
  • show percentage tax
  • total
  • total with taxes
  • Show/Hide additional items: choose whether to show
    • Fees
    • Shipping
  • Titles:
    • color
    • border color
    • size
    • letter case
  • Items
    • color
    • border color
    • size
    • letter case
  • Advanced: here, you can enter HTML anchor and additional CSS classes.
Product table block example

Credit note

Enable/disable the info to show by choosing among:

  • product thumbnail
  • product name
    • product SKU
    • description
  • refund description
  • total
  • Show/Hide additional items: choose whether to show
    • Fees
    • Shipping
Credit note block options

Date

To show the date in the PDF template, you can use the Date block. When adding this block, you will find the following set of options.

Add date to the PDF template
  • Order date type: choose the date to show from
    • order creation date
    • order completed date
    • invoice creation date
    • current date
  • Dimensions: set the margin (right, top, bottom, left) and padding (in px).
Date block options
  • Color: set the color for the text and/or background.
  • Typography: set the size, line height, letter case, and letter spacing.
  • Advanced: here, you can enter additional CSS classes.
Date block example

Order number

To show the order number in the PDF template, you can use the Order number block. The available placeholder is {{order_number}}. When adding this block, you will find the following set of options.

Order number block for PDF template
  • Dimensions: set the margin (right, top, bottom, left) and padding (in px).
Order number block options
  • Color: set the color for the text and/or background.
  • Typography: set the size, line height, letter case, and letter spacing.
  • Advanced: here, you can enter additional CSS classes.
Order number block example

Document number

To show the document number in the PDF template, you can use the Document number block. The available placeholder is {{document_number}}. When adding this block, you will find the following set of options.

Add document number to PDF template
  • Dimensions: set the margin (right, top, bottom, left) and padding (in px).
Document number block options
  • Color: set the color for the text and/or background.
  • Typography: set the size, line height, letter case, and letter spacing.
  • Advanced: here, you can enter additional CSS classes.
Document number block example

Order amount

To show the order amount in the PDF template, you can use the Order amount block. The available placeholders are: {{order_amount}} and {{refunded_amount}} (for the credit note). When adding this block, you will find the following set of options.

Invoice/Credit note

  • Dimensions: set the margin (right, top, bottom, left) and padding (in px).
  • Color: set the color for the text and/or background.
  • Typography: set the size, line height, letter case, and letter spacing.
  • Advanced: here, you can enter additional CSS classes.
Order amount block example

Total table

To show the total table in the PDF template, you can use the Total table block. When adding this block, you will find the following set of options.

Invoice

Total table block

Enable/disable the info you want to show in the PDF:

  • order discount in the invoice summary amounts
    • order subtotal inclusive of order discount
  • broken down taxes in the invoice summary

Table settings:

  • Color: choose the color for the table
  • Background color: choose the background color for the table
  • Size
Total table options
  • Subtotal labels: choose the color and size for subtotal labels.
  • Total settings: choose the color and size for the total.
  • Advanced: here, you can enter HTML anchor and additional CSS classes.
Total table block example

Insert new user details in documents

To insert any information related to the user, for either the customer invoice and/or the packing slip details, use the postmeta metakeys as placeholders within double curly brackets.

For example: {{_shipping_first_name}} to show the order shipping first name.

Customer invoice details
Customer packing slip details

Below, the complete list of placeholders that you can use:

  • {{_customer_note}}
  • {{_customer_user}}
  • {{_order_key}}
  • {{_order_currency}}
  • {{_billing_first_name}}
  • {{_billing_last_name}}
  • {{_billing_company}}
  • {{_billing_address_1}}
  • {{_billing_address_2}}
  • {{_billing_city}}
  • {{_billing_state}}
  • {{_billing_postcode}}
  • {{_billing_country}}
  • {{_billing_email}}
  • {{_billing_phone}}
  • {{_shipping_first_name}}
  • {{_shipping_last_name}}
  • {{_shipping_company}}
  • {{_shipping_address_1}}
  • {{_shipping_address_2}}
  • {{_shipping_city}}
  • {{_shipping_state}}
  • {{_shipping_postcode}}
  • {{_shipping_country}}
  • {{_completed_date}}
  • {{_paid_date}}
  • {{_edit_lock}}
  • {{_edit_last}}
  • {{_cart_discount}}
  • {{_cart_discount_tax}}
  • {{_order_shipping}}
  • {{_order_shipping_tax}}
  • {{_order_tax}}
  • {{_order_total}}
  • {{_payment_method}}
  • {{_payment_method_title}}
  • {{_transaction_id}}
  • {{_customer_ip_address}}
  • {{_customer_user_agent}}
  • {{_created_via}}
  • {{_order_version}}
  • {{_prices_include_tax}}
  • {{_date_completed}}
  • {{_date_paid}}
  • {{_payment_tokens}}
  • {{_billing_address_index}}
  • {{_shipping_address_index}}
  • {{_recorded_sales}}
  • {{_recorded_coupon_usage_count}}

How to overwrite documents templates

All the templates used by the plugin are available in the templates path templates > yith-pdf-invoice.

To overwrite each document template it is essential to repeat the specific files in your theme “woocommerce” folder (in case it is not included, you must create it).

Copy and paste files in your theme “woocommerce” folder, by including them in the “yith-pdf-invoice” folder.

Copy files

Please note. Plugin updates will be ignored in your site for the files you have overwritten.
For the Black & White template or the Modern Stripes template, dedicated folders are added.
overwrite