Software Developer

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;
	}

}
Printed receipt for WooCommerce Order on Twenty Seventeen Theme

The printed receipt for a WooCommerce Order on Twenty Seventeen Theme is 2 pages long.

Printed Receipt for WooCommerce Order with CSS @print media query

The printed receipt for the same WooCommerce order, after adding the CSS @print media query. Notice that the receipt is now minimized to fit on 1 page.

By

We've 10 Responses

  1. December 14th, 2014 at 7:06 am

    Excellent, just what I was looking for. I ended up using this so that it looks like a button:

    <p><a href="javascript:window.print()" id="print-button" class="button">Print Receipt</a></p>
    
    avatar
  2. August 6th, 2017 at 10:57 am

    Thank you! It really works!
    How can I display this button at the bottom of the page, below the table? couldn’t find this particular hook….

    avatar

Questions and Comments are Welcome

Your email address will not be published. All comments will be moderated.

Please wrap code in "code" bracket tags like this:

[code]

YOUR CODE HERE 

[/code]