Что бы увидеть email и телефон, включите JavaScript.

WooCommerce размещаем фильтры вверху каталога

Статья "WooCommerce фильтр товаров или как пользоваться фильтром по слоям" вызвала интерес и породила множество вопросов, главным из которых был: "Как перенести фильтр товаров вверх страницы каталога товаров?". Собственно, на него я сегодня и отвечу.

Прежде всего нам необходим доступ к файлам нашего шаблона. Проще всего работать с файлами шаблона через протокол 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 придаём необходимый вид нашим виджетам фильтра товаров.

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

Теги материала: Вёрстка CSS HTML WordPress WooCommerce
Понравилась статья, поделитесь ей с друзьями!
RSS подписка по электронной почте


коммент.

avatar

Алекс

- 03 апреля 2020, 18:10
ты большой молодец! очень помог.
avatar

Лия

- 31 июля 2020, 14:43
Спасибо!!! Всё работает отлично!
avatar

Sart

- 25 ноября 2020, 15:26
еще бы дополнить статью, как в css указать чтобы виджет отображался только на мобильных устройствах
avatar

Роман

- 26 ноября 2020, 15:34
Доброго времени суток, Sart! Вы, сможете это реализовать с помощью media запросов (где троеточие Ваш код CSS):
// Малые девайсы («ландшафтные телефоны», >= 576px)
@media (min-width: 576px) {… }

// Средние девайсы («таблетки», >= 768px)
@media (min-width: 768px) {… }

// Большие девайсы (десктопы, >= 992px)
@media (min-width: 992px) {… }

// Экстрабольшие девайсы (большие десктопы, >= 1200px)
@media (min-width: 1200px) {… }
avatar

Sart

- 29 ноября 2020, 20:47
да, уже нашел самостоятельно, но все равно благодарю за статью, действительно помогла
avatar

Дмитрий

- 11 декабря 2020, 23:34
Мне не помогло, я нуб в кодах. Я все скопировал в эти папки, в archive-product.php <?php dynamic_sidebar( 'upcatwoo' ); ?> вставил в верхнюю строчку. И как с помощью css внешний вид придавать тоже не знаю. Идеально было бы дополнить! Нигде такой информации нет.
avatar

Роман

- 12 декабря 2020, 03:09
Доброго времени суток, Дмитрий! 14.12.2020 дополню где лучше править CSS.
avatar

Максим

- 07 января 2021, 19:58
ААААААА, автор красава!!! Очень помог, почти месяц искал решение, как перенести сайдбар с фильтрами НАД товарами и наконец НАШЁЛ!!! ВСЁ ПОЛУЧИЛОСЬ!!! Дай бог тебе здоровья, добрый человек!!!
avatar

Виктор

- 15 марта 2021, 23:21
Здравствуйте, подскажите пожалуйста, как добавить боковую область, если тема их не отображает? тему менять не хотелось бы
avatar

Роман

- 16 марта 2021, 15:25
Доброго времени суток, Виктор!
У Вас в теме присутствуют разные шаблоны, в частности (в корне темы) page.php, single.php, arhive.php и т.д. их много разных может быть. Так же есть папка woocommerce в ней уже находятся шаблоны для страниц магазина archive-product.php, content-product.php и т.д. Если в теме не предусмотрен сайдбар, то его можно в этих шаблонах добавить. То есть с помощью вёрстки Вы добавляете область и в неё вписываете вывод dynamic_sidebar('upcatwoo'); своего места под виджеты.
avatar

Дмитрий

- 18 октября 2022, 16:19
Здравствуйте! Спасибо все получилось. А подскажите как сделать так чтобы эти фильтры раскрывались и закрывались по нажатию кнопки.
avatar

Александр

- 23 декабря 2022, 14:15
Как я сделал у себя на сайте в теме basik:
1 создал область виджетов как указано в статье выше
2 Добавил в виджет шорт код фильтра из плагина (у меня плагин Product Filter by WooBeWoo)
3 Если добавить код <?php dynamic_sidebar('upcatwoo'); ?> в archive-product.php (как советует автор статьи), то он будет отображаться только на страницах категорий товаров. Поэтому я добавил этот кусок кода в файл: плагины/woocommerce/loop/orderby.php после строки:
if (! defined( 'ABSPATH' ) ) {exit;}?>
4 далее все очень просто — работа с css для того, чтобы скрыть эту область виджитов на пк (потому, что на пк работает штатный сайтбар: @media (min-width: 551px) {
#\31 s {
display: none;
}}
и отобразить на мобильном при этом скрыв основной сайтбар:
@media (max-width: 550px) {
#\31 s {
display: block;
}#sidebar{
display: none;}}
Спасибо автору за совет, очень помогло

Написать комментарий

Ваш email не будет опубликован. Обязательные поля отмечени символом *