Page 1 of 1
Change the columns number
Posted: Wed Oct 11, 2017 9:54 pm
by Django29
Hi
How can we change the number of columns to display :
1 - the categories on the homepage, or the sub-categories of a category in grid.
2 - the products of a category displayed in grid.
Re: Change the columns number
Posted: Thu Oct 12, 2017 2:04 am
by yodapt
Under Design > Theme Editor, file product / category.twig , you can edit the number of columns. You'll have to change the col-sm-* classes to match the number of columns you want (the grid has 12 columns max, so the class name will reflect a divisible number, such as col-sm-2, for 6 columns, and also limited in that sense). You will also look at the logic around those, which differ if there are enought products / categories to fill a row or not.
Re: Change the columns number
Posted: Thu Oct 12, 2017 2:47 am
by Django29
Thanks for your answer, but it doesn't seem so easy ...
So, I can have 3, 4 or 6 columns, but not 5.
There is a lot of col-sm-xx in this file, and I don't know which one to change.
And I have to do this change on 2 sites : 1 Opencart 2 and 1 Opencart 3.
Re: Change the columns number
Posted: Thu Oct 12, 2017 3:05 am
by yodapt
Opencart 2 and 3 are different, the way I described is for version 3 only.
You can have 1, 2, 3, 4 and 6 columns. These limitations reflect the actual CSS framework, it is still possible to obtain more combinations, but that involves a deeper understanding of CSS.
For example, in 3.x, this is the part that involves categories :
Code: Select all
{% if categories %}
<h3>{{ text_refine }}</h3>
{% if categories|length <= 5 %}
<div class="row">
<div class="col-sm-3">
<ul>
{% for category in categories %}
<li><a href="{{ category.href }}">{{ category.name }}</a></li>
{% endfor %}
</ul>
</div>
</div>
{% else %}
<div class="row">{% for category in categories|batch((categories|length / 4)|round(1, 'ceil')) %}
<div class="col-sm-3">
<ul>
{% for child in category %}
<li><a href="{{ child.href }}">{{ child.name }}</a></li>
{% endfor %}
</ul>
</div>
{% endfor %}</div>
<br />
{% endif %}
{% endif %}
Re: Change the columns number
Posted: Thu Sep 05, 2019 3:26 pm
by aerogel
yodapt wrote: ↑Thu Oct 12, 2017 3:05 am
Opencart 2 and 3 are different, the way I described is for version 3 only.
You can have 1, 2, 3, 4 and 6 columns. These limitations reflect the actual CSS framework, it is still possible to obtain more combinations, but that involves a deeper understanding of CSS.
For example, in 3.x, this is the part that involves categories :
Code: Select all
{% if categories %}
<h3>{{ text_refine }}</h3>
{% if categories|length <= 5 %}
...
i had some parent categories with 5 subcategories showing in "one column" and a parent category with 6 subcategory showing in 3 columns! that was so ugly and inconsistent.
i changed
to
and now everything is consistent and beautiful!
thank you!
Re: Change the columns number
Posted: Thu Apr 20, 2023 5:10 pm
by Django29
Hello.
More than 6 years later, I'm back on this problem. I don't remember if I had managed to display the number of columns I wanted for this site in 2017.
Now, on a new site (OC 3.0.3.8 ), I'm still trying to have always 4 columns for all the displays in a wall : Main (root) categories, sub-categories and products.
Sometimes it works for the sub-categories, when I select 4 columns in the relevant main category (and sometimes not, even caches empty).
But I have only 3 columns for the main categories and for the products of any category or sub-category.
I'm surprised that this setting is so complicate in OC.