Customizing Invoice Page (X-Cart 5.4.x and earlier)

DISCLAIMER: The primary purpose of this article is to demonstrate how the Template Editor tool can help you find a template for editing, but not to describe all possible code alterations. HTML skills are required to customize the code.

The Template Editor tool of the Theme Tweaker add-on allows a store administrator to edit templates directly in the storefront. As an example, we will consider the invoice page customizations.

One of the possible ways to change a default invoice layout is to edit the invoice page of a newly-placed order.

To do this, you'll need to:

When logged in as a store administrator, place an order and stop on the invoice page.
Open the Template Editor tool and turn on the "Pick templates from page" toggle.

You will see the elements that can be customized highlighted on the page if hovering a mouse over them.

You will also see the template tree for this page.
Pick an element on the page with a mouse to highlight it.
Click on the highlighted area to see the name of a .twig file corresponding to this element and the file code.

We selected the 'Shipping Address' info block as an example. The template that corresponds with it is common/order/invoice/parts/bottom.address.shipping.twig.

The address fields that you see in the 'Shipping address' block are defined on the Address fields page of your store Admin area (Store setup -> Cart & Checkout).

For more info on managing address fields, see Customer Account Management.

Customize the template code the way you need it.

We need, e.g., to place the 'Billing address' block first and the 'Shipping address' block next to it.

For this purpose:

Locate the common/order/invoice/parts/bottom.address.shipping.twig template in the Template tree.
Go one level up and locate the template that embeds both the shipping and billing address elements.

It is the common/order/invoice/parts/bottom.twig template in our case.

Click on the template name to see the code.

To switch the 'Shipping Address' and 'Billing Address' blocks:

Find the following line in the common/order/invoice/parts/bottom.twig template

<table cellspacing="0" class="addresses
{% if this.order.isShippingSectionVisible() %} S{% endif %}
{% if this.order.isPaymentSectionVisible() %} B{% endif %}">

change the order of the code units

{% if this.order.isPaymentSectionVisible() %} B{% endif %}

and

{% if this.order.isShippingSectionVisible() %}S{% endif %}

so that the line becomes:

<table cellspacing="0" class="addresses
{% if this.order.isPaymentSectionVisible() %} B{% endif %}
{% if this.order.isShippingSectionVisible() %} S{% endif %}">

Likewise, switch the <_if_> units that go next. Place the second unit first.

Unit 1

{% if this.order.isShippingSectionVisible() %}
     <td class="address shipping">
       <div class="wrapper{% if not this.order.trackingNumbers.isEmpty() %} tracking-info-section-included{% endif %}">
       {{ widget_list('invoice.bottom.address.shipping', baddress=this.order.profile.billing_address, saddress=this.order.profile.shipping_address) }}
       </div>
     </td>
   {% endif %}

Unit 2

{% if this.order.isPaymentSectionVisible() %}
     <td class="address payment{% if this.order.isShippingSectionVisible() %} payment-wrapping{% endif %}">
       <div class="wrapper">
       {{ widget_list('invoice.bottom.address.billing', baddress=this.order.profile.billing_address, saddress=this.order.profile.shipping_address) }}
       </div>
     </td>
   {% endif %}

Click the Save button to make the changes active.

As a result, the invoice page will look as follows:

The customized template will be automatically renamed from common/order/invoice/parts/bottom.twig to theme_tweaker/customer/order/invoice/parts/bottom.twig and will be listed on the Edited Templates page of the store's Admin area (Look & Feel -> Edited templates).

If a custom template is disabled or deleted, this cancels the changes it applies and reverts the page to its default look.

Related pages: