Aug 10, 2015

Ketan Patel

Custom Product Field in Custom Theme Opencart

In any project you may need some kind of customization because it's not required that everyone satisfied with the default behaviour of the functionalities provided by the software/source. Regarding the opencart custom product fields, I have already written one series on the same topic. It was for the default theme and as I said, if you are having custom theme then you need to made some other changes to get the things working.







My previous article on adding custom product field has became very popular and many users have written thanking messages and comments, but few users have faced difficulty with the custom theme. So here, I am going to explain you what are the changes required when you are using the custom opencart theme.


Please take backup of the source code and database before making any changes.
All the changes explained in this tutorial are tested on the opencart latest verison 2.0.3.1
I am assuming that you have properly installed opencart.



I'm going to use the following custom theme "Ancart". Thanks to focusthemes for providing theme as FREE. Here is the name for the same.

Ancart Free Responsive Opencart Theme


Now below is structure at opencartdemo/upload/catalog/view/





Whatever custom theme you are using, but for the adding custom product field, admin section level changes will be same as explained in the previous tutorial. So you can refer those steps to make the changes required for the admin section. So, once you completed with the admin section changes, we can move ahead for the changes required for the front end side.



Changes Required for Front End Section


For any custom theme you are using, you required to make some different changes in view section only. Controller, model and language files changes will be same as explained in the old post regarding the front end section changes. So I request you to make the changes as explained in the below post(only for the controller, model and language files. Leave the changes of the view files).




In previous article for the default theme we have to make changes in the following files:

catalog/view/theme/default/template/product/product.tpl
catalog/view/theme/default/template/product/search.tpl
catalog/view/theme/default/template/product/compare.tpl


Now for the custom theme, you just need to make change in your custom theme(ancart here) files instead of the default one.

catalog/view/theme/ancart/template/product/product.tpl
catalog/view/theme/ancart/template/product/search.tpl
catalog/view/theme/ancart/template/product/compare.tpl


Now make the same changes explained in the previous article in these custom theme view files and you will get the custom product field displayed in your custom theme.


This custom theme "Ancart" is built with the base of default theme, so there are design changes only. The structure is same as the default one so you can easily find all the content blocks and code exactly in this theme that we have in default one. But, Its not compulsory in all the cases. There are many premium opencart themes available in the market, whose content and the code structure in the view files can be different than the default theme.


say for example,

If there is no such exact code in your custom theme:

<div class="tab-pane active" id="tab-description"><?php echo $description; ?>

It might be possible that theme has its own different or extra class added  like:

<div class="tab-pane-one activetab" id="tab-description"><?php echo $description; ?>

In such cases, try to find the opencart variables like:

<?php echo $description; ?>



They will never changed. So you can find your code block where you need to make changes and then you can add your custom product field changes as explained in the previous article. You just have to follow the same process if your custom theme has different code structure.


Conclusion Points


We have mainly two articles required to add the custom product field in opencart.

For admin section :
http://www.php-dev-zone.com/2015/01/how-to-add-custom-product-field-in.html

For Front section :
http://www.php-dev-zone.com/2015/04/displaying-custom-product-field-on.html


The changes required are same for the default theme and custom theme. The only difference is the lookup into custom theme files and incase if you don't find the exact code line, then search for the variable code and do the same changes as we have for the default theme.

I hope this article will help you to make the changes in your custom theme. If you have any doubt or need more clarification on any of the point in this article then feel free to add the comment in the below comment box. I will provide you the best explanation.




Ketan Patel

About Ketan Patel -

I have developed a wide range of websites using CorePHP, Opencart, CakePHP and CodeIgniter including sites for startup companies and small businesses. Apart from my blogging life, I like to read Novels, Listening music and Net surfing.

Subscribe to this Blog via Email :