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 is now available for purchase as an add-on.

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 | Customizer for WooCommerce PDF Invoices

Since 28th December 2022, this plugin version has been discontinued for purchase. However, support will be continued for existing users.

Home > Docs > WooCommerce PDF Invoices, Packing Slips, Delivery Notes and Shipping Labels > How to reorder product table columns in WooCommerce invoices/labels

How to reorder product table columns in WooCommerce invoices/labels

Last updated on November 8, 2023

Invoice being an inevitable document type in WooCommerce is always in need of customizing to suit varied needs. Even though the plugin provides inbuilt standard templates that can be used for invoices, the store owner may want to have it altered in their own manner.

WooCommerce PDF Invoice Packing Slip Shipping Label plugin is equipped to handle all kinds of documents relevant to your WooCommerce store. It is tailor-made with several options to alter/modify the templates to your needs.

Let’s have a look into how the order of the product table columns within the default invoice template can be rearranged. To begin with, install and activate the plugin.

Once the activation is successful, a new menu Invoice/Packing appears in the WordPress dashboard sidebar. By default, you will be redirected to the landing page as shown below:

WooCommerce Invoice Packing-Documents

Navigate to the Invoice settings. The plugin gives provision to set custom logo, attach invoice PDF in email, set custom invoice number with date formats, and customise the layout of the invoice. To know more about the invoice settings, refer here.

Move on to the Customize settings to reorder the product table columns of the invoice, the window will be as shown below:

WooCommerce Invoice or packing-Invoice Settings- Customize

You can see that the default product table order is Product Image, SKU, Product, Quantity, Price, Total Price. The customisation settings consists of inbuilt templates with predefined arrangement of each component within the invoice. However, you can alter this default view by modifying it from the configuration panel placed at the RHS of the window. The toggle controls which when enabled or disabled will be reflected in the sample invoice template.

To change the product table style, colour or text, head on to the Product Table section of the configuration panel as shown below.

WooCommerce Invoice Product table customisation
WooCommerce Invoice Product table customization

Now, if you need to alter the default order of the product table, switch to the code editor view of the customization window.

WooCommerce Invoice Product table customisation-Code View
WooCommerce Invoice Product table customization-Code View

Scroll down to the class wfte_product_table. If the order required for the product table is Quantity, Product, SKU, Price and finally Total Price. You can insert the HTML in the code editor within the class wfte_product_table as shown below:

<tr>
	<th class="wfte_product_table_head_quantity" col-type="quantity">__[Quantity]__</th>
	<th class="wfte_product_table_head_product wfte_text_left" col-type="product">__[Product]__</th>
	<th class="wfte_product_table_head_sku" col-type="sku">__[SKU]__</th>
	<th class="wfte_product_table_head_price" col-type="price">__[Price]__</th>
        <th class="wfte_product_table_head_total_price" col-type="total_price">__[Total price]__</th>
        <th class="wfte_product_table_head_image" col-type="-image">__[Image]__</th>          
        <th class="wfte_product_table_head_tax_items" col-type="tax_items">[wfte_product_table_tax_item_column_label]</th>
        <th class="wfte_product_table_head_tax" col-type="-tax">__[Total Tax]__</th>     
</tr>

On placing the code, you can see that the default product table order will be replaced as shown below:
WooCommerce Sample Invoice with altered product table order

To obtain the product table in a particular order, simply place the code in the respective order one after the other for it to appear as required in the visual editor.

Refer to the set up article to know more about the plugin.