Adding Product Attributes to WooCommerce Invoices and Other WooCommerce Document Types Using Customizer

Using WebToffee’s Customizer for WooCommerce PDF Invoices add-on, store owners can easily add product attributes to WooCommerce documents. Product attributes can be shown in two ways using the customizer:

1. Under the product name within the product table.
   • Steps :
     1. Navigate to Invoice/Packing > Preferred document type(eg. Invoice) > Customize.
     2. Click on the product table of the active template.
     3. From the Editor pane on the right side, click on the element Product.
     4. In the expanded product window, click on the ‘+‘ icon on the right side of Meta below product name.
     5. In the dialog box that pops up,select Product attribute from the Meta type dropdown.
     6. Now, add the Product attribute key and a suitable label.
     7. Click on Save.
2. In a new column within the product table.
   • Steps :
     1. Navigate to Invoice/Packing > Preferred document type(eg. Invoice) > Customize.
     2. Click on the product table of the active template.
     3. Now, click on the ‘+‘ icon present at the top right corner of the editor pane.
     4. In the dialog box that pops up, select Product attribute from the Column type dropdown.
     5. Fill in the Product attribute key and a suitable Column header.
     6. Click on Save.
     7. Click on Save Template.

1. From the WordPress dashboard, navigate to Products > Attributes.
2. In the Attributes page, add a new attribute by giving it a suitable name and a slug.
3. On adding an attribute, go to Configure terms and add the variations/terms for the new attribute.
4. Now, navigate to Products > All Products, click on a product to add the attribute.
5. Under the Edit product page, head to Attributes and add the previously created product attribute to the product.

Let’s go through the steps on adding a product attribute beneath the product name on invoices.

1. Navigate to Invoice/Packing > Invoice > Customize.
2. In the active invoice template, scroll down and click on the product table. The editor pane on the right will show all the elements within the product table.

3. On the editor pane, click on Product. The product element will expand showing additional features.

4. Click on the ‘+’ icon located at the right side of Meta below product name. A dialog box will pop up.

5. Inside the dialog box, from the Meta type dropdown, select Product attribute.
6. Key in the Product attribute key and an attribute label in the fields that follow. Product attribute key is the slug of the attribute specified on the attributes page.

7. Click on Save.

The image below is an example of how product attributes will appear beneath the product name in an invoice document.

The below steps will help you add product attributes in a new column within the invoices:

1. Navigate to Invoice/Packing > Invoice > Customize.
2. In the active invoice template, scroll down and click on the product table. The editor pane on the right will show all the elements within the product table.
3. Click on the ‘+’ icon present at the right top corner of the editor pane. A dialog box titled Add new column will pop up.

4. From the Column type dropdown, select Product attribute. On selection, new fields will open up.
5. Add the Product attribute key and a Column header for the new column.

6. Click on Save.
7. Finally, click on Save Template to save the changes for the active template.

The image below is an example of how product attributes will appear in a column within the invoice document.