DocumentationPrint Invoice, Packing Slip, Delivery Note & Label for WooCommerceHow to reorder product table columns in WooCommerce invoice

How to reorder product table columns in WooCommerce invoice

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 which can be used for invoices, 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 for 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

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:

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

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