Array ( [0] => GDPR Cookie Consent [1] => CCPA [2] => Getting Started [3] => Changelog [4] => GDPR [5] => Add and Categorise Cookies [8] => Auto-block cookies with Script Blocker [13] => Create Privacy Policy Page [15] => Customize Cookie Notice [18] => Customize Settings Pop up [19] => Change Toggle button color [21] => Display Cookie List [22] => FAQ [23] => Getting Started [24] => Multilingual Support [25] => Overview [26] => Import Export Suite for WooCommerce [28] => Order / Coupon / Subscription Export Import Plugin for WooCommerce [29] => PayPal Express Checkout Payment Gateway for WooCommerce [30] => Changelog [31] => Getting Started [32] => Issue Refund [34] => Video Tutorial [35] => Print Invoice, Packing Slip, Delivery Note & Label for WooCommerce [36] => Address Label [39] => Changelog [41] => Credit Note [43] => Delivery Note [45] => Dispatch Label [47] => FAQ [48] => Invoice [49] => Adding meta data [50] => Customizations [51] => Email PDF Invoice [52] => FAQ [53] => Getting Started [54] => Invoice Number [55] => Multilingual Support [56] => Overview [57] => Packing Slip [58] => Customizations [59] => Getting Started [60] => Pick List [62] => Proforma Invoice [65] => Shipping Label [68] => Product Import Export Plugin for WooCommerce [69] => Smart Coupons for WooCommerce [70] => Abandoned Cart Discount [71] => Advanced Coupon Options [72] => Bulk Generate [73] => Changelog [76] => Getting Started [78] => Import Coupon [80] => Sales Countdown Timer [81] => SignUp Coupon [82] => Store Credit [84] => Volume/Quantity based coupon [85] => Stripe Payment Gateway for WooCommerce [86] => Alipay [87] => Apple Pay [88] => Changelog [89] => Compatibility with Subscription [90] => Getting Started [93] => SCA Ready [94] => Stripe Checkout [95] => Stripe Overview [96] => Stripe via Credit Card [97] => Troubleshoot [98] => Video Tutorial [99] => Subscriptions for WooCommerce [100] => Changelog [101] => Email Notifications [102] => FAQ [103] => Getting Started [104] => Manually Add or Modify Subscriptions [105] => Subscriptions Payment Gateway Guide [106] => URL Coupons for WooCommerce [107] => Changelog [108] => FAQ [109] => Getting Started [110] => Import URL Coupons [111] => QR Code Coupon [112] => WordPress Users & WooCommerce Customers Import Export )

Documentation/Print Invoice, Packing Slip, Delivery Note & Label for WooCommerce/How 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:

<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

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