Documentation/Print Invoice, Packing Slip, Delivery Note & Label for WooCommerce/How to reorder product table columns in WooCommerce invoices/labels

How to reorder product table columns in WooCommerce invoices/labels

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
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 customisation

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

WooCommerce Invoice Product table customisation-Code View
WooCommerce Invoice Product table customisation-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 the set up article to know more about the plugin.

  • Was this article helpful?
  • YesNo