Specific Template for Category and Product Page

Written by in Tutorials on July 12, 2012  |  38 Comments

specific-opencart-template-for-category-and-product-pages

Set specific template for Category or Product page dynamically will help you to personalise certain page from the other. To do this we will expand OpenCart fallback feature to detect the page Id before load the general template. If necessary, we will check does specific stylesheet is available for the specific template and load it.

How it Works

As you know, OpenCart have fallback feature for loading template. In simple term, OpenCart will find general template (ex.category.tpl) of active theme; if not available, then it will use category.tpl from default theme.

To make specific template load dynamically, we will use the page Id as unique template identifier. And tell OpenCart to load specific template first before the general template. Use $category_id for the category page and $product_id for product page.

Specific Template

I will use category as an example here. As long as you understand how the concept work, you can expand it to not just product template, but also information and manufacturer template.

Original Category controller (catalog/controller/product/category.php):

if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/product/category.tpl')) {
    $this->template = $this->config->get('config_template') . '/template/product/category.tpl';
} else {
    $this->template = 'default/template/product/category.tpl';
}

We will use the $category_id as a unique identifier to load specific templates:

$this->template = $this->config->get('config_template') . '/template/product/category_' . $category_id . '.tpl';

The end code look like this:

if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/product/category_' . $category_id . '.tpl')) {
    $this->template = $this->config->get('config_template') . '/template/product/category_' . $category_id . '.tpl';
} elseif (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/product/category.tpl')) {
    $this->template = $this->config->get('config_template') . '/template/product/category.tpl';
} else {
    $this->template = 'default/template/product/category.tpl';
}

Specific Stylesheet

There is a possibility where we need to load stylesheet specifically for the specific template above, so we will add extra code at Category controller. You can put code bellow before $this->document->setTitle.

if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/stylesheet/category_' . $category_id  .'.css')) {
    $this->document->addStyle('catalog/view/theme/' . $this->config->get('config_template') . '/stylesheet/category_' . $category_id . '.css');
}

$this->document->setTitle($category_info['name']);

Result

Now you can create the specific template with easy and no need to always modificate OpenCart when you need a unique page. To make it easy for you to implement this tutorial on your site we give you the vQmod file version. vQmod file below set specific template for category, product, manufacturer and information template.

Download2115 downloads

When you done with this tutorial or copy vQmod file above to your site, your file structure will look like this:

Folder structure of spesific template

Tags: , , , ,

About the Author

The man behind OpencartNews and EchoThemes.

View all posts by

