Фільтр товарів WooCommerce на довільній сторінці або головній

Ви додаєте фільтр товарів WooCommerce на довільну сторінку, посадкову сторінку чи головну, і трапляється одне з трьох: форма з’являється, але товарів немає; кожен клік перекидає до магазину; або сторінка перезавантажується, а нічого не змінюється. Жодне з цього не є помилкою. Шорткод [woof] виводить лише форму пошуку, а де показати результати, плагін вирішує за тим, що ще є на сторінці. Нижче пояснено, як працює це рішення, і наведено точні налаштування шорткодів для типових випадків: фільтр і товари на одній сторінці, сторінка з обмеженням однією категорією чи атрибутом та форма на головній, що веде відвідувачів до результатів.

Куди фільтр товарів WooCommerce на довільній сторінці веде відвідувачів

Коли відвідувач натискає Фільтр (Filter) (або змінює опцію за ввімкненого autosubmit), скрипт плагіна формує посилання на кшталт ?swoof=1&pa_color=red і перевіряє, чи є на поточній сторінці список товарів, який можна оновити: вивід [woof_products], шорткод WooCommerce [products] або будь-який список .products усередині контейнера .woocommerce. Якщо такий список знайдено, результати відкриваються на цій самій сторінці. Якщо ні, відвідувач потрапляє на сторінку магазину — ту, що вибрана в WooCommerce → Налаштування → Товари → Сторінка магазину (WooCommerce → Settings → Products → Shop page).

Перш ніж щось будувати, варто знати два наслідки. Якщо в WooCommerce не вибрано сторінку магазину, відвідувача нікуди надсилати, і фільтр перезавантажує ту сторінку, на якій перебуває, зокрема й сторінку окремого товару. А якщо на вашій головній є будь-який блок товарів (рекомендовані товари, карусель розпродажу на розмітці WooCommerce), фільтр сприймає цей блок як сітку результатів і перезавантажує головну замість переходу до магазину.

Фільтр і товари на одній сторінці

Для сторінки, що працює як невеликий магазин, розмістіть два шорткоди. Вони можуть бути в різних блоках чи колонках, наприклад форма у вузькій колонці, а товари — у широкій:

[woof]
[woof_products per_page=12 columns=3 is_ajax=1]

• per_page: задайте його. Без нього [woof_products] бере значення Товарів на сторінці (Products per page) з вкладки плагіна Додатково → Параметри (Advanced → Options), а якщо там -1 (типове значення), — налаштування WordPress На сторінках блогу показувати не більше (Blog pages show at most), яке на більшості сайтів дорівнює 10.
• columns: кількість товарів у ряду. Чи враховує це тема, залежить від її CSS.
• is_ajax=1: результати підміняються без перезавантаження сторінки, а адресний рядок оновлюється, тож відфільтрованою сторінкою можна ділитися. За is_ajax=0 сторінка перезавантажується. На довільній сторінці AJAX вмикає саме цей атрибут; опція Спробувати перевести магазин на AJAX (Try to ajaxify the shop) стосується лише магазину та архівів категорій.

[woof_products] виводить товари за допомогою картки товару вашої теми (шаблон content-product.php) і запускає стандартні хуки циклу WooCommerce, тому кількість результатів, сортування та пагінація виглядають так само, як на сторінці магазину.

Шорткод WooCommerce [products] також можна фільтрувати: поки фільтр активний, HUSKY додає свої умови до запиту цього шорткоду. Зв’язка [products limit="12" columns="4" paginate="true"] поруч із [woof] працює з перезавантаженням сторінки; для AJAX використовуйте двійник, який реєструє HUSKY, — [products_woof] з тими самими атрибутами.

Обмежте сторінку однією категорією, міткою чи атрибутом

Сторінці для одного бренду, одного міста чи «лише відновлені смартфони» потрібна постійна умова, яку відвідувачі не можуть скинути. Це атрибут taxonomies, і він має бути в обох шорткодах:

