Edit OpenCart template

Posted on January 14, 2013 by Jacob Nicholson

2 Minutes, 45 Seconds to Read

In this tutorial we will show you a quick example of how you can edit a OpenCart template to change the default layout that is used for your OpenCart site. As an example let’s say you have created a gift voucher in OpenCart. By default it’s just going to show a link for customers to redeem their gift voucher at the bottom of the page in your site map. If you don’t have your categories menu at the top filled all the way up, adding a link to your gift vouchers in this menu might be handy for your customers.

Edit the OpenCart header template

By default when you install OpenCart all of the templates will be located in the following directory:

/catalog/view/theme/default/template/

  1. Open up the File Manager Code Editor in cPanel.
  2. navigate to common template directory

    Navigate to the following directory in the File Manager:

    /catalog/view/theme/default/template/common/

  3. Right click on the header.tpl file and select Code Edit.

    If the encoding check pop-up displays, you can simply click Edit

  4. done editing header template click on save changes

    Around line 93 will be where the menu at at the top of your page completes. You’ll want to insert a link to your gift voucher page here. The link you’ll want to use should look like this: <p> <span class="code_block"></span></p> </li><li><a href="./index.php?route=account/voucher">Gift Voucher</a></li> <p> </p> <p>The section of code that you're adding this to is the <strong>DIV</strong> with the ID <strong>menu</strong>, the full code once you're done should look like this:</p> <pre> </p><div id="menu"> <p></p> <ul> <!--?php foreach ($categories as $category) { ?--> <p></p> <li><a href="<?php echo $category['href']; ?>"><!--?php echo $category['name']; ?--></a> <br> <!--?php if ($category['children']) { ?--> <div> <!--?php for ($i = 0; $i < count($category['children']);) { ?--> <p></p> <ul> <!--?php $j = $i + ceil(count($category['children']) / $category['column']); ?--><br> <!--?php for (; $i < $j; $i++) { ?--><br> <!--?php if (isset($category['children'][$i])) { ?--> <p></p> <li><a href="<?php echo $category['children'][$i]['href']; ?>"><!--?php echo $category['children'][$i]['name']; ?--></a></li> <p> <!--?php } ?--><br> <!--?php } ?--> </p></ul> <p> <!--?php } ?--> </p></div> <p> <!--?php } ?--> </p></li> <p> <!--?php } ?--><br> <strong></strong></p><strong> <li><a href="./index.php?route=account/voucher">Gift Voucher</a></li> </strong><p><strong></strong> </p></ul> </div>


    5. Once you’re done making your modification, click on Save Changes at the top right.

Now you should have a nice visible link to your gift vouchers right in your top menu, instead of tucked away down in the bottom menu. Here is a before and after showing what this change accomplished:

Before After

