How to Add the Manufacturer Logo to Your Product Page in OpenCart 2.x and 3.x

In this blog post we will show you how you can add the manufacturer logo to your product page instead of the line ‘Brand: X’ in an easy and fast manner. 

Modification compatible with OpenCart 2.x

Modifying the core files (Not Recommended)

The first way of execution is done by changing the core files. This approach, however, is not recommended as it might affect and cause the malfunctioning of some of your other extensions.

Go to catalog/view/theme/your-theme/template/product/product.tpl and find the following line:

<li><?php echo $text_manufacturer; ?> <a href="<?php echo $manufacturers; ?>"><?php echo $manufacturer; ?></a></li>

Replace the line with the following code:

<?php if($manufacturers_img) { ?>
    <li><a href="<?php echo $manufacturers; ?>"><?php echo ($manufacturers_img) ? '<img src="'.$manufacturers_img.'" title="'.$manufacturer.'" />' : '' ;?></a></li>
<?php } else { ?>
    <li><?php echo $text_manufacturer; ?> <a href="<?php echo $manufacturers; ?>"><?php echo $manufacturer; ?></a></li>
<?php } ?>

 

Save the document and make sure that it is uploaded to your server. Then go to catalog/controller/product/product.php and locate the following statement:

$this->load->model('tool/image');

And add the following lines after it:

$manufacturer_image = $this->model_catalog_manufacturer->getManufacturer($product_info['manufacturer_id']);
if($manufacturer_image){
    $data['manufacturers_img'] = $this->model_tool_image->resize($manufacturer_image['image'], 50, 50);
} else  {
    $data['manufacturers_img'] = false;
}

Note that the two numbers in the following code snippet stand for the width and the height of the image respectively, so you can change them depending on your own preferences:   

resize($manufacturer_image['image'], 50, 50);

Make sure that you have saved and uploaded this file as well.

Congratulations! Now you have added the manufacturer logo to your product page!

Using OCMod as a rewriting engine (Recommended)

The second approach might take a bit more time, but it is the safer, the more flexible and the preferred one. By using this approach you would not have to modify your core files and you would be able to enable or disable the modification any time you want. In general, it involves the creation of an OCmod modification file and the uploading of this file through your built-in OC 2.x extension installer.

First, you will need to create a file by using any text editor (the suggested options would be Notepad or Dreamweaver) and copy and paste the following code:

<modification>
    <name>Add Manufacturer Logo on Product Page by iSenseLabs</name>
            <version>1.1.1</version>
        	<link>https://isenselabs.com</link>
        	<author>iSenseLabs</author>
        	<code>isenselabs_addmanufacturerlogo</code>
        	
        	<file path="catalog/view/theme/*/template/product/product.tpl">
                   	<operation>
                               	<search><![CDATA[
                               	<li><?php echo $text_manufacturer; ?> <a href="<?php echo $manufacturers; ?>"><?php echo $manufacturer; ?></a></li>
                               	]]>
                               	</search>
                                           	
                               	<add position="replace"><![CDATA[
                               	<?php if($manufacturers_img) { ?>
                                           	<li><a href="<?php echo $manufacturers; ?>"><?php echo ($manufacturers_img) ? '<img src="'.$manufacturers_img.'" title="'.$manufacturer.'" />' : '' ;?></a></li>
                               	<?php } else { ?>
                                           	<li><?php echo $text_manufacturer; ?> <a href="<?php echo $manufacturers; ?>"><?php echo $manufacturer; ?></a></li>
                               	<?php } ?>
                               	 ]]>
                               	</add>
                   	</operation>
        	</file>
        	<file path="catalog/controller/product/product.php">
                   	<operation>
                               	<search><![CDATA[
                               	$this->load->model('tool/image');
                               	]]>
                               	</search>
                               	<add position="after"><![CDATA[
                               	$manufacturer_image = $this->model_catalog_manufacturer->getManufacturer($product_info['manufacturer_id']);
 
                               	 if($manufacturer_image){
                                           	$data['manufacturers_img'] = $this->model_tool_image->resize($manufacturer_image['image'], 50, 50);
                               	 } else {
                                           	$data['manufacturers_img'] = false;
                               	 }
                               	]]>
                               	</add>
                   	</operation>
        	</file>
</modification>

Then you have to save this file with the following name: namebyyourchoice.ocmod.xml. Please, keep in mind that the .ocmod.xml extension is compulsory if you want OpenCart to correctly apply your modification.

After you have created the file, go to your OpenCart Store Administration Page => Extensions => Extension Installer and upload the file. After you get the Success Message go to Extensions => Modifications and click on the Refresh button in order to apply the new changes.

Modification compatible with OpenCart 3.x

Using the Event System for OpenCart 3.x

Instead of using OCMod again, we will utilize the Events in OpenCart 3.x to ensure better theme compatibility for the modification.

Step 1

Upload the event controller.

Just download this OCMod file and upload it in your OpenCart Extension Installer: Dashboard > Extensions > Installer.


 

Step 2

Upload the event.

Now download this SQL file (unzip it) and upload the .sql file inside to your OpenCart database: Dashboard > System > Maintenance > Backup / Restore


 

Step 3 (Optional)

Modify the image dimensions.

You can modify the manufacturer image dimensions by editing the event file you uploaded in Step 1:

catalog/controller/extension/common/product_manufacturer_image.php

The image dimensions are set on line 5 and line 6 in the .php file.


Congratulations! Now you have added the manufacturer logo to your product page!

The final result should be something similar to this one:

Join 11,000+ subscribers receiving actionable E-commerce advice

* Unsubscribe any time

Trending blogs

comments powered by Disqus