Создать отдельные элементы для списка и сетки

Каким образом в дефолтном шаблоне (category.tpl) можно создать для списка и сетки свои собственные блоки каждому отдельно? (Как в этом примере для продуктов - http://demo.towerthemes.com/tt_lavoro/index.php?route=product/category&path=59 )

По умолчанию в диве контейнере прописаны классы "product-layout product-list col-xs-12".
Прописать каждому блоку свой класс не помогает (product-grid/product-list).

Смогла только добиться такого же эффекта как в шаблоне с помощью css, но необходимо некоторые блоки (с ценой и с кнопками) для вида списка передвинуть внутрь основного блока.

 

все передвигается с помощью скрипта или стилей.

 

Нет, с css так не получится.

Нужно, чтобы было для сетки примерно:

Код:

<div class="wrapper">
<div class="1">
<div class="1-1"></div>
<div class="1-2"></div>
</div>
<div class="2">
<div class="2-1"></div>
<div class="2-2"></div>
<div class="2-3"></div>
<div class="2-4"></div>
</div>
</div>

А для списка:

Код:

<div class="wrapper">
<div class="1">
<div class="1-1"></div>
<div class="1-2"></div>
<div class="2-3"></div>
<div class="2-4"></div>
</div>
<div class="2">
<div class="2-1"></div>
<div class="2-2"></div>
</div>
</div>

Но в дефолтном шаблоне category.tpl у нас может быть только 1 вариант.

 

почему не получится? Меняется класс, а соответственно можно скрыть одно и показать другое, даже без js

 

А, да, действительно! Спасибо!
Меня сбил с толку этот шаблон, где структура меняется при переключении опций.