38 Comments on "Specific Template for Category and Product Page"

  1. φολκσβαγκεν FINANCIAL SERVICES December 1, 2016 at 3:42 am · Reply

    Awesome! Its really remarkable paragraph, I have got much clear idea on the topic of from this article.

  2. Steve Fox July 17, 2016 at 12:12 pm · Reply

    Hey Qahar, the tutorial you uploaded seems to be look amazing but do you have any idea about adding new extra category description field in Opencart admin panel in category section and product section? Where we can add extra information about any category/product and displaying on frontend store under the category page below the list/grid option. I am linger for your quick response.

  3. virtualphones.net November 27, 2015 at 9:12 am · Reply

    It is in reality a nice and useful piece of information. I am satisfied that
    you just shared this useful info with us. Please keep
    us up to date like this. Thank you for sharing.

  4. Jonathan September 2, 2015 at 10:05 am · Reply

    Hi Qahar,

    Is this supposed to be working for Opencart 2.0.3.1?
    Ive tried to install it but so far without luck.

    Best,
    Jonathan

    • Jonathan September 2, 2015 at 3:28 pm ·

      I’ve managed to get this working!

      Thx,
      Jonathan

  5. asyt September 1, 2015 at 9:21 pm · Reply

    Currently it sounds like Expression Engine is the top blogging platform available right now.
    (from what I’ve read) Is that what you are using on your blog?

  6. Weiqun January 27, 2015 at 12:13 pm · Reply

    Hi Qahar,

    The code for changing the layout of a category works great, but the subcategory ‘sub image’ isn’t working with the code. Can you help me?

    Thanks!

  7. netang August 25, 2014 at 4:23 am · Reply

    Thanks!) Your article given (pushed) me good thought!

  8. swed May 25, 2014 at 9:14 pm · Reply

    Hi there Qahar, many thanks for another interesting and useful tutor. I consider this blog to be one of the richest sources of knowledge for OpenCart users on the net. There are quite many sites that offers lots of tuts and articles but quantity will never surpass quality. OpenCart’s forum is poorly organized and/or badly indexed coz its really hard to pinpoint the answer(s) needed. The general forum member is courteous but this is not always the case when it comes to staff behavior. Thanks to OpencartNews I have regained my original positive impression of OpenCart and inclination to use it. I was on the brink to move to another cart when I stumbled over this blog. Please share more of your vast knowledge of OpenCart and I really don’t expect you to give away stuff that constitutes your source of income, nope! Articles like “OpenCart Site Launch Checklist” and “Common OpenCart Errors and How to Solve Them” also brings great value to me.

  9. sonal February 20, 2014 at 7:33 am · Reply

    How can i create same product template for products belonging to same category.
    i.e Products belonging to category one —- Product_catone.tpl (template)
    i.e Products belonging to category two —- Product_cattwo.tpl(template)

  10. NewTress April 27, 2013 at 11:23 pm · Reply

    While this is ideal for the category templates, what would you do for the product template. On our site NewTress.com, we would like to create a different product template that you could select for certain products but not all. Any ideas?

  11. Jack April 11, 2013 at 4:39 am · Reply

    This kakraz what I was looking for a very long time.
    At the same opencart.com there are paid solutions but they do not apply styles = (
    How to use one stylesheet (css) and template (tpl) for all products in a category and subcategories?

    Sorry for my bad english :(

  12. Oliver March 20, 2013 at 1:22 pm · Reply

    If I upload this vQmod code to my opencart website and then create a specific template for one specific page (a category page), how do I tell opencart which template to look for for that particular page?

    • Qahar March 22, 2013 at 3:45 pm ·

      You need to create stylesheet specifically for based on product or category id. You can see the file structure screenshoot on post above.

  13. vishit March 19, 2013 at 8:53 pm · Reply

    Hi,

    I tried this. But getting this error:

    Parse error: syntax error, unexpected $end in /home/USERNAME/public_html/vqmod/vqcache/vq2-catalog_controller_product_category.php on line 4

    Any advice?

  14. George February 15, 2013 at 6:22 pm · Reply

    Dear Qahar hi!

    Great job, I think I’ve found my way there with your helpful article. What I need to do specifically, is remove add to cart function on a specific category. Managed to do this on a category, but can’t also remove this functionality on product’s page.

    Is there a way that all products in the specific category, could miss that functionality? I have removed that hard-cded creating a new category.tpl file for the specific category, but I can’t seem to manage to do it in all products as well.

    I have tried for example product_305.tpl (product’s ID), removed the code that generates the quantity/add to cart buttons but still there, so I guess I’m doin’ something wrong.

    So, my question is this: Is there a way that all included products in this category having one tpl, or maybe one css file in which I could add display:none on some fields so they will not show, without having to do this for each and every product?

    Thank you very much for your time reading this :)

    • Qahar February 16, 2013 at 5:18 am ·

      First, you need to get the category id of product. I suggest you to read:
      http://stackoverflow.com/questions/9883105/get-parent-category-for-product-page-opencart

      Assuming you already get the category id (assuming cat_id = 101) at product controller. Then you can load the specific template: product_cat_101.tpl

      Now, when a product is belog to category with id 101, it will load the specific template.
      I hope that help.

    • George February 16, 2013 at 8:24 am ·

      I have already done this, ’cause I’ve read it below, where you answered it for another person who tried to do something similar maybe. So, the code is up on product.php, on top of product.tpl (both original and _cat_115.tpl -for me-) the code which returns cat ID.

      But it doesn’t seem to work. My category ID is 115, so I did what you said renaming a new .tpl file to product_cat_115.tpl, but it doesn’t seem to work, it loads only original .tpl file :(

      Am I missing something?? Category works completely fine!

    • Qahar February 16, 2013 at 4:09 pm ·

      I suggest you to create a thread in OpenCart forum and pm me the link.
      We can discuss and share code easier there.

    • George February 19, 2013 at 8:33 am ·

      Dear Qahar, hi!

      I’ve started a thread here: http://forum.opencart.com/viewtopic.php?f=21&t=95684&p=383366#p383366

      I don’t know where to find you in that thread and with which nickname. Could you please contact me there maybe?

  15. shape February 4, 2013 at 10:31 pm · Reply

    Hello Qahar! Thanks for this vQmod!
    Is it possible to apply a specific stylesheet to all the products of the same parent category?
    Thanks in advance.

    • shape February 4, 2013 at 11:45 pm ·

      I found it! Inside vQmod file replace this:

      document->setTitle($product_info['name']); ]]>
      config->get(‘config_template’) . ‘/stylesheet/product_’ . $product_id . ‘.css’)) {
      $this->document->addStyle(‘catalog/view/theme/’ . $this->config->get(‘config_template’) . ‘/stylesheet/product_’ . $product_id . ‘.css’);
      } ]]>

      With this:

      model_catalog_product->getProduct($product_id);]]>
      model_catalog_product->getCategories($product_info['product_id']);
      if ($categories){
      $categories_info = $this->model_catalog_category->getCategory($categories[0]['category_id']);
      $this->data['category_id'] = $categories_info['category_id']; }]]>

      document->setTitle($product_info['name']); ]]>
      config->get(‘config_template’) . ‘/stylesheet/category_’ . $categories[0]['category_id'] . ‘.css’)) {
      $this->document->addStyle(‘catalog/view/theme/’ . $this->config->get(‘config_template’) . ‘/stylesheet/category_’ . $categories[0]['category_id'] . ‘.css’);
      } ]]>

      Thanks again!

    • Flatter August 26, 2013 at 12:05 pm ·

      Hi Shape,

      I need the exact same thing on my page but cannot manage to achieve it by following your technique. Can you please be more specific with what needs to be inserted instead of what? I have to point out that i’m not a coder of any sort.
      Thank you in advance for any help.

  16. Frank December 8, 2012 at 4:26 pm · Reply

    Great Post ! Such a simple patch allows so much flexability. Just incorporated into our website and loving the results.

  17. Danny November 14, 2012 at 9:21 am · Reply

    Hi, great solutions.
    My question is:
    How to add $category_id to product_custom.php to make product tamplate for ex. category 44 ?

    • Qahar November 15, 2012 at 7:57 am ·

      I suggest you to look at controller/product/category.php for complete sample
      This is the quick way:

      if (isset($this->request->get['path'])) {
      $parts = explode(‘_’, (string)$this->request->get['path']);
      $category_id = (int)array_pop($parts);
      } else {
      $category_id = 0;
      }

  18. Mark Excell October 30, 2012 at 11:03 pm · Reply

    I did try and use your vQmod, but I think it must conflict with the total import mod I have already have installed.

    For anyone who has the same issue and just wants to have a custom product page template they can alter the core file catalog/controller/product/product.php

    do a find for

    $this->model_catalog_product->updateViewed($this->request->get['product_id']);

    and change the if (straight below the above line) for an elseif and paste the below before the amended line

    if (file_exists(DIR_TEMPLATE . $this->config->get(‘config_template’) . ‘/template/product/product_’ . $product_id . ‘.tpl’)) {

    $this->template = $this->config->get(‘config_template’) . ‘/template/product/product_’ . $product_id . ‘.tpl’;

    }

    What this does is look for a custom page template and use it if it exists then fallback to the normal template, then falls back to the default.

  19. Smiffy October 23, 2012 at 3:51 pm · Reply

    I have managed to get the category page to display differently using the above method, but when I click on a product, the product page reverts back to the default theme for the site.

    Do I need to create a different stylesheet for each product by ID or can this method make the product pages use the same stylesheet as the category?

    • Qahar October 26, 2012 at 1:31 pm ·

      It’s possible to get the category id if you accessing product through category listing page. But when you access it through module (lates, popular etc) then the product doesn’t have category information.
      So creating different stylesheet for each product is the consist solutions.

    • Smiffy October 26, 2012 at 3:00 pm ·

      Thanks for the answer – The problem is that it’s for a customer’s website and not my own, so whereas i would be able to do it if it were my own – I can’t expect the client to do it.

      I guess I need to find another solution – any ideas?

    • Qahar October 31, 2012 at 7:29 am ·

      You need to get the parent category id for product page then use it to load spesific stylesheet.
      I suggest you to read: http://stackoverflow.com/questions/9883105/get-parent-category-for-product-page-opencart

  20. Wonka October 8, 2012 at 5:14 pm · Reply

    Hi,

    I’m trying to add a halloween theme to a category. I’m really new to all this. I have downloaded your xml for VQMOD, but how or where do I edit?

    my domain structure for this category is: http://www.mysite.com/seasonal/halloween-sweets and the category id is 93. What do I do to get this working?

    Thanks in advance

    • Qahar October 10, 2012 at 9:22 am ·

      You need to create catalog/view/theme/your_active_theme/stylesheet/category_93.css.
      Remember that the category_93.css is loaded after stylesheet.css, so you can overwrite stylesheet.css value with new value from category_93.css

  21. Kevin October 6, 2012 at 6:35 pm · Reply

    Sigh .. I spent 10 bucks for something I can do myself..! Thank you for this and expecting the other tutorials ;)

  22. Pobb September 19, 2012 at 11:23 am · Reply

    This works almost as I need it to; how would I apply a category specific stylesheet to all of its sub-categories?

    Cheers.

    • Qahar September 20, 2012 at 1:55 pm ·

      Add code bellow inside vQmod file above after <file name=”catalog/controller/product/category.php”>

      <operation>
      <search position="after"><![CDATA[array_pop($parts)]]></search>
      <add><![CDATA[
      $first_cat_id = (int)array_shift($parts);
      if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/stylesheet/category_' . $first_cat_id . '.css')) {
      $this->document->addStyle('catalog/view/theme/' . $this->config->get('config_template') . '/stylesheet/category_' . $first_cat_id . '.css');
      }
      ]]></add>
      </operation>

  23. herry September 1, 2012 at 6:25 am · Reply

    good job. beutifull web design.

Trackbacks for this post

  1. custom template for every product? | Open Cart Know How

Leave a Comment

comm comm comm