Add Print Receipt To WooCommerce Order Received Page and View Order Page

This adds a “Print receipt” link to the WooCommerce “Order Received” page (the receipt page). It also adds the link to the “View Order” page, as well. The “View Order” page is the one that customers can see from their Recent Orders list in the Account area.

This goes in your functions file.

Example 1

This adds the “Print receipt” link directly above the “Order Details” section on both pages (the “Order Received” page and on the customer’s “View Order” page):

/**
 * Add "Print receipt" link to Order Received page and View Order page
 */
function isa_woo_thankyou() {
	echo '<a href="javascript:window.print()" id="wc-print-button">Print receipt</a>';
}
add_action( 'woocommerce_thankyou', 'isa_woo_thankyou', 1);
add_action( 'woocommerce_view_order', 'isa_woo_thankyou', 8 );

Example 2

Note: Example 1 adds the print link after the “Thank you. Your order has been received” section, and before the “Order Details” section.

On the “Order Received” page, you have the option of moving the “Print receipt” link to the top, above the “Thank you. Your order has been received.” To move the button up there, use this instead of the code above (this will still add the print link to the “View Order” page in the same spot as the code above):

function isa_get_wc_print_receipt_link() {
	return '<a href="javascript:window.print()" id="wc-print-button">Print receipt</a>';
}

/**
 * Add "Print receipt" link to WooCommerce View Order page
 */
function isa_woo_view_order_print_receipt() {
	echo isa_get_wc_print_receipt_link();
}
add_action( 'woocommerce_view_order', 'isa_woo_view_order_print_receipt', 8 );

/**
 * Add "Print receipt" link to WooCommerce Order Received page TOP
 */
function isa_woo_order_print_receipt_top( $text, $order ) {
	$out = isa_get_wc_print_receipt_link();
	return $out . ' ' . $text;
}
add_filter( 'woocommerce_thankyou_order_received_text', 'isa_woo_order_print_receipt_top', 999, 2);

Style The Print Receipt Link To Look Like a Button

Add this CSS to style the Print Receipt link to look like a button. (See how to add CSS.)

#wc-print-button {
    display: inline-block;
    text-decoration:none;
    margin: 8px 10px 8px 0;
    padding: 5px 15px;
    border:0;
    color: #fff;
    background-color: #6496c8;
    border-radius: 17px;
    box-shadow: 1px 1px 1px #888;
    float: right;
}
#wc-print-button:hover {
    opacity: .7;
    color: #fff;
}

Style The Printed Receipt

You can make the printed receipt look better by adding CSS media queries that target the printed layout. The following CSS example is specific to the WordPress Twenty Seventeen theme. If you use the Twenty Seventeen theme, this CSS will make the WooCommerce printed receipt look much better. It makes it all fit on page by reducing the font size and reducing the empty spaces and line breaks. See below for before and after images of what the printed receipt looks like before applying these CSS styles, and after.

@media print {

	body{
		font-size: 11px;
	}

	.site-title,
	.site-description,
	h2,
	h3{
		font-size: 12pt;
	}
	
	.custom-header-media,
	.entry-title,
	#wc-print-button,
	.site-description{
		display: none !important;
	}
	
	.site-branding,
	.custom-header,
	.page:not(.home) #content,
	#content .site-content	{
		margin:0 !important;
		padding:0 !important;
	}

}