WPPizza Documentation

Customisations WPPizza Autoprint

Adjusting print output of selected autoprint template

Your print template selected MUST be set to “Html” to be able to access the css setting

• Go to “Wppizza -> Templates -> Print”
• Locate the template you have selected to use as your autoprint template
• Make sure this template is set to Type->HTML
• Click on the “code” icon to reveal the “Print Order CSS”
• Edit/Adjust the css as required
• To add header/footer – or other – images to the template, see the examples below, adjust as required and add to your css declarations

//some examples regarding logo top, a logo above summary, a logo below summary, assuming logo height is about 60px (alse adjust padding as required
//logo top
body {
	background-image: url("http://www.domain.com/[somepath]/logo.png");
	background-repeat: no-repeat;
	background-position: center top;
	padding-top:60px;
}
//logo above summary
#summary {
	background-image: url("http://www.domain.com/[somepath]/logo.png");
	background-repeat: no-repeat;
	background-position: center top;
	padding-top:60px;
}
//logo below summary
#summary {
	background-image: url("http://www.domain.com/[somepath]/logo.png");
	background-repeat: no-repeat;
	background-position: center bottom;
	padding-bottom:60px;
}
//enter something in "Footer : text after summary / totals" in wppizza -> localization and add the logo as in the css examples above
//footer localization must not be empty - alternatively simply enter the html in the textbox itself and ignore the css below
#footer {
	background-image: url("http://www.domain.com/[somepath]/logo.png");
	background-repeat: no-repeat;
	background-position: center bottom;
	padding-bottom:60px;
}

wppizza_autoprint_filter_page_format

@param: array
@return: array

add_filter('wppizza_autoprint_filter_page_format', 'myprefix_autoprint_filter_page_format');
function myprefix_autoprint_filter_page_format($pageFormat){

	/* adding your own page format for example */
	$pageFormat['my_format] = array(
		'label' => 'My Format Label',//set some label to identify this in the dropdown
		'paper_size' => array(0, 0, 226.77, 'single'),//in points (example here equates to 80mm x 160mm) if 4th parameters is set to single - as opposed to a distinct height in points - , height will be calculated for single page
		'page_margin' => array(0.1, 0.4),//in cm (top/bottom, right/left) [1cm == 28.3465 pt]
		'page_height_adjustment' => 20, // when forcing single page add an additional value - just to be safe to the calculated pageheight to account for margins.
		'orientation' => 'portrait',//portrait or landscape
		'font_size' => array(6.5, 6.5),//fontsizes - in points - for monospaced/plaintext and html
		'cpl_monospace' => 50,//by default it's 70 characters per line for plaintext templates, this might be too long (depending on font and paper sizeset , so this might need to be less than 70
		'thermal' => true,//if its a thermal printer you want to use this template for

	);
return $pageFormat;
}

wppizza_autoprint_filter_printnode_options

dynamically alter printnode options

@param: array
@param: array
@return: array

add_filter('wppizza_autoprint_filter_printnode_options', 'myprefix_autoprint_filter_printnode_options');
function myprefix_autoprint_filter_printnode_options($printnode_options, $order_details){

	/* 
		example:
		alter the  api key depending on some order value 
	*/
	if($order_details['ordervars']['{some-order-value}']['value'] == 'some value'){
		
		$printnode_options['printnode_api_key'] = 'abcdefg....';
		
	}
	
	/* 
		example:
		alter the printnode printer ids 
		(i.e in this example change printer ids to '123456,789456' instead of what is entered in the plugin settings)
		depending on some order value 
	*/
	if($order_details['ordervars']['{some-order-value}']['value'] == 'some value'){
		
		$printnode_options['printnode_printer_ids'] = '123456,789456'; 
		
	}	
	
	

return $printnode_options;
}

wppizza_autoprint_filter_printnode_id

dynamically change one of the “Printnode ids” you are printing to (make sure your Api Key is valid for this print id !)

@param: str
@param: array
@return: str

add_filter('wppizza_autoprint_filter_printnode_id', 'myprefix_autoprint_filter_printnode_id');
function myprefix_autoprint_filter_printnode_id($printnode_id, $order_details){

	/* 
		example:
		alter the printnode printer id to 987654 if $order_details 
		is some value and original printer id 
		is 123456
	*/
	if($order_details['ordervars']['{some-order-value}']['value'] == 'some value' && $printnode_id = '123456'){
		
		$printnode_id= '987654';
		
	}
	


return $printnode_id;
}

Default css for Autoprint template added on install (in case you would like to reset this to the defaults)

