Как изменить кнопку стандартного фильтра в мобильной версии

[Sav027]

Уважаемые форумчане. Всем доброго времени суток.

Сделали сайт на опенкарт. Все здорово. НО. В мобильной версии иконка фильтра слишком мала и пользователи не замечают возможность подобрать необходимую продукцию по параметрам.

В данный момент иконка стандартная. Вопрос: возможно ли данную иконку заменить на вертикальную надпись: подбор по параметрам или что-то вроде этого?

Сайт www.flash24.ru

Буду признателен за ответ.

Заранее спасибо

[matroskin92]

Простые варианты

- Увеличить

- Перенести над выводом товаров как большую кнопку - ФИЛЬТР

[Sav027]

6 минут назад, matroskin92 сказал:

- Увеличить

Не уверен, что от этого варианта будет эффект. К сожалению, большинство потенциальных покупателей не шипко разбираются в различных значках. 

 

7 минут назад, matroskin92 сказал:

- Перенести над выводом товаров как большую кнопку - ФИЛЬТР

На сколько это трудоемкий процесс?

[ivane]

button.btn.btn-primary {
    font-size: x-large;
}

 

Например так. Я бы еще в класс кнопки и в css добавил btn-filter чтобы не возникло затруднений в других местах

[Sav027]

9 минут назад, ivane сказал:

button.btn.btn-primary {
    font-size: x-large;
}

 

Например так. Я бы еще в класс кнопки и в css добавил btn-filter чтобы не возникло затруднений в других местах

@ivane  спасибо. А куда вводить отображаемое название?

[ivane]

Это без названия. С названием на скоряк получилось так:

ocfilter.css, строка 224

.ocf-offcanvas .ocfilter-mobile-handle {
    position: absolute;
    left: 70%;
    top: 30%;
}

 

В твиге фильтра меняем <i> и его окружение на это:

<button type="button" class="btn btn-primary btn-filter" data-toggle="ocf-offcanvas">Подбор по параметрам</button>

 

В css (можно в основном, можно в ocfilter) добавить 

 

button.btn.btn-primary.btn-filter {
     -webkit-transform: rotate(-90deg);
     -moz-transform: rotate(-90deg);
     -o-transform: rotate(-90deg);
     -ms-transform: rotate(-90deg);
     transform: rotate(-90deg);
    }

 

Получилось как-то так 

[Tom]

Можно только на css , так например. В конец файла catalog/view/theme/default/stylesheet/ocfilter/ocfilter.css  добавить:

.ocfilter-mobile .fa-filter:before{content:"Подбор по параметрам" !important;display:inline-block;-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-o-transform:rotate(270deg);-ms-transform:rotate(90deg);transform:rotate(270deg);position:absolute;top:63px;left:-65px;}
.ocfilter-mobile-handle button{height:150px;width:39px;}
.ocfilter-mobile .fa-filter{position:absolute;top:5px;left:px;}

Ну или покороче с надписью "Фильтр" :

.ocfilter-mobile .fa-filter:before{content:"Фильтр" !important;display:inline-block;-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-o-transform:rotate(270deg);-ms-transform:rotate(90deg);transform:rotate(270deg);position:absolute;top:20px;left:-10px;}
.ocfilter-mobile-handle button{height:65px;width:30px;}
.ocfilter-mobile .fa-filter{position:absolute;top:5px;left:5px;}