How to adjust the width of the price in the invoice

Hello,

The most simple solution, is to add some css in your backend file css, have a look on this tutorial to learn how to proceed.
Note that you have to edit your Back-end CSS File (and not the frontend file CSS).

As suggestion, you have several possible css command, like :
- font-size => Have a specific smaller size only for your price
- width => Expand the column where the total price is.
=> From your screenshot, but maybe we are wrong it seems that you are on mobile, if we are correct, I suggest you to learn more about the "@media" ( Documentation ).

Results example :
@media only screen and (max-width: 750px) {
.price_html_class {
font-size: 0.7em;
}
.column_html_class {
width: 120%;
}
}

Hope this will allow you to adjust this display.
Regards

Hello,

If we are talking about adjusting the view invoice, then the story is a little different, you always custom your invoice view (Backend & frontend) but if you want to print and send it to the customer, then you have our plugin pdf invoice .

With this you will have a refine design and everything that you need, if we understand well your need.
Hope this will fit your needs.

Regards

Hello,

That was just a suggestion, now in order to redisgn your invoice view Backend and Frontend, follow me step by step :
1. Open 2 folders(1 for backend & 1 for frontend)
For backend : YourWebsite\administrator\components\com_hikashop\views\order\tmpl\
For frontend : YourWebsite\components\com_hikashop\views\order\tmpl\
2. Open your relative files
For backend : invoice.php
For frontend : show.php
3. Edit your file to add inline css commands, like shown on my screenshot :
For backend : invoice.php around line 341