Pretty Admin Print Order Page in Shopp

The print order page in the admin of shopp on the order page is fairly atrocious.  Which is odd, since the email receipt looks nice, and uses the exact same html mockup.  To fix this, add a new file in the shopp templates folder named “receipt-admin.php” and paste in the following code to make the admin printouts look much better.

The styles that are added to the top of this file are the same inline styles applied in the receipt sent to the customer.


<style type="text/css">
html { font:13px "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif; padding: 20px; position: relative; text-align: center; background: #efefef; }

#header, #body { width: 700px; margin: 0 auto; text-align: left; }
#header { width:680px;margin:0 auto;text-align:left;padding:0; }
#body { width:600px;margin:0 auto;text-align:left;background:white;padding:40px; }

h1 { font-size:30px; margin-bottom:0; }
h2 { margin-top: 0; color: #999; font-weight: normal; }

p { margin-bottom: 24px; }

address { font-style: normal; }

fieldset { border: none; border-top: 1px solid #dadada; margin: 20px 40px 20px 0; width:200px; }
legend { display: block; font-weight: bold; color: #999; }

table {font-size:12px; clear: both; }
table.transaction th { text-align: left; }
.transaction { clear:both; }
.labels { clear:both; width:100%; }
.labels td { vertical-align: top; }

.billing, .shipping { border:none; border-top:1px solid #dadada; margin:20px 40px 20px 0; }

.order { clear:both; width:100%; overflow:hidden; border:none; }
.order td { border: none; }
.order th { font-weight: bold; text-align: left; }
.order .item { font-weight:bold; text-align:left; width:50%; }
.order td.qty { text-align: center; }
.order .money { text-align: right; }
.total { font-weight:bold; text-align:right; padding:10px 0 0 0; }
td.money { border:none; text-align:right; padding:10px 0 0 0; }
.order .remove { font-size: 12px; }
.order tr.totals th,.order tr.totals td { font-weight:bold; text-align:right; padding:10px 0 0 0; }
</style>
<div id="header">
 <h1><?php shopp('storefront', 'business-name'); ?></h1>
 <h2>Order <?php shopp('purchase','id'); ?></h2>
</div><!--#header-->

<div id="body">
 <?php shopp('purchase','receipt'); ?>
</div><!--#body-->

Scroll to Top