[woof taxonomies="product_cat:87+product_tag:105" tax_exclude="product_cat,product_tag"]
[woof_products taxonomies="product_cat:87+product_tag:105" per_page=12 columns=3 is_ajax=1]

Синтаксис такий: таксономія:ID. Кілька ID однієї таксономії розділяються комами, різні таксономії з’єднуються через +, і збігатися мають усі. За типової логіки OR запис product_cat:87,92+pa_brand:14 означає «у категорії 87 або 92 і бренд 14», причому товари з дочірніх категорій 87 і 92 включаються. Якщо в налаштуваннях плагіна ви перемкнули таксономію на логіку AND, вона діє й для її ID тут.

ID термінів, а не слаги чи назви

Плагін перетворює кожне значення на термін із вказаним ID. Слаг на кшталт cadeau або назва на кшталт Yes не є ID, нічого не знаходить, і ця частина умови мовчки відкидається без жодної помилки, тож сторінка показує всі товари. Щоб дізнатися ID, відкрийте Товари → Категорії (Products → Categories) (або Мітки (Tags), або Товари → Атрибути → Налаштувати терміни (Products → Attributes → Configure terms)), наведіть курсор на посилання Редагувати (Edit) біля терміна й прочитайте число після tag_ID= у посиланні.

Назва таксономії має бути точною: product_cat, product_tag, pa_ плюс слаг атрибута для глобальних атрибутів (pa_color, а не color) або слаг власної таксономії, наприклад таксономії брендів. Власні атрибути, введені безпосередньо в одному товарі, не є таксономіями й тут не підходять.

Що робить значення в кожному шорткоді

• У [woof_products] воно обмежує товари. Саме ця частина виконує всю роботу.
• У [woof] воно обмежує те, що рахує форма: за ввімкнених Показувати кількість (Show count) і Динамічний перерахунок (Dynamic recount) числа біля опцій і діапазон цін описують ту саму обмежену вибірку, а за Приховувати порожні терміни (Hide empty terms) опції, у яких на цій сторінці немає товарів, зникають. У режимі AJAX форма після кожної фільтрації перемальовується зі значенням із [woof_products], тож тримайте обидва значення однаковими, інакше після першого кліку лічильники зміняться.

Умова не потрапляє в URL; вона є частиною сторінки. Скидання або зняття всіх позначок повертає на сторінку, і умова на ній залишається. Приховати блоки, які ви вже попередньо відфільтрували, можна через tax_exclude (назви таксономій через кому), а коротку форму — зібрати через tax_only і by_only, наприклад [woof tax_only="pa_brand,pa_size" by_only="by_price"]; by_only="none" ховає ціну, текстовий пошук та інші фільтри, що не належать до таксономій. Більше комбінацій — у статті як показувати різні фільтри на різних сторінках, а повний перелік атрибутів — на сторінці шорткоду [woof]. Щоб попередньо фільтрувати за мета-полем, а не за таксономією, дивіться керування даними пошуку.

Фільтр на головній, що перенаправляє до магазину

Найнадійніший варіант для головної — форма пошуку, яка надсилає відвідувачів на сторінку результатів:

[woof redirect="https://example.com/shop/" autosubmit=1 ajax_redraw=1 tax_only="product_cat,pa_size" by_only="none"]

• redirect: сторінка результатів. Це може бути магазин, архів категорії на кшталт https://example.com/product-category/tires/ (тоді результати залишаються в межах цієї категорії, бо категорія є в адресі) або довільна сторінка з [woof] і [woof_products]. Використовуйте чисту URL-адресу без ?; плагін сам додасть до неї ?swoof=1&....
• Один лише autosubmit=1 відправляє відвідувача геть після першої ж зміни, що підходить для одного випадного списку. Для форми з кількома полями додайте ajax_redraw=1: кожен вибір лише оновлює форму (лічильники, залежні опції), а кнопка Фільтр (Filter) відкриває сторінку результатів. За autosubmit=0 нічого не відбувається, доки відвідувач не натисне Фільтр (Filter).

