Options in the opencart product list
Adding display and selection options in the catalog, product category
Creation, development, manufacturing sites | WEB-STYDIA.COM

Kind time of day dear visitor of our site. If you are on this page, then you are probably interested in the possibility of outputting product options in the category (list) of goods. This task very often occurs when a customer orders development of an online store, in this connection I will describe here implementation of this method, because there is nothing complicated here and after reading and following this instruction you can easily display all available options of the product in the category opencart.

By default, opencart allows you to select the appropriate option only in the product card itself, but we also need the output of options in the goods list on the category page, in fact we need to copy the existing design of the product card options and place it in the category, the usual copying of course nothing will give and need to be changed a little and add code, so that the options are not just displayed but also that there would be an opportunity to make a purchase of the goods without leaving the category page.

Options in the category is very convenient especially for some kind of one-type products for which the client does not need to look at the description and characteristics of the product, and he can add all the items of interest to the basket without leaving the general list.

What else can be said, this method of outputting options in the category will work exactly on the version of opencart 1.5 ... Since it was on this version that the client bought from me ready-made online store and for him I wrote an instruction for options. Of course this method can be used for two or other versions, but with small changes, but in fact everything remains the same.

In general, I'm not going to breed here what's what, everyone decides whether they need options in the category or not, I'll just publish a ready-made solution here that will allow you to add product options to the category, and so proceed.



We will make changes only in three files:

  • catalog/language/russian/product/category.php (language file)
  • catalog/controller/product/category.php (category controller)
  • catalog/view/theme/Ваш_шаблон/template/product/category.tpl (Well, the very template TPL category)

First, open the controller catalog/controller/product/category.php file and make the required changes:

We find the code:

And immediately before it we add:

In the same place a little bit below we look for the code:

and after it we add:

Next, look for the following piece of code:

After which we add the following:

Everything is finished with the controller and now you can proceed with editing the next file.

The second one opens the template file of the category of your theme (template) Opencart, namely open the file catalog/view/theme/Ваш_шаблон/template/product/category.tpl

We find a piece of code:

After that, we will display a block with a list of options, namely:

After we look for a piece of code:

And after it we add the following:

Further after the line:

Add the following:



After we look for the code:

And we add after it a few styles and JS code:

And the most recent item will need to be found on the page:

And replace it with:

Everyone with the template file finished.

The last third file will be the catalog/language/russian/product/category.php file in which we will need to add one single line of translation at any place, namely:

You can insert it for example after:

That's all we had to do, now all the available options will be in your category and the buyer will be able to choose them without leaving the category page.

Of course, each of you has different store templates, and maybe something will look a bit different, but the general principle always remains the same, just as there is no example of CSS styles because they are here to nothing because of different templates, each kind of option already tweaks under itself.

Good luck to you, try it and you will succeed.

You may also like

No Comment

You can post first response comment.

Leave A Comment

Please enter your name. Please enter an valid email address. Please enter a message.