If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

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:

opencart_2.x._how_to_add_custom_link_to_categories_menu_1

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:

    opencart_2.x._how_to_add_custom_link_to_categories_menu_2

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

    opencart_2.x._how_to_add_custom_link_to_categories_menu_3

  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”:

    opencart_2.x._how_to_add_custom_link_to_categories_menu_4

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:

opencart_2.x._how_to_add_custom_link_to_categories_menu_5

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>

opencart_2.x._how_to_add_custom_link_to_categories_menu_6

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:

opencart_2.x._how_to_add_custom_link_to_categories_menu_7

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