I am creating fully custom invoice template. And I am having trouble adding products. I’m guessing I need to add my design to “Products” tab, but whatever I put in “Products” tab does not get rendered.
Any hints on how to add products to a custom template?
Please check you’ve configured the custom product on Settings > Custom Fields > Product Fields and checked the column is included on Settings > Invoice Design > Product Columns
I am not using html tags with id entity-details, company-details, company-address, client-details, product-table, task-table, table-totals… in my body of the template. I am using the variables directly like so:
I don’t want to target the style of the table with css.
What remains is to list products. I have a design that I just need to replace hardcoded products with actual invoice products.
I am guessing that the “Products” tab on the “Edit Design” page is a place where I can put my html code for a single product.
Products tab is where I can put my own <tr> style. The preview PDF does not show the changes made on the Products tab, so I had to generate invoice PDF to view the changes. That was the source of my confusion.
Having said that, I would like not to have to use the <table id="product-table"></table> to show products but build my own table with custom columns and such. For example:
<!-- Body Tab -->
<table>
<thead>
<tr>
<!-- custom header -->
<!-- numerated product items (1,2,3,...) -->
<th class="uk-text-right">#</th>
<!-- have the label as a variable -->
<th class="uk-text-left">$product.item_label</th>
<th class="uk-text-center">+</th>
</tr>
</thead>
<tbody id="products">
<!-- here would be rows from the "Products" tab -->
</tbody>
</table>
<!-- Products Tab -->
<tr>
<!-- item array index (1,2,3,...) -->
<td class="uk-text-left">$product.index</td>
<td class="uk-text-right uk-text-nowrap">$product.item</td>
<!-- custom value same for all rows -->
<td class="uk-text-center">+</td>
</tr>
This would allow maximum flexibility with the design.