80 mm printer

Hi @zendevweb,

Thank you for your update and for sharing your requirements.

Based on your needs, our developer colleague has provided a tailored solution that applies the 80mm receipt size specifically to receipt templates, while leaving A4 invoices unaffected. The approach involves checking the template type and applying custom CSS only when printing receipts.

Please update your active theme’s “functions.php” with the following code:

function print_paper_resize() {
	$template_type = wcdn_get_template_type();
	if ( $template_type === 'receipt' ) {
    ?>
		<style>
			/* CSS Media Queries for Print
			------------------------------------------*/
			@media print {
				body {
					font-size: 8.5pt;
					max-width: 80mm;
					margin: auto!important;
					font-weight: 550;
				}
				.shipping-address{
					width:80%!important;
				}
				.billing-address{
					width:70%!important;
					margin-bottom:1em!important;
				}
				h2,h3{
					margin-bottom:0!important;
				}
				th{
					padding-bottom:0!important;
					padding-left:0.5em!important;
				}
				td{
					padding:0.35em 0.35em 0!important;
				}
				.order-addresses{
					margin-bottom:1em!important;
				}
				.order-info li strong {
					font-weight:600!important;
					display:inline!important;
					padding-right:1.4em!important;
				}
				.order-info{
					margin-bottom:0!important;
				}
				.order-branding{
					margin-bottom:0!important;
				}
				.product-quantity, .total-quantity{
					padding-left:1.8em!important;
				}
				.includes_tax {
					white-space:nowrap!important;
				}
				.content {
				/* Remove padding to not generate empty follow up pages */
					padding-bottom: 0;
				}
			}
		</style>
    <?php
	}
}
add_action( 'wcdn_head', 'print_paper_resize', 10, 1 );

Since you mentioned these are currently too large, you can target these elements more precisely in your CSS. For example, if they have specific classes or IDs, you could add CSS rules like:

/* Example: Adjust font size for specific order details / 
.receipt .order-number, 
.receipt .order-date, 
.receipt .payment-method { 
font-size: 0.9em; / or any size you prefer */
}

Please inspect the HTML of your receipt to identify the exact classes or IDs for these elements, then add similar CSS rules within the <style> block above.

Please note that this code applies only to the print view of receipts, ensuring your invoices (A4) remain unaffected. Also, you need to adjust the CSS selectors based on your theme’s HTML structure for precise targeting.

Feel free to implement this solution and let us know if it meets your needs or if you require further customization.

Hi @zendevweb,

Thank you for providing the screenshot.

Yes, you can remove the domain name from printing the invoice. Please follow the steps below.
1. After clicking the print option in our print invoice, a print preview window will appear where you can see the URL.

2. Look for the “More settings” or “More options” button in the print preview window and click on it. This may be represented by three dots or lines, depending on the browser you’re using.

3. Please check for an option “Headers and footers”. Uncheck the checkbox if it is selected that mentions headers and footers to ensure they don’t appear on the printed page.

4. Once you’ve made the necessary adjustments, you can see that the URL will be hidden.

The specific steps might slightly vary depending on the web browser you are using.

For your convenience, here are reference screenshots:
Screenshot 1: https://prnt.sc/mjxRPk4YYts8
Screenshot 2: https://prnt.sc/wbpd5HoW6cPd

Please do the same and let us know if this information helps you to achieve your requirements.

Feel free to reach out if you need any further assistance.