DISCLAIMER: The main purpose of this article is to show how the Template Editor tool can help you find a template for editing, but not to describe all possible code alterations. You should be skilled in .html to customize the code.

The Template Editor tool of the Theme Tweaker add-on allows a store administrator editing 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 after an order has been placed.

To do this, you’ll need to:

1. Place an order when logged in as a store administrator and stop on the invoice page.

2. Open the Template Editor tool and turn on the “Pick templates from page” toggle.

This will allow you to see the elements that can be customized highlighted on the page when hovering a mouse over them.

You will also see the template tree for this page.

3. Pick an element on the page with a mouse to highlight it.

4. Click on the highlighted area to see the name of a .twig file that corresponds with 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.

5. Customize the template code the way you need it.

Let’s say that 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.

This 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:

(1) 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 %}">

(2) 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 %}

6. 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 list 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.

Did this answer your question?