Home > Docs > Customizer for WooCommerce PDF Invoices > Customizing Address Formats Using Customizer

Customizing Address Formats Using Customizer

Last updated on February 1, 2024

The From address, shipping address, billing address, and return address in document types now use single placeholders instead of separate placeholders for each element. So to reorder or customize elements within an address type, store owners will need to replace the existing placeholders with a custom code snippet. Below are the steps on how store owners can achieve this with the help of WebToffee’s Customizer for WooCommerce PDF Invoices plugin.

  1. Navigate to Invoice/Packing > Preferred document type(eg. Invoice) > Customize.
  2. In the active template, scroll down and click on the address type that you wish to customize.
  3. In the Editor pane on the right side, click on the HTML icon.
  4. From the HTML editor that opens up, replace the current placeholder with its respective custom code snippet.
  5. Click on Apply Changes.
  6. Finally, click on Save Template.

Customizing address formats with customizer

Below are the detailed steps on how to customize address formats in the customizer. Let’s take the invoice document as an example to demonstrate the steps.

  1. Navigate to Invoice/Packing > Invoice > Customize.
  2. In the active invoice template, scroll down and click on the address type that you wish to customize. The Editor pane on the right side will display the details of the address type.
Navigating to the Address type
Navigating to the Address type
  1. Click on the HTML icon located at the top right corner of the editor pane. The HTML block editor will open up.
Heading to the HTML icon
Heading to the HTML icon
  1. In the HTML block editor, replace the current placeholder with the respective custom code snippet.

Customize / reorder elements in the From address

Documents show the From address using the [wfte_from_address] placeholder. The From address follows the WooCommerce from address format. So to customize/reorder elements replace the placeholder [wfte_from_address] with the below code snippet. Make necessary alterations to the code snippet before replacing the placeholder.

HTML block editor with the From address placeholder
HTML block editor with the From address placeholder

The placeholders in the code snippet represent the following values/elements in the from address :

[wfte_from_address_name] – From address name
[wfte_from_address_address_line1] – From address line 1
[wfte_from_address_address_line2] – From address line 2
[wfte_from_address_city] – From address city
[wfte_from_address_state] – From address state
[wfte_from_address_postcode] – From address zipcode
[wfte_from_address_country] – From address country
[wfte_from_address_contact_number] – From address contact number
[wfte_from_address_vat] – From address VAT number

Customize / reorder elements in the Billing address

To customize/reorder elements in the billing address, replace the placeholder [wfte_billing_address] with the below code snippet. Alter the code snippet according to your requirements before adding it.

HTML block editor with the Billing address placeholder
HTML block editor with the Billing address placeholder

The placeholders in the code snippet represent the following values/elements in the billing address:

[wfte_billing_address_name] – Billing address name
[wfte_billing_address_company] – Billing address company name
[wfte_billing_address_address_1] – Billing address line 1
[wfte_billing_address_address_2] – Billing address line 2
[wfte_billing_address_city] – Billing address city
[wfte_billing_address_state] – Billing address state
[wfte_billing_address_postcode] – Billing address zipcode
[wfte_billing_address_country] – Billing address country

Customize / reorder elements in the Shipping address

To customize or reorder elements in the shipping address, replace the placeholder [wfte_shipping_address] with the code snippet given below. Make necessary alterations to the code snippet before adding it.

HTML block editor with the Shipping address placeholder
HTML block editor with the Shipping address placeholder

The placeholders in the code snippet represent the following values/elements in the shipping address:

[wfte_shipping_address_name] – Shipping address name
[wfte_shipping_address_company] – Shipping address company name
[wfte_shipping_address_address_1] – Shipping address line 1
[wfte_shipping_address_address_2] – Shipping address line 2
[wfte_shipping_address_city] – Shipping address city
[wfte_shipping_address_state] – Shipping address state
[wfte_shipping_address_postcode] – Shipping address zipcode
[wfte_shipping_address_country] – Shipping address country
[wfte_shipping_address_phone] – Shipping address phone number

Customize / reorder elements in the Return address

The return address shown on dispatch labels and credit notes use [wfte_return_address] as the placeholder. To customize elements in the return address, replace [wfte_return_address] with the code snippet given below. Alter the code snippet as per your requirements before adding it.

HTML block editor with the Return address placeholder
HTML block editor with the Return address placeholder

The placeholders in the code snippet represent the following values/elements in the return address:

[wfte_return_address_name] – Return address name
[wfte_return_address_company] – Return address company name
[wfte_return_address_address_line1] – Return address line 1
[wfte_return_address_address_line2] – Return address line 2
[wfte_return_address_city] – Return address city
[wfte_return_address_state] – Return address state
[wfte_from_address_postcode] – Return address zipcode
[wfte_return_address_country] – Return address country
[wfte_return_address_contact_number] – Return address contact number

  1. Click on ‘Apply Changes’ to save the changes.
  2. Finally, click on ‘Save Template’ to reflect the changes to the active template.