/ Плагины / Фильтры Woocommerce

Фильтры Woocommerce

HIT

09.08.2017

5282

В базовую комплектацию Woocommerce входит набор виджетов для фильтрации товаров. Но данные виджеты необходимо несколько доработать.

WooCommerce Навигация по слоям

В этом виджете необходимо задать атрибут товара по которому будет происходить фильтрация. Условие фильтрации можно выбрать: И — один из вариантов, ИЛИ — несколько вариантов.

Доработаем стили данного виджета (требуется подключение FontAwesome):

li.wc-layered-nav-term {list-style: none;}

li.wc-layered-nav-term a:before {
font-family: FontAwesome;
margin-right: .53em;
display: inline-block;
color: #ff6b6b;
content: "\f096";
}

li.wc-layered-nav-term.chosen a:before {
font-family: FontAwesome;
margin-right: .53em;
display: inline-block;
color: #ff6b6b;  
content: "\f046";
}
Сделать подобный виджет по меткам, по статусу наличия, по доп. таксономиям
Сделать кнопку очистки фильтра

WooCommerce Навигационные фильтры

Еще один стандартный фильтр. Показывает действующие в данные момент фильтры. Этот виджет более целесообразно вызывать не в сайтбаре, а в области контента. При нажатии на активный фильтр — он устраняется.

Вызывается виджет так:

<?php the_widget( 'WC_Widget_Layered_Nav_Filters' ); ?>

Доработанные стили виджета:

/* Виджет Активные фильтры */

.widget_layered_nav_filters {display: inline-block; width: 100%;}

.widget_layered_nav_filters ul {padding: 0;}

.widget_layered_nav_filters li {list-style: none; display: inline-block; margin-right: 15px;}

.widget_layered_nav_filters li a {
    float: left;
    border: 1px solid #ff6b6b;
    padding: 3px 10px;
    border-radius: 5px;
}

.widget_layered_nav_filters li a:before {
font-family: FontAwesome;
margin-right: .53em;
display: inline-block;
color: #ff6b6b;  
content: "\f00d";
}

.wc-layered-nav-term .count {color: #aaa; font-size: 12px;}

Группа фильтров

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

//регистрируем сайдбар Filter-group
register_sidebar(
  array(
    'id' => 'filter',
    'name' => __( 'Filter-group' ),
    'description' => __( 'Фильтр атрибутов' ),
    'before_widget' => '<div class="filter-block">',
    'after_widget' => '</div>',
    'before_title' => '<h4>',
    'after_title' => '</h4>'
    )
);

И вставить его в сайтбар обернув тэгами стандартного виджета

<div class="widget">

<h3 class="headwidget">Фильтр по товарам</h3>

<?php dynamic_sidebar( 'filter' ); ?>

</div>

И в эту созданную область виджетов (Filter-group) поместить все фильтры Woocommerce.

Неправильная работа фильтра в результатах поиска

Если в шаблоне woocommerce.php сделать такое условие:

if ( is_shop() ) :
	if ( is_search() ) : // шаблон результат поиска
	else: // шаблон каталог товаров
	endif;
endif;

то при включении фильтра по атрибутам из шаблона поиска мы будем попадать в шаблон каталога товаров. При этом фильтр по цене оставляет нас в шаблоне поиска.

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Дополнительные статусы заказа

Дополнительные статусы заказа

Создадим дополнительные пользовательские статусы заказа. Custom Order Status for WooCommerce (10 000) Плагин от Tyche Softwares. Есть бесплатная и Pro версии. Стоимость Pro-версии: Один магазин – $39.00 5 магазинов – $99.00 Безлимит – $149.00 В бесплатной Читать далее »

Интеграция Woocommerce с 1С

Интеграция Woocommerce с 1С

Интеграция Woocommerce с 1С — довольно сложная тема с множеством нюансов. Буду описывать на что стоит обращать внимание, с какими проблемами пришлось столкнуться. Плагин 1С:Предприятие Data Exchange Так как не Читать далее »

WooCommerce AJAX Products Filter

WooCommerce AJAX Products Filter

Раннее данный фильтр участвовал в общем обзоре, в котором я приводил основные особенности. Рассмотрим подробнее работу с фильтром WooCommerce AJAX Products Filter (также он называется Advanced AJAX Product Filters). Работа Читать далее »

/

Добавить комментарий

Пока нет комментариев. Будь первым!

Фильтры Woocommerce
Выравнивание миниатюр товаров
Рекомендации для васВыравнивание миниатюр товаровOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.