Adding a 4th column to order printer invoice template to show the line total

[FairWind]

I sell hardware and almost always sell large quantities of a single line item. I am currently migrating to the new order printer app and need to modify the invoice template to not only show the price per piece, but also the total price for that line item. The product table on my invoices currently look like this:

I'd like to have the "Price" column be shifted to the left and become "Price/Pc" and in it's place have another column that is titled "Line Total" that shows the total price for each line item (essentially QTY x Price/Pc).

As a follow-up question, I'd also like to add vertical lines on the table that separate the columns of the table but can't seem to figure that out.

The code for that table currently looks like this:

<table class="table-tabular" style="margin: 1em 0 0 0">
  <thead>
    <tr>
      <th>Qty</th>
      <th>Item</th>
      <th style="text-align: right;">Price</th>
    </tr>
  </thead>
  <tbody>
    {% for line_item in order.line_items %}
      <tr>
        <td>{{ line_item.quantity }}</td>
        <td>{{ line_item.title }}</td>
        <td style="text-align: right;">
          {% if line_item.original_price != line_item.price %}
            <s>{{ line_item.original_price | money }}</s>
          {% endif %}
          {{ line_item.price | money }}
        </td>
      </tr>
    {% endfor %}
    <tr>
      <td colspan="2" style="text-align: right;">Subtotal:</td>
      <td style="text-align: right;">{{ order.subtotal_price | money }}</td>
    </tr>
    {% for discount in order.discounts %}
    <tr>
      <td colspan="2" style="text-align: right;">Includes discount: {% if discount.code %}"{{ discount.code }}"{% endif %}</td>
      <td style="text-align: right;">{{ discount.savings | money }}</td>
    </tr>
    {% endfor %}
    <tr>
      <td colspan="2" style="text-align: right;">Tax:</td>
      <td style="text-align: right;">{{ order.tax_price | money }}</td>
    </tr>
   {% if order.shipping_address %}
  <tr>
    <td colspan="2" style="text-align: right;">
      {% if order.shipping_methods[0].title contains "pickup" %}
        Customer Pickup:
      {% else %}
        Shipping | {{ order.shipping_methods[0].title }}:
      {% endif %}
    </td>
    <td style="text-align: right;">{{ order.shipping_price | money }}</td>
  </tr>
{% endif %}
    <tr>
      <td colspan="2" style="text-align: right;"><strong>Total:</strong></td>
      <td style="text-align: right;"><strong>{{ order.total_price | money }}</strong></td>
    </tr>
    {% if order.net_payment != order.total_net_amount %}
      <tr>
        <td colspan="2" style="text-align: right;">Total Paid:</td>
        <td style="text-align: right;">{{ order.net_payment | money }}</td>
      </tr>
    {% endif %}
    {% if order.total_refunded_amount > 0 %}
      <tr>
        <td colspan="2" style="text-align: right;">Total Refunded:</td>
        <td style="text-align: right;">{{ order.total_refunded_amount | money }}</td>
      </tr>
    {% endif %}
    {% if order.net_payment != order.total_net_amount %}
      <tr>
        <td colspan="2" style="text-align: right;"><strong>Outstanding Amount:</strong></td>
        <td style="text-align: right;"><strong>{{ order.total_price | minus: order.net_payment | money }}</strong></td>
      </tr>
    {% endif %}
  </tbody>
</table>

Any help would be greatly appreciated! Thanks ahead of time.

[Henry_Fordeer]

Hey @FairWind, I think you need a customized invoice according to the specifics of the hardware product.
Customization as you describe needs to involve code editing. Look for professional invoicing apps that support customization to create your own invoice style.

[FairWind]

Your comment isn't very helpful as it doesn't address any of my questions. There are better ways to push your monthly subscription shopify app than by advertising it without providing any help on forums that are meant to be for community help. Plenty of devs here still take the time to respond in a meaningful way and actually help the community.

• I have explored all of the custom solutions that work with the new order printer app, including yours, and they don't meet my needs.

• I do not want to add yet another app that offers professional invoicing and comes with a monthly charge when they are chock full of features that I don't require for my store. 

• I understand that the customization that I have described is going to require coding on the template, that's why I included the code.
• The invoice I have is working just fine apart from that simple changes I want to make to the table.

[MakP · Accepted solution]

Give this a shot:

<style>
    .table-tabular td, .table-tabular th {
        border: 1px solid #e3e3e3;
    }
</style>

<table class="table-tabular" style="margin: 1em 0 0 0">
    <thead>
      <tr>
        <th>Qty</th>
        <th>Item</th>
        <th style="text-align: right;">Price/Pc</th>
        <th style="text-align: right;">Line Total</th>
      </tr>
    </thead>
    <tbody>
      {% for line_item in order.line_items %}
        <tr>
          <td>{{ line_item.quantity }}</td>
          <td>{{ line_item.title }}</td>
          <td style="text-align: right;">
            {% if line_item.original_price != line_item.price %}
              <s>{{ line_item.original_price | money }}</s>
            {% endif %}
            {{ line_item.price | money }}
          </td>
          <td style="text-align: right;">
            {{ line_item.final_line_price | money }}
          </td>
        </tr>
      {% endfor %}
      <tr>
        <td colspan="3" style="text-align: right;">Subtotal:</td>
        <td style="text-align: right;">{{ order.subtotal_price | money }}</td>
      </tr>
      {% for discount in order.discounts %}
      <tr>
        <td colspan="3" style="text-align: right;">Includes discount: {% if discount.code %}"{{ discount.code }}"{% endif %}</td>
        <td style="text-align: right;">{{ discount.savings | money }}</td>
      </tr>
      {% endfor %}
      <tr>
        <td colspan="3" style="text-align: right;">Tax:</td>
        <td style="text-align: right;">{{ order.tax_price | money }}</td>
      </tr>
     {% if order.shipping_address %}
    <tr>
      <td colspan="3" style="text-align: right;">
        {% if order.shipping_methods[0].title contains "pickup" %}
          Customer Pickup:
        {% else %}
          Shipping | {{ order.shipping_methods[0].title }}:
        {% endif %}
      </td>
      <td style="text-align: right;">{{ order.shipping_price | money }}</td>
    </tr>
  {% endif %}
      <tr>
        <td colspan="3" style="text-align: right;"><strong>Total:</strong></td>
        <td style="text-align: right;"><strong>{{ order.total_price | money }}</strong></td>
      </tr>
      {% if order.net_payment != order.total_net_amount %}
        <tr>
          <td colspan="3" style="text-align: right;">Total Paid:</td>
          <td style="text-align: right;">{{ order.net_payment | money }}</td>
        </tr>
      {% endif %}
      {% if order.total_refunded_amount > 0 %}
        <tr>
          <td colspan="3" style="text-align: right;">Total Refunded:</td>
          <td style="text-align: right;">{{ order.total_refunded_amount | money }}</td>
        </tr>
      {% endif %}
      {% if order.net_payment != order.total_net_amount %}
        <tr>
          <td colspan="3" style="text-align: right;"><strong>Outstanding Amount:</strong></td>
          <td style="text-align: right;"><strong>{{ order.total_price | minus: order.net_payment | money }}</strong></td>
        </tr>
      {% endif %}
    </tbody>
  </table>

[FairWind]

Thanks again MakP for another solution. That gives me enough to work with that I can edit the details on my own. Much appreciated!