Вывод брендов плиткой с названиями

В настройках плагина укажите следующий шаблон вывода для страницы всех брендов:

<style>
  .brands-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .brands-list .brand {
    margin-bottom: 1rem;
    width: 18%;
    border: 2px solid #F5F5F5;
  }
  .brands-list .brand a {
    text-decoration: none;
  }
  .brands-list .brand-name {
    padding: 10px;
    text-align: center;
    font-weight: bold;
    color: #000;
    text-transform: uppercase;    
  }
  .brands-list .brand-img {
    text-align: center;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
  }
  .brands-list .brand-img img {
    max-width: 100%;
    max-height: 100%;
  }
  .brands-list div.brand:hover {
    border: 2px solid #e53935;
    background: #e53935;
  }
  .brands-list div.brand:hover .brand-name {    
    color: #fff;
  }  
  @media only screen and (max-width: 1024px) {
    .brands-list .brand {
      width: 24%;
    }
  }  
  @media only screen and (max-width: 768px) {
    .brands-list .brand {
      width: 31%;
    }
  }
  @media only screen and (max-width: 500px) {
    .brands-list .brand {
      width: 48%;
    }

  }
</style>  

<div class="brands-list">
{foreach $brands as $b}
<div class="brand">
  <a href="{$b.url}" title="{$b.name|escape}">
    <div class="brand-img">
      {if $b.image}<img src="{$wa_url}wa-data/public/shop/brands/{$b.id}/{$b.id}{$b.image}" alt="{$b.name|escape}">{/if}
    </div>
    <div class="brand-name">
        {$b.name|escape}
    </div>
  </a>
</div>
{/foreach}
</div>