Please note that the absolute font-size will automatically added to this css depending on your plugin settings, therefore the default font-size values are deliberately relative (i.e percentages) here, though you can set things as you wish…

	html, body, table, tbody, tr, td, th, span{margin:0; padding:0; text-align:left;}
	table{width:100%;margin:0 auto 10px auto;}
	th{padding:5px;border-top:2px solid;border-bottom:2px solid;font-size:120%;white-space:nowrap;text-align:center}
	td{padding:0 5px;vertical-align:top;}
	#header tbody > tr > td{text-align:center;padding:0;}
	#header #site_name td{font-size:250%;}
	#header #site_url td{font-size:100%;padding-bottom:5px;}
	#header #site_header td{font-size:130%;}
	#header #site_address td{font-size:130%;}
	#overview {table-layout: fixed;}
	#overview tbody > tr > td{width:50%;word-wrap: break-word;white-space: initial;}
	#overview tbody > tr > td:first-child{text-align:right}
	#overview tbody > tr > td.td-ctr{text-align:center;width:100%;}
	#overview #order_date td {border-top: 2px solid; border-bottom: 2px solid; font-size: 120%; text-align: center;padding: 5px;}
	#overview #order_id td{font-size:140%}
	#overview #payment_due td{font-size:140%}
	#overview #pickup_delivery td{font-size:120%;white-space:normal;text-align:center;width:100%;}
	#overview #self_pickup td{font-size: 120%;padding: 10px 0;}
	#overview #admin_notes td{white-space:normal;text-align:center; width:100%; padding:10px 0;}
	#customer tbody > tr > td{white-space:inherit;}
	#customer tbody > tr > td:first-child{white-space:break-spaces;}
	#order th{text-align:left}
	#order th:first-child,#order th:last-child{width:20px;white-space:nowrap;}
	#order tbody > tr.items > td{padding-top:5px;font-size:100%; word-break:break-all}
	#order tbody > tr.items > td:first-child{text-align:center;word-break:initial}
	#order tbody > tr.items > td:last-child{text-align:right;white-space:nowrap;word-break:initial}
	#order tbody > tr.divider > td > hr {border:none;border-top:1px dotted #AAAAAA;}
	#order .item-blog td{padding:5px 2px 5px 2px; border-bottom:1px solid;font-weight:600;font-size:120%}
	#order .item-category td{padding:5px 2px 2px 2px; border-bottom:1px dashed }
	#summary {border-top:1px solid;border-bottom:1px solid;}
	#summary tbody > tr > td{text-align:right}
	#summary tbody > tr > td:last-child{width:1%;white-space:nowrap;}
	#footer #footer_note td{text-align:center;width:100%;}

Shortcodes

If you wish to display the delivery by post/zip-code selection in a different location

• [wppizza_dbp]

If using google maps option: displaying the *dashboard map widget* showing your orders elsewhere:

• Shortcode: [wppizza_dbp_map]
• Available attributes:
• • orders – orders to display according to status set. default: “new,delivered”. Available: “new,acknowledged,on_hold,processed,delivered,rejected,refunded”
  • polling – interval, in minutes, to query for new orders
  • fullscreen – omit (default), if the map should *not* be full screen.
  • statustoggle – if set, adds a button to each order displayed that allows an order to be marked as delivered
• Example: [wppizza_dbp_map orders="new,delivered" polling="1" fullscreen="1" statustoggle="1"]

Note: If you use this particular shortcode in the frontend somewhere, you most likely want to put this on a page that has been (password) protected !

Examples that will NOT require the “Delivery By Post/Zipcode” plugin

There are certain – relatively simple – situations where the “Delivery By Post/Zipcode” plugin would be unnecessary or indeed complete overkill if you want to achieve some of the below outcomes

Ask customer to select a delivery area/postcode

If you do NOT have DIFFERENT delivery prices for different postcodes or delivery areas but ONLY want to check that your customer has at least selected from a list of selectable delivery area/postcodes

• goto: wppizza->orderform
• rename/relabel one of the custom fields
• check enabled
• check required
• choose type->select
• enter a comma separated list of your delivery areas or postcodes.
• save

Same site, multiple branches

If you want to use the same site for multiple branches and/but want to send the order email to the associated branches email address depending on the branch selected by the customer

• goto: wppizza->orderform
• rename/relabel one of the custom fields (let’s say ccustom6 – hover your mouse over the “enable” button to get the relevant id)
• check enabled
• check required
• choose type->select
• enter a comma separated list of your branches (let’s say “Branch 1, Branch 2, Branch 3” – without the quotes).
• save

