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

Работа с WooCommerce AJAX Products Filter

Можно создавать как единичные фильтры, так и группы фильтров.

Фильтрация по категориям

Недавно была задача: для архивов атрибутов товаров (для мальчиков, для девочек) сделать дополнительные пункты меню по категориям (кеды, кроссовки, ботинки и т.д. (категории одного уровня, без вложенности)). Решил сделать на основе фильтрации. Добавил фильтр по категории, причем сам фильтр работал не корректно — после фильтрации нельзя было отменить эту категорию. Но при этом в url добавлялся атрибут фильтрации по категории. Я просто брал этот url и делал в меню произвольные ссылки, а сам фильтр по категории в последствии убрал.

Вертикальная верстка фильтра

Нестандартная вертикальная верстка фильтра дело довольно хлопотное, т.к. базовые стили и скрипты фильтра на это не рассчитаны.

Привожу доработки, которые я применял в своем решении. Изначально сам фильтр и сортировку я вставляю в размеченную панель (подробнее о панели).

function sitechoiceviewproduct() {
	echo '<span class="mobile-filter-button"><i class="fa fa-filter" aria-hidden="true"></i> Фильтр по товарам</span>';
		
	echo '<div id="filter-area">';
	dynamic_sidebar( 'filter-group' );
	echo '</div>';	
}

add_action( 'woocommerce_before_shop_loop', 'sitechoiceviewproduct', 20 );


function addpannell() { echo '<div id="pannel">'; }
add_action( 'woocommerce_before_shop_loop', 'addpannell', 17 );

function addpannellend() { echo '</div>'; }
add_action( 'woocommerce_before_shop_loop', 'addpannellend', 60 );

Далее дорабатываем стили и скрипты:

/* Фильтрация */
#filter-area {display: flex; width: 50%; justify-content: space-between;}

.berocket_aapf_widget-wrapper {display: flex; align-items: center; margin-right: 30px;}

.berocket_aapf_widget-title_div {display: flex; align-items: center;}

.berocket_aapf_widget-title, .berocket_aapf_widget {margin-bottom: 0 !important;}

.berocket_aapf_widget-title:after {content: "\f105"; font-family: FontAwesome; margin-left: 5px; color: #4b5da2;}

ul.berocket_aapf_widget li > span {color: #111 !important;}

ul.berocket_aapf_widget {
	margin-bottom: 0 !important;
	position: absolute;
	z-index: 96;
	top: 100%;
	background: #fff;
	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
	padding: 15px;
	min-width: 200px;
	visibility: hidden !important;
	display: block !important;
	transition: all 0.1s ease;
	-o-transition: all 0.1s;
	-webkit-transition: all 0.1s ease 0s;	
}

.berocket_aapf_widget.berocket_style_block.filter-open {visibility: visible !important;}

input.berocket_aapf_reset_button {cursor: pointer; border-radius: 3px; background: none; border: 1px solid #fff;}

li.berocket_widget_show_values {display: none !important;}

/* Раскрытие фильтров */
jQuery(document).ready(function(){	
	jQuery('.berocket_aapf_widget-wrapper').click(function() {	
		jQuery(this).find('ul.berocket_aapf_widget').addClass('filter-open');
	}); 
});	

/* Скрытие фильтров */
jQuery(function($){
	$(document).mouseup(function (e){ // событие клика по веб-документу
		var div = $("ul.berocket_aapf_widget"); // тут указываем ID элемента
		if (!div.is(e.target) // если клик был не по нашему блоку
		    && div.has(e.target).length === 0) { // и не по его дочерним элементам
			div.removeClass('filter-open'); // скрываем его
		}
	});
});

/* Доработка для моб.версии */
$(document).bind('ready ajaxComplete', function(){
	width = $(window).width();
	if (width <= 480) {
		jQuery('ul.berocket_aapf_widget li').click(function() {	
		setTimeout(function () { jQuery('ul.berocket_aapf_widget').removeClass('filter-open'); }, 1000);
		});
    }		
});

Конфликт с Lazy Load for WooCommerce

Если при Ajax обновлении товаров картинки не подгружаются то их можно перезагрузить принудительно

$(document).ready(function () {
	$("body").on("click", "ul.berocket_aapf_widget li", function () {
		setTimeout(function(){ $("img.lazy").show().lazyload({effect: "fadeIn"}); }, 2000);
	});	
	
	$("body").on("click", "ul.page-numbers li", function () {
		setTimeout(function(){ $("img.lazy").show().lazyload({effect: "fadeIn"}); }, 2000);
	});
	
	$("body").on("change", ".orderby", function () {
		setTimeout(function(){ $("img.lazy").show().lazyload({effect: "fadeIn"}); }, 2000);
	});
});

Универсальный event после применения фильтра любым из способов:

// Активация скриптов после применения фильтра

$(document).on('berocket_ajax_filtering_end', after_filter_events);

function after_filter_events (e) {
	setTimeout(function(){ 
		// alert ('filtred');
		
		// скрипты которые нужно запускать после применения фильтра
		
	}, 1000);
}

Особенности фильтрации

Если все выведенные товары с одинаковой ценой, то фильтр по цене не выводится.

Плагины компаньоны

Бесконечная подгрузка товаров — Load More Products for WooCommerce (10000 скачиваний). Тот же разработчик BeRocket, что гарантирует что они не будут конфликтовать с фильтром. Можно настраивать автоматическую подгрузку при скроллинге, подгузку при нажатии кнопки, ajax пагинацию (или ajax пагинация + кнопка).

Скрытие раскрытие (spoiler) каждого отдельно фильтра

jQuery(document).ready(function($) {

	// Раскрывающийся блок
	$('.bapf_body').hide();
	$('.bapf_head').click(function(){
		$(this).toggleClass('open');
		$(this).next().slideToggle();
	});
	
	// Исключение (фильтры будут открыты)
	$('#bapf_1 .bapf_head').addClass('open');
	$('#bapf_1 .bapf_body').slideDown();
	
	$('#bapf_2 .bapf_head').addClass('open');
	$('#bapf_2 .bapf_body').slideDown();
	
	$('#bapf_3 .bapf_head').addClass('open');
	$('#bapf_3 .bapf_body').slideDown();

});

Стили:

/* Раскрытие фильтров */

.bapf_head {position: relative; cursor: pointer;}

.bapf_head:after {
    content: "\e97a";
    font-family: "icomoon";
    position: absolute;
    right: 15px;
    top: 3px;
}

.bapf_head.open:after {
    content: "\e97d";
}