OpenCart 2.x. How to add custom link to categories menu

Hello! This video tutorial shows how to add custom link to categories menu in OpenCart templates.

OpenCart 2.x. How to add custom link to categories menu

It may happen that you want to add some custom link/button to the categories menu in your OpenCart store, e.g. the Contacts link:

Let’s learn how to do that.

1. Using Firebug extension for Firefox or Developer’s tool of any other browser find out the menu class name:

   

2. Then, navigate to /opencart/catalog/view/theme/themeXXX/template/common/ directory on your server and find the header.tpl file:

   

3. Now, open the file for editing and use the CTRL+F/CMND+F key to look for the previously found menu class which is “tm_menu”:

   

The code that calls categories in the categories menu is the following:

<?php if ($categories) {  echo $categories; } ?>

If you want the new link to be displayed before the categories, you should add it right before the aforementioned code and vice-versa.

Let’s say, you want to add Contacts link right after the categories.

Navigate back to the Developer’s tool and check the menu structure – as you can see category links are wrapped in the list with the “menu” class:

Note! It is essential that you add your own link keeping the same HTML structure for it so the same CSS styles are applied to newly created link.

Taking this into consideration, add the following code right after the categories code:

<ul class="menu">
<li>
<a href="http://templatetesting.com/andre/opencart/index.php?route=information/contact">Contact Us</a>
</li>
</ul>

Do not forget to save the file to apply the changes.

Navigate to your site front-end and refresh the page – you can see the Contacts link is successfully added to the categories menu:

This is the end of the tutorial. You have learnt how to add custom link to categories menu in your OpenCart template.

Feel free to check the detailed video tutorial below:

OpenCart 2.x. How to add custom link to categories menu