Then add the following filter to your [child] themes functions.php (see here if you don’t know about wordpress filters/actions).

add_filter( 'wppizza_filter_email_settings', 'myprefix_filter_email_settings', 10, 3 );
function myprefix_filter_email_settings($email_settings, $recipient, $order) {
	
	// only filter emails to the shop
	if($recipient === 'shop'){
		//set shop email depending on branch selected 
		if($order['sections']['customer']['ccustom6']['value'] === 'Branch 1'){//Branch 1
			$email_settings['AddAddress'][0]['email'] = '[email protected]';
		}
		elseif($order['sections']['customer']['ccustom6']['value'] === 'Branch 2'){//Branch 2
			$email_settings['AddAddress'][0]['email'] = '[email protected]';
		}
		/* and so forth */
		else{
			/*
				all others - set as required here along the lines above, i.e 
				$email_settings['AddAddress'][0]['email'] = '[email protected]';
				or simply don't set anything / ignore 
				to send to the default email address set for the shop in your order settings
			*/
		}
	}

return $email_settings ;
}

PS: If you do NOT need different shop email addresses to send the order to but only want to allow the customer to select from the available branches, you can simply omit the filter above entirely

Troubleshooting

Cart empty on checkout when changing post/zipcode

If the above is the case, the required column in the database was not created. This might be due to some permission issue somewhere at time of installation or an outdated mysql version. If this is the case, try the following

• goto WPPizza -> Post/Zipcodes
• click on “Settings” [Tab at the top]
• enable “Verify table column”
• save

Typically this solves the issue but get in contact if it does not, but make sure you enable debug first and check your debug.log for any related entries

CSS Declaration Examples and Filters available using WPPizza – Pdf Invoices

Using your own font (this must be a truetype font – see also “Know Issues” below)

To use your own font, follow the guide below:

• Go to “WPPizza -> Settings-> PDF Invoices”
• Make sure the template selected is of “Format: HTML” (additional CSS declarations will be ignored for “Plaintext” Templates)
• The font url used in your CSS must be the ABSOLUTE PATH to your font.ttf
• If necessary, ensure you ask for permission to utilise the font (if using a commercial font for example)
• Set “Global – PDF Font [Html]” to “– Custom Font –“
• Enter your font declaration – as outlined in the below CSS example – and preview the PDF output
• If your font selected is not being used, make sure you clear the font cache by clicking on the “Clear Font Cache” button (especially and every time you change the path to the font you want to use)
• If you are happy with the display/output of the PDF, Save your settings

	/* 
	 CSS example:
	 using an invented myfont.ttf / myfont-bold.ttf / myfont-italic.ttf /myfont-italicbold.ttf  
	 for the relevant font-weights. 
	 If there is only a myfont.ttf (and no distinct bold/italc etc .ttf) use that instead for all src urls
	*/
	/* src:url must be an ABSOLUTE path to a TRUETYPE font */ 
	@font-face{
		font-family: "MyFont"; 
		font-style: normal; 
		font-weight: normal; 
		src: url("[absolute/server/path/to]/myfont.ttf") format("truetype");
	}
	@font-face{
		font-family: "MyFont"; 
		font-style: normal; 
		font-weight: bold; 
		src: url("[absolute/server/path/to]/myfont-bold.ttf") format("truetype");
	}
	@font-face{
		font-family: "MyFont"; 
		font-style: italic; 
		font-weight: normal; 
		src: url("[absolute/server/path/to]/myfont-italic.ttf") format("truetype");
	}
	@font-face{
		font-family: "MyFont"; 
		font-style: italic; 
		font-weight: bold; 
		src: url("[absolute/server/path/to]/myfont-italicbold.ttf") format("truetype");
	}
	
	/*
	 overriding previous font faces for all elements 
	 (!important might not always be necessary here, but wont do much harm) 
	*/
	html,body,table,tbody,tr,td,th,span,div{
		font-family:'MyFont' !important;
	}

Known issues using fonts:

• Not all fonts will support all character sets / languages. Many fonts simply do not have character support for Asian/Non-Western languages or provide support for the default icons in the WPPizza – Add Ingredients” extension for half/half, quarters (If used). Therefore, if you see a ‘?’ or some square boxes in your pdf output instead of the appropriate character, you will have to use a different font I’m afraid (or use the inbuilt ones into the plugin if that is an option)

Adding additional CSS

Note: Any additional CSS entered in the textbox will only be applied to “Format:HTML” templates.

