Edit where the Qty Colum sits on invoices

1

I have been trying to figure out how to move the Qty column but I am Html illiterate.

My partner wants it to read as:

Qty — Description – Unit Price —Amount

when he fills in the invoice and prints it.

The tax columns are also fine where they are but we do not using GST as of yet so we do not fill those in.

I believe the Html line for it is in the body of the theme but not sure where to make changes or what to insert and where to move the Qty column to the first position.

We are using the original Theme

{% if business.logo != null %}{% endif %}
{{ title }} 
            <table style="margin-bottom: 20px"><tr>
                <td>
                    <div><b>{{ recipient.name }}</b> {{ recipient.code }}</div>
                    <div>{{ recipient.address | newline_to_br }}</div>
                    <div>{{ recipient.identifier }}</div>
                </td>
                <td style="border-right-width: 1px; padding-right: 20px; text-align: right">
                    {% for field in fields %}
                    <div style="font-weight: bold">{{ field.label }}</div>
                    <div style="margin-bottom: 10px">{{ field.text }}</div>
                    {% endfor %}
                </td>
                <td style="padding-left: 20px; width: 200px">
                    <div style="font-weight: bold">{{ business.name }}</div>
                    <div>{{ business.address | newline_to_br }}</div>
                    <div>{{ business.identifier }}</div>
                </td>
            </tr></table>

            <div style="font-size: 14px; font-weight: bold; margin-bottom: 20px">{{ description }}</div>
        </td>
    </tr>
    <tr>
        {% for column in table.columns %}            
        <td style="font-weight: bold; padding: 5px 10px; text-align: {{ column.align }}; border-left-width: 1px; border-bottom-width: 1px; border-top-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}{% if column.nowrap %}; white-space: nowrap; width: 80px{% endif %}">{{ column.label }}</td>
        {% endfor %}
    </tr>
</thead>
<tbody>
    {% for row in table.rows %}
    <tr>
        {% for cell in row.cells %}
        <td style="padding: 5px 10px; text-align: {{ table.columns[forloop.index0].align }}; border-left-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}{% if table.columns[forloop.index0].nowrap %}; white-space: nowrap; width: 80px{% endif %}">{{ cell.text | newline_to_br }}</td>
        {% endfor %}
    </tr>
    {% endfor %}
    {% for column in table.columns %}            
        <td style="border-bottom-width: 1px; border-left-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}">&nbsp;</td>
    {% endfor %}
    {% for total in table.totals %}
    <tr>
        <td colspan="{{ table.columns | size | minus:1 }}" style="padding: 5px 10px; text-align: right{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.label }}</td>
        <td style="border-color: #000; border-left-width: 1px; white-space: nowrap; border-right-width: 1px; border-bottom-width: 1px; padding: 5px 10px; text-align: right{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.text }}</td>
    </tr>
    {% endfor %}

    {% for field in custom_fields %}
    <tr>
        <td colspan="99">
            <div style="font-weight: bold; padding-top: 20px">{{ field.label }}</div>
            <div>{{ field.text | newline_to_br }}</div>
        </td>
    </tr>
    {% endfor %}

    {% if emphasis.text != null and emphasis.positive %}
    <tr><td colspan="99"><div style="text-align: center; margin-top: 40px"><span style="color: #006400; border-width: 5px; border-color: #006400; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div></td></tr>
    {% endif %}

    {% if emphasis.text != null and emphasis.negative %}
    <tr><td colspan="99"><div style="text-align: center; margin-top: 40px"><span style="color: #FF0000; border-width: 5px; border-color: #FF0000; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div></td></tr>
    {% endif %}
        
</tbody>

Any help appreciated. I understand any changes would have to go into a new custom theme.

2

I think what you want could be accomplished, but not by someone who self-identifies as HTML- illiterate. It would require multiple loops through the variable array. This is well beyond the scope of this forum.

3

I did it in old version,
But I can’t do this to new version.

Anyone can help me?

Qty — Description – Unit Price —Amount

when he fills in the invoice and prints it.

4

Please see reply from @Tut above:

If you’ve already attempted to solve it, show us what you’ve done so far and if it’s a simple adjustment I may be able to point you in the right direction.

However, if you are not familiar with HTML at all, please seek a local web developer / programmer to assist you instead.

5

Sorry, I mean when printing it.not necessarily when filling up.

6

The same answer applies :slight_smile:

Manager uses a combination of HTML and Liquid syntax to control the layout of custom invoices, quotes, etc.

This is used to generate both the on-screen view and printable PDF views.

7

@SMARTCOOK, you have asked the very same question in another post. Please don’t double post. It confuses other users and lessens the chance you will receive help.