Add the I.T.ZAP “thanks-receipt.css” stylesheet and Email Header Footer HTML code to your Ecommerce Templates Order Confirmation “thanks.php/asp” web page to instantly achieve an attractive and professional mobile friendly appearance.
Ecommerce Templates v6.8.2 introduced a new design for the Thanks Receipt page using a modern CSS layout, replacing old style <table> elements. This was a significant and necessary improvement, given the trend toward mobile friendly web design. However, that update did also drastically increase the complexity of the Receipt page, with numerous CSS class names together with responsive mobile break points.
While “ectcart.css” provided with the ECT Updater does produce a generic layout, the I.T.ZAP “thanks-receipt.css” introduces these enhancements:
Bold Heading font-weight with grayscale background shading ideally suited for print.
Font-size reduced and padding between lines eliminated to fit more content on each printed page.
Price columns aligned right. Quantity aligned center.
Subtle grayscale shading behind Product Option rows.
On small mobile screens, font-size down scaled and Product ID column hidden.
Removed “href” links from the Printed page. (Prints the plain text link only.)
To complete the layout, it is also necesary to edit Receipt Header and Footer code entered under the STORE ADMIN ⇒ Email Messages section.
The “thanks-receipt.zip” download file here also includes various HTML email message templates that you can edit and adapt for your business to achieve results like you can see in the slideshow above.
You will find this download to be a total, instant solution and a real time saver.
“thanks-receipt.zip” download file contents (9 files)
Explains what you should do with each file included in “thanks-receipt.zip”, as you see here.
Suitable for Ecommerce Templates ASP or PHP v6.8.2 and later releases.
Save this stylesheet in your “css” folder and upload to server.
“thanks-receipt.css” needs to be the last CSS stylesheet loaded (inside an Editable Region) on each of the following Ecommerce Templates Shopping Cart pages:
thanks.php (or asp)
clientlogin.php (or asp)
orderstatus.php (or asp)
latedownload.php (or asp, if you have the Digital Download plug-in enabled.)
<link href="https://yourdomain.com/css/ectcart.css" rel="stylesheet" type="text/css">
<link href="https://yourdomain.com/css/thanks-receipt.css" rel="stylesheet" type="text/css">
Please Note: Substitute “yourdomain.com” with your actual website domain name.
I expect you will already have “ectcart.css” loading on those pages. Leave that in place. “thanks-receipt.css” will override all the “ectcart.css” entries used on those pages, provided it loads last.
Feel free to add your own modifications to the bottom of “thanks-receipt.css”, or just change the existing styles as desired. You will find /* comments */ throughout the stylesheet to explain the purpose of the various div.class-names.
In the “email-messages” folder
The second part to the Thanks Receipt page is the Header and Footer code entered under STORE ADMIN ⇒ Email Messages.
Formatting HTML email messages to appear as intended can be a challenge. These I.T. ZAP Email Templates include both embedded and inline CSS formatting to maximise compatibility across the broad variety of email software used by recipients.
Use of these HTML files is optional. They are merely provided as samples that you can edit and adapt for your own business to achieve a similar result to the layouts you see in the slideshow above.
The files are numbered in the same order as the Edit Email buttons in the Admin Panel. Edit the HTML and CSS code in SOURCE view.
Includes conditional %statusid% numbers; paragraphs that only print according to the current active Order Status.
The footer for “Order Confirmation” and other email messages containing your Business Name, Address and Contact details. The body of the message is surrounded by a <table> to limit the width of the email on Full HD Screens, which makes the order details much easier to read.
The critical Header and Footer code used on both thanks.php/asp and clientlogin.php/asp when customers view “Order History” details.
The source code that I entered into each of the 6 Header, Address and Footer fields to achieve the Ecommerce Templates Administration Panel Invoice and Packing Slip print layouts you can see in the slideshow on my website page here ⇒
Please Note: The end result does require “ectadmincustom.css” available separately. This is the matching partner to “thanks-receipt.css”.
ORDERS ADMIN ⇒ Payment Providers
Sample “Order Confirmation” email messages you might adapt to the purposes of your business, ordered according to the Payment Provider Number in the Admin Panel.
Version 2 Update, 14th March 2018
Upon Receipt Print, force page <body> background: #fff White, font-family: Arial, font-size: 12px and line-height: 1.2, to solve situation where website stylesheet specifies different.
Limit Business Logo size to max-width: 80% and height: auto; so it can never exceed screen width, particularly on small mobile devices.
Business Logo is inserted in STORE ADMIN ⇒ Email Messages. See the sample code in “03-receipt-headers-footers.html”.
The “thanks-receipt.zip” file will become available for you to download after completing the 3-step checkout process.
The price is in Australian AUD$ currency. I.T.ZAP is not registered for and does not charge GST.
All feedback will be much appreciated and most helpful to me. Is there something that did not work in your website layout, or elements you think could be improved? Please do post your comments, positive or negative, down below.