• Many, but not all, possible CSS that would normally be valid for html documents will be understood by the dompdf library in use. KEEP IT SIMPLE (and use valid css)
• For security reasons, any images you use in your CSS MUST reside on the same domain.
• To view the html elements from which the PDF will be generated, use the preview button next to the CSS textarea and your browsers element inspector to find the element you wish to target
• For font-sizes in particular, I recommend you use relative sizes like ‘%’ instead of pixels
• In some cases you might have to add ‘!important’ to your css
• If you wish, you can also enter these declarations directly into the css are for the print template you are using. However, they would then also apply if you choose to use this template for other purposes (though this could be prevented from prefixing every declaration with body#wppizza_pdfinv which is only applied when generating these PDFs)

/* Example - adding a background image to your header - left aligned */
#header{
	background-image:url('http[s]://www.yourdomain.com/[my/server/path]/myimage.png');
	background-repeat: no-repeat;
	background-position: left;
}
//Note: "background-size" is not supported, make sure you size your image according to your requirements. Images must reside on the same domain.

/* Examples - changing margins */
	body{margin:0 !important}//zero margin
	body{margin:2cm 1cm !important}//top,bottom 2cm | left,right 1cm

/* Example - making fontsizes bigger/smaller/bold of a particular element */
	#overview #order_id td {font-size:50%}//making order id (if enabled) smaller
	#summary #total td {font-weight:bold}//bolding the "total" in the summary
/* 
	etc etc , you get the idea. if necessary, you might have to add !important in some cases, depending on what your particular scenario
*/
	
/* 
	Targeting the footer (which is not visible in the css previews but will be rendered in the PDFs)
	you will most likely need an !important here to override the default of 
	color:#666666; text-align:center; font-size:80% 
	
	the "position" is dynamic depending on paper margins but is by default similar to
	position: fixed; bottom: 0.75cm; left: 0.75cm; right: 0.75cm;
	if you want to override it
*/
	footer{color:red !important}

/* Example - background image for refunded orders - images must be on the same domain */
	body.payment-refunded{
		background-image:url('http[s]://www.yourdomain.com/[my/server/path]/refunded.png');
		background-repeat: no-repeat;
		background-position: center;
	}

/* Example - background image prepaid or delivered status - image must be on the same domain */
	body.payment-prepaid,body.order_status-delivered{
		background-image:url('http[s]://www.yourdomain.com/[my/server/path]/paid.png');
		background-repeat: no-repeat;
		background-position: center;
	}

/* 
	other statuses that might be available depending on your specific settings (this follows the status set for each order in the order history):
	
	body.payment-on_delivery{}
	body.order_status-new{}
	body.order_status-acknowledged{}
	body.order_status-on_hold{}
	body.order_status-processed{}
	body.order_status-custom_1{}
	body.order_status-custom_2{}
	body.order_status-custom_3{}
	body.order_status-custom_4{}
*/

//Note: "background-size" is not supported, make sure you size your image according to your requirements. Images must reside on the same domain.

Enabling other inbuilt PDF formats using filter: ‘wppizza_pdfinv_format’

Additional formats are available by using the filter as follows:

@param: array
@return: array

add_filter('wppizza_pdfinv_format', 'myprefix_pdfinv_format');
function myprefix_pdfinv_format($format){
	/* adding A5 */
	$format['A5'] = array(
		'label' => 'A5', //label
		'page_margin' => array(0.5, 0.5), //top, left margin (in cm)
		'font_size' => array(7, 7) //font size - in pt (plaintext, html). the inbuilt A4/letter/legal format use 8pt, if omitted will default to dompdfs default of 12pt
	);

return $format;
}

full list of formats available with suggested margins/font sizes you could use in the function above

	// A Format
	$format['A3'] = array('label' => 'A3', 'page_margin' => array(0.5, 0.5), 'font_size' => array(10, 10));
