Прежде всего нам необходим доступ к файлам нашего шаблона. Проще всего работать с файлами шаблона через протокол FTP с использованием FileZilla или WinSCP (в частности, я им пользуюсь, мне он больше нравится). Есть и другие способы работы с файлами шаблона, самый извращенный это подключившись по SSH, его я опущу, не думаю, что кто-то выберет его. Другие два:

  1. Через панель Администратора WordPress. Для этого Вам необходимо зайти вот сюда "Внешний вид -> Редактор тем". Тут Вы сможете добраться и отредактировать любой из файлов, любой из установленных тем на Вашем сайте.
  2. Тут Вам потребуется установить дополнительный плагин файлового менеджера. Например, этот File Manager, довольно стабильный плагин, нет правда поддержки русского (на момент написания статьи), но это не беда, там иконки, думаю у Вас не возникнет проблем с его освоением.

Еще не определились с хостингом, Вам сюда beget.com, цены не кусаются, удобно, живая тех.поддержка, мне пока нравится.

Регистрируем новое место для виджетов

Теперь, нам надо добавить новое место для виджетов. Так как мы уже научились и знаем, что фильтр товаров мы выводим с помощью стандартных виджетов. Ищем в файлах темы, которые находятся по следующему пути "wp-content/theme/<название вашей текущей темы>", от корня сайта, файл functions.php, открываем его для редактирования. В самый конец добавляем следующий код: 

register_sidebar( array(
	'name' => 'Up Category WooCommerce',
	'id' => 'upcatwoo',
	'before_widget' => '
',
	'after_widget' => '
',
	'before_title' => '
',
	'after_title' => '
'
) );

Ячейку массива name, это где "'Up Category WooCommerce", Вы, можете заполнить по своему усмотрению, в том числе и русским названием, данное название будет отображаться в "Внешний вид -> Виджеты" как название области для размещения виджетов. Всё остальное тоже на Ваше усмотрение, но уже исключительно латиницей. Ячейки массива:

  • name – название области для виджетов;
  • id – alias уникальный код области виджетов, с помощью него мы сможем вывести нашу область в шаблоне;
  • before_widget – то что будет прописываться перед каждым виджетом добавленным в эту область, при его выводе в шаблоне;
  • after_widget – то что будет прописываться после каждого виджета добавленным в эту область, при его выводе в шаблоне;
  • before_title – то что прописывается перед заголовком каждого виджета;
  • after_title – то что прописывается после заголовка каждого виджета.

Как видите я обернул каждый виджет в тег div, а заголовок виджета в тег h3. Как Вы, уже догадались, это необходимо чтобы навести марафет виджетам с помощью CSS.

Можно вообще, ничего не писать в последних 4 и опустить данные ячейки, это допустимо.

Встраиваем область виджетов в шаблон

Уже сейчас, после сохранения измененного файла function.php, Вы, сможете увидеть новую область для виджетов. И да, Вы уже можете накидать туда виджеты Ваших фильтров товара по слоям. Теперь осталось дело за малым, отобразить нашу область вывода виджетов в шаблоне. Для этого опять обращаем свой взор на каталог темы и находим папку woocommerce. Уже в ней, находим файл archive-product.php (если там есть файл taxonomy-product_cat.php, то правим его), открываем его для редактирования. Если там нет такого файла, то идём по следующему пути "wp-content/plugins/woocommerce/templates", из корня Вашего сайта, и оттуда копируем этот файл в папку woocommerce Вашей темы и открываем его для редактирования. И после 46 строки вставляем следующую конструкцию отображения нашей области виджетов:

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

Содержание файла archive-product.php может отличаться от его первоначального вида, которые поставляется с плагином woocommerce, так как разработчики тем подстраивают под свою тему работу плагина. Поэтому Вам надо понять в коде, где начинается вывод товаров. С этой целью ищем вот такие строки:

	<?php
		/**
		 * woocommerce_before_shop_loop hook
		 *
		 * @hooked woocommerce_result_count - 20
		 * @hooked woocommerce_catalog_ordering - 30
		 */
		do_action( 'woocommerce_before_shop_loop' );
	?>

Важно! Если над этими строками будет какое-либо количество условной конструкции php, а она там будет, над ней уже вставляем код для отображения нашей области виджетов.

Всё сохраняем и смотрим результат, далее с помощью CSS придаём необходимый вид нашим виджетам фильтра товаров.

На этом всё, добра Вам и успехов в жизни!