Thoughts on “Edit OpenCart template”

  • Hi,

    How to locate customer’s name on the top menu (INSIDE THE HEADER )?

    I am asking for opencart fastor theme  2.1.0.1.

    Thank you.

    Edis

    Reply

    • It looks like opencart stores the username in the session data, so you should be able to edit the menu in your theme to show that data, there is a link to the opencart forums showing more info on how to get that session data here

      Reply

  • Except footer,evrything including menu sliders,product list etc ,are appearing twice on my opencart homepage.Kindly tell me the solution for the same

    Reply

    • We are happy to help, but will need some additional information. Can you provide a link to the website for us to test?

      What were you working on when this started happening?

      Thank you,
      John-Paul

      Reply

  • hello …

    i want to add buy now button in my opencart 2.1.0.2 by coding so what changes should i make in my product.tpl and where…how to do this

    plz help me thanks in advance….

    Reply

    • Hell Pavan,

      The issue of adding a button in your OpenCart site depends on the template you’re using. We do not provide code (as it’s normally outside of our support scope). Make sure to make use of the OpenCart support forum. They may already have an answer that you can use. Here’s a post that may relate to your question: OpenCart forums – How to add a button in the Journal theme.

      I hope that helps to answer your question! If you require further assistance, please let us know!

      Regards,
      Arnel C.

      Reply

  • Hi Everyone,

    I have doubt regarding while creating a new module. I am creating new module. In this module it will have the following options:

    1. Module Name

    2. Status

    3. Textbox

    4. Image

    5. Product List 

    6. Sort.

    I have doubt can we save image paths in any existing table in database or we need to create a new table in database for saving this module images and other data. 

    And I would like to know whether it is possible to create new table in database for the new modules and using them.

    Thanks in advance…………..!

    Thanks & Regards

       J.Phanindra

    Reply

  • hello,

    after disable the extension nothing happen. my slideshow homepage is not working now.

    with regards

    prateek

    Reply

    • Hello Prateek,

      If you’re having problems with your OpenCart site because you installed the wrong version of an application, then you may want to speak to the developers of that particular extension in order to determine if they can help you to correct the behavior. The whatsapp share is a third party application and they will best know how to approach the problem for you.

      I hope that helps to answer your question! If you require further assistance, please let us know!

      Regards,
      Arnel C.

      Reply

  • hi

    i insalled wrong version of whatsapp share on my opencart version 2.0.2.0 and now my home page slideshow is not working and after disable this whatsapp share nothing is going ok so please tell me now how i solve this problem.

    with regards

    prateek

     

    Reply

  • sir,

    i upload extension whatsapp share on my website http://www.monthlybazaar.co.in .then my other modules disabled from my front page of website . we make new slideshow and featured item but front page is not shown. so please help me on this matter as early as possible.

    thanks

    Reply

    • Hello,

      What happens when you disable the extension? There may be a problem with the extension and the version of OpenCart you are using.

      Best Regards,
      TJ Edens

      Reply

  • Hi,

             I am using Opencart 1.5.6.4 for my site on localhost and I want the open catalog view and also want to add vqmod in my site plz suggest me how to configure it?

    Reply

    • I need help with my Opencart Store arrangement. My homepage only show on one stretched product line. I want it to fall on the next line www.*******.com.ng. just like normal default template.
      thanks all

      Reply

  • Hi opencart team,

    I am working with e-commerce website using opencart. I need to bind a landing page for a website. When a user is clicked on any category on that landing page then he will be redirected to that category page displaying products list. But here the problem is that landing page and other pages will have different designs. So that can any one help how to bind this pages. Can I know whether their is  possibility for this in opencart.

    Thanks in advance………….

    Thanks & Regards,

       J.Phanindra.

    Reply

    • It is certainly possible to have a link on your landing page that leads to a category page. However, I admit your request about the pages having different design requires some clarification for me. Do you want the pages to have a different look and feel? Or, do you want the design to be different depending on the category your visitor may choose.

      Reply

  • Hi Arnel,

    Thanks for info. I would like to know one more thing regarding developing extensions in opencart. Can you tell me any reference tutorial for developing an extensions for an opencart, So that it will help full to study and develop any new extensions. 

     

    Thanks & Regards,

        J.Phanindra

    Reply

    • Hello bhuvan,

      Thank you for contacting us. Since I could not find a built-in way to change your menu header color in OpenCart, you will have to custom code a solution (such as suggested here in the official OpenCart forums) or use a 3rd party plugin (such as Live Theme Editor ).

      Thank you,
      John-Paul

      Reply

  • Hi,

     

    I am new to opencart. Can anyone help how should I need to customize my design by adding some features like new arrivals, need to display products according to category in main page. And also I need to desing an intro page. Please anyone help for this.

     

    Thanks,

    Phanindra

    Reply

    • Hello Jallipalli,

      Sorry for the confusion in using OpenCart. We unfortunately don’t provide services for OpenCart design, though we do have many articles related to OpenCart that may help. Many of the options you’re talking about typically require an extension module, or it may simply be a part of the OpenCart functionality. You can also check out the official OpenCart documentation. They have links to other (paid) options that provide information about what you’re trying to do.

      I hope this helps to answer your question, please let us know if you require any further assistance.

      Regards,
      Arnel C.

      Reply

  • One of service prowider had made with open cart 1.5.6 and theme nicole-fashion. How can I change the link path for the Header MEnu  as the website was earlier with a different name and then it migrated to a new name but some Menu Header still showing links with the previous website where that website name is not existing and it giving a problem. How can solve this problem

    Reply

    • Hello Francisco,

      Thank you for contacting us about editing your header in OpenCart. I’m not sure exactly what you mean by “link path” for header menu. The above article offers advice on how to edit the files. Was there a particular piece of code you were having trouble accessing?

      Reply

  • Hello! please I need help in Opencart 2.1.0.1 in the header cart button I can’t remove price and word -item(s)- I had edit language file at \catalog\language\english\common/cart.php 

    $_[‘text_items’]     = ‘%s’;

    but it didn’t help. After reload page it shows 0 but when I add to cart items it became again 1 Item(s) – 100$

    Reply

  • Dear Scott,

    Thanks for your wonderful support here. Just have few question for my opencart 2.0 portal. Can you please help.

    1. How to add few manual codes only on header part of homepage of website.

    2. How to add canonical tag on home page

    3. how to configure the 301 redirect for the homepage. As not able to login in my admin after adding 301 redirect. Please suggest.

    Thanks Scott

    Reply

    • Hello Ed,

      Thanks for the question about changing the OpenCart theme name. Changing the theme name isn’t a normal part of the usage for modifying OpenCart themes. I did look up the issue and the best I can find is the same topic being discussed in the OpenCart support forum. You may want to post the question with the OpenCart developers/support forum for the appropriate answer.

      If you have any further questions or comments, please let us know.

      Regards,
      Arnel C.

      Reply

    • Hello Arpit,

      1. How to add few manual codes only on header part of homepage of website.

      You have to edit the template file that makes up the theme of your OpenCart site. The files will differ from theme to theme, so you may need to look at your theme files to determine the exact file to change.

      2. How to add canonical tag on home page

      Best way to do this is to obtain an third party extension .

      3. how to configure the 301 redirect for the homepage. As not able to login in my admin after adding 301 redirect.

      This issue is often discussed within the OpenCart support forums. Please see this post for a possible answer to your question. If you’re having problems with logging in, please make sure to undo your 301 first. There are also extensions for OpenCart that make this much easier.

      I hope this helps to answer your question, please let us know if you require any further assistance.

      Regards,
      Arnel C.

      Reply

  • Dear Arnel,

    I really appreciate if you could guide me to change the Open Cart Theme Name which I purchased. As source page someone can see the theme name, I have tried many ways but still struggling to do so.

     

    Thank you very much.

    Reply

  • On the oc returns page there is a back button that ships the user to a login page.  The back button url is in the html code.  I cannot find the html code to change the url the home page.  Would you please tell me where I can find that specific html code.   oc version 2.1.0.1

     

    Thanks

    Reply

    • Hello Matt L.,

      Thanks for the qeustion about changing the code on the returns page. If it’s not a module/extension then you would need to find a templates page and modify it or the CSS. The issue is discussed in this OpenCart support forum post.

      I hope this helps to answer your question, please let us know if you require any further assistance.

      Regards,
      Arnel C.

      Reply

  • elo.

     

    My opencart contact page has this error 

     

    Notice: Undefined variable: site_key in /home/techgearmobile/public_html/ecommerce/catalog/view/theme/default/template/information/contact.tpl on line 133

    Reply

    • Hello Joshua,

      Sorry for the problem. I was not familiar with the error, but I did find something about in the OpenCart Support Community. Please click on the link and review the possible solutions offered.

      If you have any further questions or comments, please let us know.

      Regards,
      Arnel C.

      Reply

  • Hi All

    I have purchased Open Cart Theme, now I need to change the theme name, because of is someone view the source code they can find the theme name,

    Please advice

     

    Sure

    Reply

    • Hello Sandal,

      The issue you are facing is coding for the different steps of that checkout. We can not provide that information unfortunately (as it’s custom code), but you are in the right location for where it will need to be. You will need to identify each stage and then change the CSS requirement for each step. You may want to post to the OpenCart development forums for further assistance on that issue. Apologies that we can’t provide the code for this particular issue.

      Kindest regards,
      Arnel C.

      Reply

    • Hello Gokul k,

      Thanks for the question about editing the menu bar. Unfortunately, if the change you’re seeking is beyond the tutorial above, then you will need to most likely consult with the OpenCart support forum for additional assistance. Check out this post in regards to the topic. There may be more information from other who have already made changes along the lines of what you’re trying to do.

      Apologies that we can’t provide you the code for what you’re trying to accomplish. If you have any further questions or comments, please let us know.

      Regards,
      Arnel C.

      Reply

  • I am sorry but I know how to change the menu bar colors or any other color, It is from stylesheet.css or sometimes from bootstrapmin.css. I am in trouble at the checkout page where there are atleast 6 steps and color of each step heading is same. I it I want to add a functionality that if a person is on step 2 that is registration then the heading color of step 2 is green and rest are as before. If he switch to step 3 then this heading would be green and rest are same.

    Reply

  • Hi I am using OC2.x default theme. I want to edit the checkout page, that the panel heading color for the closed panel should be differ from open panel. As when a customer is at step 1 then the heading color of step 1 is black and all other heading are in grey as default. tHANKS in aDVANCE

    Reply

    • Hello Sandal Shukla,

      You will need to make manual changes in the CSS for the theme. This is generally the stylesheet.css for the theme. Check out this post from the OpenCart support forums. It provides more information on what should be changed and how to get the color you’ll need for the change.

      I hope this helps to answer your question, please let us know if you require any further assistance.

      Regards,
      Arnel C.

      Reply

  • opencart 1.5.x to opencart 2.x update and module also update. the module with update to change code with 2.x fomate and the class to use catalog module-> modeule file function index() to give public or protected which one is working .. some time public  to working and protected working ..

    and also i have know module have differ to this class indexing ,

    Reply

    • Hello Gokul,

      Unfortunately we currently have no support articles for OpenCart 2.x. We have not yet begun to work with it.

      Kindest Regards,
      Scott M

      Reply

  • Hi john, this forum for openchart or else sir?

    i got some headache for develop opencart could you give me reference abour customize template for opencart?

     

    thanks john

    Reply

    • Hello putra,

      Thank you for contacting us. This is a Support forum for InMotion Hosting, and we are happy to guide you. Here is a link to the official OpenCart Support.

      The above tutorial is just a basic guide on editing your opencart template, but we do not have any more in-depth guides at this time.

      Thank you,
      John-Paul

      Reply

  • Hi, Support Can i know your chat ID for fast response?

    Because Iam doing to change coding button for my site opencart for purpose e-commerce could you help me how to do that sir?

     

    My ID Chat Yahoo : ********

    Plz ASAP can adding me to your chat

     

    Thanx

    Reply

  • Hello I am new to open cart ……
    I want to know if i can customized my theme by Adding any extra CSS file  or i can edit any css file so that i can have my own  choice of theme ……..

    Thanks in advance ……

    Reply

    • Hello Shaon,

      Yes you can customize the CSS files within the themes directory. You would just need to follow the guide below on how to do so.

      Best Regards,
      TJ Edens

      Reply

  • Hey, thanks for the reply, I saw the thread and that’s exactly what I want to do, but the answer isn’t given.

    Someone has told to change a specific code, but what it should be changed to isn’t given.

    Iam just an amateur and have no idea what to change it too.

    If you can provide with a test code I can try and let you know how it goes, otherwise I’ll just have to keep the Sub-Category duplication method for now.

    Thank You

    Varun Anand

    Reply

    • Hello Varun,

      Thank you for contacting us. I looked at your site, and it looks like the theme is coded to display the food this way. For example, the “Categories” menu lists categories, not “products” beneath it. Most likely, you will have to custom code a solution for listing your product under a category menu.

      I found a similar question in the Official OpenCart community forums, where they offer possible solutions. But, you will have to work with your code, and test/develop as you go.

      Thank you,
      John-Paul

      Reply

  • Hi,

    This is my first Opencart install and all has gone smoothely. I have modified a couple of .tpl files in the default theme, for instance the header and footer .tpl files amongst a couple of others. I am running v2.0.2.0 and an upgrade is available to 2.0.3.1 is available. Will I need to keep the diff files I have created with the changes and make the edits again to these .tpl files? or will they not be overwritten in the upgrade?

    Thank You!

    Reply

    • Hello Kevin,

      Yes, you should KEEP your changed code somewhere, so that when the update arrives it can be re-applied as needed. Teh developers don’t know what customization would have been made to templates, so any changes are generally kept outside of the original TPL files and then applied as necessary.

      I hope this helps to answer your question, please let us know if you require any further assistance.

      Regards,
      Arnel C.

      Reply

    • Hello Varun,

      Before we continue looking at your problem with the products not appearing categories, can you please give us the version of OpenCart that you’re using? It would help us in troubleshooting the problem, please.

      If you have any further questions or comments, please let us know.

      Regards,
      Arnel C.

      Reply

  • Hey, thanks for the reply, firstly I found how to change categories, it can be done by changing the ‘echo’ to ‘Menu'(or anything) from ‘Categories’ in the Header.php file.

    Secondly my products are in various categories, but they aren’t displaying directly in the categories drop down menu.

    http://Www.hungermustdie.com

    See, under categories, I have asubcategory named N.Veg, under that there is a product called Butter Chicken, but I had to make a totally different category called butter chicken with the product to be displayed under N.Veg.

    If you click on ‘Butter Chicken’, you will be directed to a subcategories named ‘butter chicken’ from where you can access the actual product ‘butter chicken’. I cannot directly link up butter chicken to the drop down menu for some reason.

    Reply

  • Thanks for the reply, but Iam still stuck at how to place products directly under the categories menu.

    Reply

    • Hello Varun,

      I spoke with our design team who work with OpenCart regularly and they advised that a product can be in as little as one category or as many as all categories on your site, but they do have to be in at least one category to display in the menu dropdown.

      Kindest Regards,
      Scott M

      Reply

  • Hey, I have been searching for a long time now and this is one of the main things letting me go live.

    I want to display products directly under the categories menu.

    For instance in my Categories I have a sub Category called ‘N.Veg’, under that I want to directly place my product link.

    For now I have to make Categories-N.Veg–Chicken Burger(Subcategory of the same name as the product)-Chicken Burger(The actual product).

    Also I want to change the name ‘Categories’ to Main Menu.

    Hope you understand me and can help.

    My domain http://www.hungermustdie.com

    Any help would be really appreciated.

     

    Thank You

    Varun Anand

    Reply

    • Hello Varun,

      You would need to alter the theme directly to change the name from “Categories” to “Main Menu”. You may find this somewhere in the core code of the theme.

      Kindest Regards,
      Scott M

      Reply

    • Hello ravi,

      I am not quite sure what your question is. Could you give as much detail as possible?

      Kindest Regards,
      Scott M

      Reply

  • Hi Scott – tnx for info and your swift reply.

    I’ll try if I can find a possibility to do this and will inform you later if I succeed or not.

    All the best

    /Christer Allvin

    Reply

  • Hi

    I am using Opencart Version 1.5.6.4. Is it possible to hide/show alternatives on a product with a yes/no alternative i.e. I have a product with 2 standard alternatives and if the customer is satisfied with this I don’t want to show all extras unless he want to see this. Just to make choice more simple. If possible  – how do I do this?

    Thanks in advance

    /Christer

    Reply

    • Hello Christer,

      That is not a standard feature of OpenCart and I am not sure of any extensions that have this feature off the top of my head. You may need to search through the extension library and evaluate the different features to see if one exists.

      Kindest Regards,
      Scott M

      Reply

  • hi, I’m devloping a site which uploaded 2 years ago by someone else and now compony wants me to edit check out page, but I cant see it!!How can I modified it? regards.

     

    Reply

    • Hello Eli,

      The checkout template file is located at atalog/view/theme/default/template/checkout/checkout.tpl

      Kindest Regards,
      Scott M

      Reply

  • Hi, 

    I want to change the menu color of the default them. I am using opencart 2.0. Kindly suggest how can I change the mousehover color and menu color.

     

    Thanks

    Aashi

    Reply

    • Hello Aashi,

      You normally will not be able to change the colors of the mouse hover or menus in themes without customizing the themes. Check out theLive Color Customizer recently released for OpenCart 2.0. This may meet your needs. If not, then you would need to get the Theme Customizer in order to change the theme without having to wade through the theme’s code.

      I hope this helps to answer your question, please let us know if you require any further assistance.

      Regards,
      Arnel C.

      Reply

  • Hi, am new to Open Cart.

    Please help me out the following issues

    1.How to integrate facebook,twitter etc to show to my opencart website front page

    2.How integrate my country payment processor(interswitch)

    3.How to change the default currency to my local currency

    4.Is it possible to edit the footer and the header?how do i achieve that.

    pls pictorial steps

    thanks

     

    Reply

Was this article helpful? Let us know!

Need More Help?

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com

Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!