Правила, через які виникає більшість скарг «redirect не працює»:

• У режимі AJAX redirect ігнорується. Якщо на тій самій сторінці є ще й [woof_products is_ajax=1] або [products_woof], форма фільтрує цю сітку.
• Одна сторінка — один фільтр. Коли на сторінці кілька форм, скрипт бере redirect, autosubmit і ajax_redraw із першої знайденої форми. Друга форма в сайдбарі чи автоматичний фільтр над товарами можуть непомітно перекрити налаштовану вами форму. У віджета HUSKY для цього є окреме поле Перенаправити на (Redirect to).
• Умова taxonomies у формі на головній не передається разом із перенаправленням; в URL потрапляє лише те, що вибрав відвідувач. Якщо форма стосується однієї категорії, перенаправляйте на архів цієї категорії.

Чому не варто фільтрувати на самій статичній головній сторінці

Фільтрація на місці працює на звичайних сторінках. Статична головна сторінка — виняток: параметри на кшталт product_cat чи product_tag також є змінними запиту WordPress, і коли вони з’являються в кореневій адресі сайту, WordPress перестає вважати запит вашою головною. Залежно від теми відвідувачі бачать архів категорії, порожню сторінку або заголовок Сторінку не знайдено (Page not found), доданий SEO-плагіном. Розмістіть фільтр і [woof_products] на звичайній сторінці (наприклад, /products/), а форму на головній перенаправте туди.

Показувати товари лише після того, як відвідувач відфільтрує

Для посадкової сторінки, яка має відкриватися лише з формою, додайте до [woof_products] атрибут display_on_search=1. Доки фільтр не застосовано, область товарів залишається порожньою; після першого пошуку сторінка показує результати. Документація описує цей атрибут для режиму з перезавантаженням, тому використовуйте його з is_ajax=0. Подробиці — на сторінці шорткоду [woof_products].

Сторінки окремих товарів, меню та сітки конструкторів

• Сторінки окремих товарів. Фільтр у сайдбарі сторінки товару завжди відкриває магазин (або URL із redirect); супутні товари та товари для додаткового продажу не вважаються результатами.
• Меню та мегаменю. Посилайте пункти категорій на справжні архіви категорій (/product-category/.../), а не на сторінки з шорткодом. Архіви фільтруються без жодного налаштування й під час фільтрації зберігають категорію.
• Сітки товарів у конструкторах. Сітка з Elementor, Divi чи іншого конструктора, що виконує власний запит товарів, не реагує на фільтр, навіть якщо форма залишається на сторінці. Замініть її на [woof_products] або зробіть її запит придатним до фільтрації, як описано в статті URL фільтра змінюється, а товари ні.
• [woof_products] у шаблонах категорій. Шорткод не знає, на архіві якої категорії він розміщений; він створений для сторінок. У шаблоні категорії він показує всі товари, якщо не передати taxonomies, тому залишайте там стандартний цикл товарів архіву.

Якщо все одно не працює

• Лапки прямі. Шорткоди, скопійовані з текстового редактора чи деяких вебсторінок, приходять із «кучерявими» лапками (’pa_age’), які WordPress не приймає як лапки атрибутів. Введіть їх заново в блоці Shortcode.
• Кожне значення в taxonomies — числовий ID терміна, назва таксономії точна, навколо + і : немає пробілів, а в обох шорткодах значення однакове.
• У [woof_products] задано per_page, тож сторінка не обривається на 10 товарах.
• У налаштуваннях WooCommerce вибрано сторінку магазину.
• На сторінці лише одна форма фільтра, або перша з них містить потрібний вам redirect.
• Сітка товарів на сторінці — це [woof_products], [products] або [products_woof], а не віджет конструктора з власним запитом.

Якщо все це перевірено, а сторінка й далі поводиться дивно, опублікуйте на форумі підтримки HUSKY посилання на сторінку й обидва шорткоди точно так, як вони записані в редакторі.