How To Display Subcategories In Two Columns?

I’m using the latest 4.1.2 version and when I click on a main category, the subcategories display in as horizontal text links. How can i fix this to display in vertical in two columns?



Here’s a link to the 4.x demo that shows subcategories arranged horizontally:

Use on-site template editing to find the templates that are used for that section and then you'll know what CSS and/or template code needs to be modified.

To do that, you can change design/themes/your-theme/templates/categories/view.tpl



Change:


```php



{if $subcategories}







{/if}

```

To:

```php

{if $subcategories}
{foreach from=$splitted_subcategories item="ssubcateg"}



{/foreach}
{/if}
```

You can change other things around as well. I don't want the subcategory images for this site, but I do want the category image displayed. So I created a hook called design/themes/my-theme/templates/addons/my_changes/hooks/categories/view.override.tpl and put in:

```php


{if $subcategories or $category_data.description || $category_data.main_pair}
{math equation="ceil(n/c)" assign="rows" n=$subcategories|count c=$columns|default:"2"}
{split data=$subcategories size=$rows assign="splitted_subcategories"}


{include file="common/image.tpl" show_detailed_link=false images=$category_data.main_pair no_ids=true image_width=$settings.Thumbnails.category_lists_thumbnail_width image_height=$settings.Thumbnails.category_lists_thumbnail_height hide_if_no_image=false}

{if $category_data.description && $category_data.description != ""}
{$category_data.description nofilter}

{/if}


{if $subcategories}
{foreach from=$splitted_subcategories item="ssubcateg"}


    {foreach from=$ssubcateg item=category name="ssubcateg"}
    {if $category}


  • {$category.category}


  • {/if}
    {/foreach}


{/foreach}
{/if}

{/if}

{if $smarty.request.advanced_filter}
{include file="views/products/components/product_filters_advanced_form.tpl" separate_form=true}
{/if}

{if $products}
{assign var="layouts" value=""|fn_get_products_views:false:0}
{if $category_data.product_columns}
{assign var="product_columns" value=$category_data.product_columns}
{else}
{assign var="product_columns" value=$settings.Appearance.columns_in_products_list}
{/if}

{if $layouts.$selected_layout.template}
{include file="`$layouts.$selected_layout.template`" columns=$product_columns}
{/if}

{elseif !$subcategories || $show_no_products_block}

{__("text_no_products")}


{else}

{/if}


{capture name="mainbox_title"}{$category_data.category}{/capture} ```

I hope that helps.

Thanks,

Brandon

Thank you very much for your help brandonvd! The first part of your answer really helped me to find the solution to my problem.

Also i had to change the style.css like this (changes are in bold):



.subcategories {

float: left;

line-height: 17px;

padding: 1px 25px 0 15px;

margin: 0 0 15px;

}

.subcategories ul {

line-height: 16px;

}

.subcategories li {

width: 280px;

}


.subcategories ul li {

display: block;

border-bottom: 5px solid #D2E4EC;

padding: 5px 1px;

margin: 1px 0px;

}

.subcategories ul li a {

display: block;

padding: 3px 6px;

}

.subcategories ul li:hover {

border-bottom-color: #56A3DD !important;

}

.subcategories ul li a:hover {

text-decoration: none;

}


.subcategories ul li.with-image {

text-align: center;

}

.subcategories ul li.with-image img {

display: block;

margin:auto;

padding-bottom: 10px;

}

.table-width.subcategories td {

vertical-align: bottom;

padding: 13px;

}

.table-width.subcategories .with-image a strong {

display: block;

padding-top: 10px;



As for the second part of your answer i will give it a try!