// 	$format['A4'] = array('label' => 'A4', 'page_margin' => array(0.5, 0.5), 'font_size' => array(8, 8));/* inbuilt into plugin */
	$format['A5'] = array('label' => 'A5', 'page_margin' => array(0.5, 0.5), 'font_size' => array(7, 7));
	$format['A6'] = array('label' => 'A6', 'page_margin' => array(0.5, 0.5), 'font_size' => array(6, 6),);
	$format['A7'] = array('label' => 'A7', 'page_margin' => array(0.5, 0.5), 'font_size' => array(4.5, 4.5),);
	$format['A8'] = array('label' => 'A8', 'page_margin' => array(0.5, 0.5), 'font_size' => array(3, 3),);
	$format['A9'] = array('label' => 'A9', 'page_margin' => array(0.5, 0.5), 'font_size' => array(2, 2),);
	$format['A10'] = array('label' => 'A10', 'page_margin' => array(0.5, 0.5), 'font_size' => array(1.5, 1.5),);

	// B Format
	$format['B3'] = array('label' => 'B3', 'page_margin' => array(0.5, 0.5), 'font_size' => array(10, 10));
	$format['B4'] = array('label' => 'B4', 'page_margin' => array(0.5, 0.5), 'font_size' => array(8, 8));
	$format['B5'] = array('label' => 'B5', 'page_margin' => array(0.5, 0.5), 'font_size' => array(7, 7),);
	$format['B6'] = array('label' => 'B6', 'page_margin' => array(0.5, 0.5), 'font_size' => array(6.5, 6.5),);
	$format['B7'] = array('label' => 'B7', 'page_margin' => array(0.5, 0.5), 'font_size' => array(4.5, 4.5),);
	$format['B8'] = array('label' => 'B8', 'page_margin' => array(0.5, 0.5), 'font_size' => array(3, 3),);
	$format['B9'] = array('label' => 'B9', 'page_margin' => array(0.5, 0.5), 'font_size' => array(2, 2),);
	$format['B10'] = array('label' => 'B10','page_margin' => array(0.5, 0.5), 'font_size' => array(1.5, 1.5),);

	// C Format
	$format['C3'] = array('label' => 'C3', 'page_margin' => array(0.5, 0.5), 'font_size' => array(10, 10));
	$format['C4'] = array('label' => 'C4', 'page_margin' => array(0.5, 0.5), 'font_size' => array(8, 8));
	$format['C5'] = array('label' => 'C5', 'page_margin' => array(0.5, 0.5), 'font_size' => array(7, 7),);
	$format['C6'] = array('label' => 'C6', 'page_margin' => array(0.5, 0.5), 'font_size' => array(6.5, 6.5),);
	$format['C7'] = array('label' => 'C7', 'page_margin' => array(0.5, 0.5), 'font_size' => array(4.5, 4.5),);
	$format['C8'] = array('label' => 'C8', 'page_margin' => array(0.5, 0.5), 'font_size' => array(3, 3),);
	$format['C9'] = array('label' => 'C9', 'page_margin' => array(0.5, 0.5), 'font_size' => array(2, 2),);
	$format['C10'] = array('label' => 'C10', 'page_margin' => array(0.5, 0.5), 'font_size' => array(1.5, 1.5),);

	// Misc Standards
//	$format['letter'] = array('label' => 'Letter', 'page_margin' => array(0.5, 0.5), 'font_size' => array(8, 8));/* inbuilt into plugin */
//	$format['legal'] = array('label' => 'Legal', 'page_margin' => array(0.5, 0.5), 'font_size' => array(8, 8));/* inbuilt into plugin */
	$format['ledger'] = array('label' => 'Ledger', 'page_margin' => array(0.5, 0.5), 'font_size' => array(10, 10));
	$format['tabloid'] = array('label' => 'Tabloid', 'page_margin' => array(0.5, 0.5), 'font_size' => array(10, 10));
	$format['executive'] = array('label' => 'Executive', 'page_margin' => array(0.5, 0.5), 'font_size' => array(10.5, 10.5));
	$format['folio'] = array('label' => 'Folio');

	// Misc Fixed Sizes
	$format['8.5x11'] = array('label' => '8.5x11', 'page_margin' => array(0.5, 0.5),);
	$format['8.5x14'] = array('label' => '8.5x14', 'page_margin' => array(0.5, 0.5),);
	$format['11x17'] = array('label' => '11x17', 'page_margin' => array(0.5, 0.5),);

Adding custom formats using filter: ‘wppizza_pdfinv_custom_format’

If you wish to add your own custom format use the filter like so :

@param: array
@return: array

add_filter('wppizza_pdfinv_custom_format', 'myprefix_pdfinv_format_custom');
function myprefix_pdfinv_format_custom($format){
	$format['80mm_160mm'] = array(//use A-Za-z0-9 (whithout spaces) for the key
		'label' => 'My Format (80mmx160mm)',//set the label
		'paper_size' => array(0, 0, 226, 552),//in points (example here equates to 80mm x 160mm)
		'page_margin' => array(0.25, 0.25),//page_margin in cm (top, left)
		'orientation' => 'portrait',//portrait or landscape
		'font_size' => array(5, 5),//fontsizes - in points - for plaintext,html. omit for default of 12pt (necessity depends on paper size set )
	);

return $format;
}