How to add store logo and product images to invoices in OpenCart 2.x

In this blog post we will show you how to add your store logo and product images to your invoices, changing the default OpenCart 2.x invoice template.

Unfortunately, OpenCart has not built-in editor for editing invoice template within the admin panel and we have to change it by modifying the code itself.

Note: This modification works only with OpenCart 2.x and we assume that you have already installed it.

OCMod modification

Since modifying core files is not recommended, because of other modules malfunctioning, we will use OCMod modification to edit the template for the invoices.

This method does not modify the core functionality of OpenCart and this is why we are going to use this one.

First thing you should do is to create a new XML file and name it yourcustommodificationname.ocmod.xml.  Please, make sure that your file has the extension .ocmod.xml, because otherwise it won’t be recognized by the integrated Extension installer in OpenCart 2.x.

Add logo in the header

If we want to include the logo in the header of the invoice, we need to add these lines in the file:

<modification>
    <name>Add images to invoice by iSenseLabs</name>
	<version>1.0 (Initial)</version>	
	<link>https://isenselabs.com</link>
	<code>isense_invoice</code>
	<author>iSenseLabs</author>

	<file path="admin/controller/sale/order.php">
		<operation>
			<search><![CDATA[public function invoice() {]]></search>
			<add position="after"><![CDATA[
				// ISENSELABS.COM CODE STARTS HERE
				$this->load->model('tool/image');
				// ISENSELABS.COM CODE ENDS HERE
			]]></add>
		</operation>

		<operation>
			<search index="0"><![CDATA[$this->response->setOutput($this->load->view('sale/order_invoice]]></search>
			<add position="before"><![CDATA[
				// ISENSELABS.COM CODE STARTS HERE
		
				if (isset($this->request->server['HTTPS']) && (($this->request->server['HTTPS'] == 'on') || ($this->request->server['HTTPS'] == '1'))) {
					$server = $this->config->get('config_ssl');
				} else {
					$server = $this->config->get('config_url');
				}
				
				if ($this->config->get('config_logo') && file_exists(DIR_IMAGE . $this->config->get('config_logo'))) {
					$data['logo'] = $server . 'image/' . $this->config->get('config_logo');
				} else {
					$data['logo'] = '';
				}
				
				// ISENSELABS.COM CODE ENDS HERE
			]]></add>
		</operation>
	</file>

	<file path="admin/view/template/sale/order_invoice.tpl">
		<operation>
			<search><![CDATA[<div style="page-break-after: always;">]]></search>
			<add position="after"><![CDATA[
				<!-- ISENSELABS.COM CODE STARTS HERE -->

				<?php if(isset($logo) && !empty($logo)) { ?>
            		<img src="../<?php echo $logo ?>" style="margin: 15px 0 15px 0;" />
           		<?php } ?>

				<!-- ISENSELABS.COM CODE ENDS HERE -->
			]]></add>
		</operation>
	</file>
</modification>

Then, we should go to your OpenCart Store Administration Page > Extensions > Extension Installer and upload the file. After we get the message ‘Success: You have installed your extension!’, we need to go to Extensions > Modifications and click on the Refresh button to apply the changes.

The invoices should look like this:

​

Add product images

If we want also to add product images to our invoices, we have to add this code in our current modification file or we can create a new one:

<file path="admin/controller/sale/order.php">
    <operation>
		<search><![CDATA[public function invoice() {]]></search>
		<add position="after"><![CDATA[
			// ISENSELABS.COM CODE STARTS HERE

			$this->load->model('catalog/product'); 

			// ISENSELABS.COM CODE ENDS HERE
		]]></add>
	</operation>

	<operation>
		<search index="0"><![CDATA[$product_data[] = array(]]></search>
		<add position="before"><![CDATA[
			// ISENSELABS.COM CODE STARTS HERE
				$width = 100;
				$height = 100;
				$product_info = $this->model_catalog_product->getProduct($product['product_id']);	
				if (version_compare(VERSION, '2.3', '>=')) {
                    $this->load->model('tool/image');
                }
                if ($product_info['image']) {
					$image = $this->model_tool_image->resize($product_info['image'], $width, $height);
				} else {
					$image = $this->model_tool_image->resize('placeholder.png', $width, $height);
				}	
			// ISENSELABS.COM CODE ENDS HERE
		]]></add>
	</operation>

	<operation>
		<search index="0"><![CDATA[$product_data[] = array(]]></search>
		<add position="after"><![CDATA[
			'image'	   => $image, // ISENSELABS.COM
		]]></add>
	</operation>
</file>

<file path="admin/view/template/sale/order_invoice.tpl">
	<operation>
		<search><![CDATA[<?php echo $product['name']; ?>]]></search>
		<add position="replace"><![CDATA[
			<!-- ISENSELABS.COM CODE STARTS HERE -->

			<?php if(isset($product['image']) && !empty($product['image'])) { ?>
        		<img src="<?php echo $product['image'] ?>" />
       		<?php } ?>

			<!-- ISENSELABS.COM CODE ENDS HERE -->
            <?php echo $product['name']; ?>
		]]></add>
	</operation>
</file>

After that, we need to upload the modification file to our OpenCart store and the final result will be this:

Change product image size

Here we will show you how to customize the code in the OCMod file. This modification is not big, but you can do some minor changes.

If you need smaller or bigger product images, you can change these two rows:

$width = 100;
$height = 100;

After you made the changes you need to save your .ocmod.xml file. Before uploading the modification, you need to delete the old one from Extensions > Modifications, check the modification ‘Add images to invoice by iSenseLabs’ and click on the red delete button. You need also to clear and refresh the modifications. After that you will be able to upload the new .ocmod.xml file, using the integrated Extension Installer in OpenCart 2.x.

Final words

We hope that you will find this tutorial helpful and that it will give you ideas how to freshen up your invoice.

  Download Source