Jak pokazać różne filtry dla każdej kategorii w WOOF (Dynamiczne filtrowanie)
Dowiedz się, jak wyświetlać różne zestawy filtrów w oparciu o kategorie produktów, tworzyć filtrowanie zależne i dostosowywać filtry do strony WooCommerce Shop.
Problem
Domyślnie WOOF wyświetla te same filtry na wszystkich stronach. Jednak różne kategorie produktów często potrzebują różnych opcji filtrowania:
Przykładowe scenariusze:
- Kategoria Elektronika: Pokaż Markę, Rozmiar ekranu, Pamięć, RAM
- Kategoria odzieżowa: Pokaż rozmiar, kolor, materiał, styl
- Kategoria mebli: Pokaż materiał, kolor, wymiary, typ pomieszczenia
- Strona sklepu (główny archiwum): Pokaż tylko kategorie, zakres cenowy, polecane marki
Aktualne ograniczenie: Wszystkie opcje filtrowania pozostają globalne, nawet po wybraniu kategorii przez użytkownika, co sprawia, że interfejs jest przeładowany nieistotnymi filtrami.
Czego się nauczysz:
- Jak włączyć filtrowanie zależne/warunkowe (filtry aktualizują się w zależności od wyboru)
- Jak pokazać różne filtry dla każdej kategorii produktów
- Jak tworzyć niestandardowe zestawy filtrów dla strony Sklep
- Jak używać Widget Logic do zaawansowanej kontroli widoczności
Rozwiązanie 1: Włącz filtrowanie zależne (przeładowanie AJAX)
Pierwszym krokiem jest włączenie ponownego rysowania formularza AJAX, które dynamicznie aktualizuje filtry, gdy użytkownicy dokonują wyborów.
Dla widżetów:
- Przejdź do Wygląd → Widżety
- Znajdź swój widget WOOF
- Włącz opcję „Ponowne rysowanie formularza AJAX”
Powoduje to automatyczne aktualizowanie filtrów po każdym wyborze, wyświetlając tylko odpowiednie opcje.
Dla Shortcodes:
Dodaj ajax_redraw atrybut do swojego skrótu WOOF:
[woof ajax_redraw="1"]
Co to robi:
- Gdy użytkownik wybierze „Koło” → inne filtry automatycznie się aktualizują
- Pokazuje tylko podtypy, materiały, kolory dostępne dla Kierownicy
- Redukuje bałagan poprzez ukrywanie nieistotnych opcji
Dokumentacja: https://products-filter.com/shortcode/woof
Rozwiązanie 2: Widoczność filtra w oparciu o kategorie (niestandardowy shortcode)
To rozwiązanie tworzy dynamiczny shortcode, który wyświetla różne filtry w zależności od aktualnej kategorii produktu.
Krok 1: Utwórz niestandardowy shortcode
Dodaj ten kod do swojego motywu potomnego functions.php:
/**
* Dynamic WOOF shortcode that shows different filters per category
* Usage: [woof_dynamic]
*/
add_shortcode('woof_dynamic', function () {
// Check if WOOF is active
if (!function_exists('woof_shortcode')) {
return '<!-- WOOF plugin not active -->';
}
// Get current category
$term = get_queried_object();
// Check if we're on a product category page
if (!$term || !isset($term->taxonomy) || $term->taxonomy !== 'product_cat') {
return do_shortcode('[woof]'); // Show default filters
}
// Get category slug
$cat = strtolower($term->slug);
// Define which filters to show for each category
$filters_map = [
'wheel' => ['pa_sub-type', 'pa_material', 'pa_colour', 'pa_size'],
'lingerie' => ['pa_size', 'pa_colour', 'pa_material'],
'massage-candles' => ['pa_type', 'pa_material', 'pa_brand'],
'electronics' => ['pa_brand', 'pa_screen-size', 'pa_storage'],
'clothing' => ['pa_size', 'pa_color', 'pa_material', 'pa_style'],
'furniture' => ['pa_material', 'pa_color', 'pa_dimensions', 'pa_room'],
];
// If category not in map, show default filters
if (!isset($filters_map[$cat])) {
return do_shortcode('[woof]');
}
// Build shortcode with specific filters for this category
$taxonomies = implode(',', $filters_map[$cat]);
return do_shortcode('[woof tax_only="' . esc_attr($taxonomies) . '" ajax_redraw="1"]');
});
Krok 2: Użyj Shortcode
Zamień swoje istniejące [woof] shortcode z:
[woof_dynamic]
Umieść ten shortcode w:
- Obszary widżetów (widżet tekstowy/HTML)
- Bloki page builderów (Elementor, Divi, itp.)
- Pliki szablonu motywu:
<?php echo do_shortcode('[woof_dynamic]'); ?>
Krok 3: Skonfiguruj swoje kategorie
Zaktualizuj $filters_map tablica z Twoimi rzeczywistymi:
- Slugi kategorii (np. ‘koło’, ‘elektronika’)
- Slugi atrybutów (np. ‘pa_brand’, ‘pa_size’)
Znajdowanie Twoich slugów:
Slugi kategorii:
- Przejdź do Produkty → Kategorie
- najedź kursorem na nazwę kategorii
- Spójrz na URL:
...tag_ID=123&taxonomy=product_cat&post_type=product - Lub edytuj kategorię i spójrz na pole slug
Slugs atrybutów:
- Przejdź do Produkty → Atrybuty
- Zaczynają się od
pa_poprzedzone nazwą atrybutu - Przykłady:
pa_color,pa_size,pa_brand,pa_material
Rozwiązanie 3: Niestandardowe filtry dla strony sklepu
Główna strona WooCommerce Shop wymaga innego podejścia, ponieważ nie jest to archiwum kategorii.
Kombinowane rozwiązanie: Strona sklepu + Strony kategorii
Ten kod obsługuje zarówno stronę sklepu, jak i poszczególne strony kategorii:
/**
* Dynamic WOOF shortcode with Shop page support
* Shows minimal filters on Shop, full filters on categories
*/
add_shortcode('woof_dynamic', function () {
if (!function_exists('woof_shortcode')) {
return '';
}
// Shop page (main product archive) - show minimal filters
if (is_shop() AND !is_product_category() AND !is_product_tag()) {
return do_shortcode('[woof tax_only="product_cat,pa_colour" by_price="1" ajax_redraw="1"]');
}
// Product category pages - show category-specific filters
$term = get_queried_object();
if ($term AND isset($term->taxonomy) AND $term->taxonomy === 'product_cat') {
$cat = strtolower($term->slug);
// Define filters for each category
$filters_map = [
'wheel' => ['pa_sub-type', 'pa_material', 'pa_colour', 'pa_size'],
'lingerie' => ['pa_size', 'pa_colour', 'pa_material'],
'massage-candles' => ['pa_type', 'pa_material', 'pa_brand'],
'electronics' => ['pa_brand', 'pa_screen-size', 'pa_storage'],
'clothing' => ['pa_size', 'pa_color', 'pa_material', 'pa_style'],
];
if (isset($filters_map[$cat])) {
$taxonomies = implode(',', $filters_map[$cat]);
return do_shortcode('[woof tax_only="' . esc_attr($taxonomies) . '" ajax_redraw="1"]');
}
}
// Fallback - show all filters
return do_shortcode('[woof ajax_redraw="1"]');
});
Co robi ten kod:
- Na stronie Sklepu: Pokazuje tylko filtry Kategorii, Kolorów i Ceny
- Na stronach kategorii: Wyświetla filtry specyficzne dla kategorii z mapowania
- Na innych stronach: Pokazuje domyślne filtry
Dostosuj filtry strony Sklepu: Zmień tę linię, aby wyświetlić różne filtry na stronie Sklepu:
[woof tax_only="product_cat,pa_colour" by_price="1" ajax_redraw="1"]
Dostępne parametry:
tax_only="product_cat,pa_brand"– Pokaż tylko te taksonomieby_price="1"– Pokaż filtr zakresu cenby_only="product_cat,pa_brand"– alternatywa dla tax_onlyajax_redraw="1"– Włącz dynamiczne aktualizacje
Rozwiązanie 4: Widget Logic dla warunkowej widoczności
Jeśli wolisz używać widżetów zamiast skróconych kodów, możesz kontrolować widoczność widżetów za pomocą logiki warunkowej.
Krok 1: Zainstaluj wtyczkę Widget Logic
Wybierz jeden z następujących pluginów:
- Widget Logic: https://wordpress.org/plugins/widget-logic/
- Pokaż widżet według logiki: https://github.com/realmag777/Show-WordPress-Widget-by-Logic
Krok 2: Tworzenie wielu widżetów WOOF
- Przejdź do Wygląd → Widżety
- Dodaj wiele widżetów WOOF do swojego paska bocznego
- Skonfiguruj każdy widget z innymi filtrami
Krok 3: Dodaj logikę warunkową
Dla każdego widżetu dodaj warunki widoczności:
Pokazuj tylko w kategorii Rower:
is_product_category('wheel')
Pokaż tylko w kategorii Bielizna:
is_product_category('lingerie')
Pokaż tylko na stronie Sklepu:
is_shop() AND !is_product_category()
Pokaż w wielu kategoriach:
is_product_category(array('wheel', 'lingerie', 'massage-candles'))
Pokazuj wszędzie z wyjątkiem strony Sklepu:
!is_shop()
Pokaż w kategoriach Elektronika lub Komputery:
is_product_category('electronics') || is_product_category('computers')
Przykłady z życia wzięte
Przykład 1: Sklep z produktami dla dorosłych
$filters_map = [
'wheel' => ['pa_type', 'pa_material', 'pa_color', 'pa_power-source', 'pa_waterproof'],
'lingerie' => ['pa_size', 'pa_color', 'pa_style', 'pa_material'],
'oil' => ['pa_type', 'pa_brand', 'pa_ingredients', 'pa_volume'],
'toys' => ['pa_category', 'pa_material', 'pa_size', 'pa_color'],
];
Przykład 2: Sklep z elektroniką
$filters_map = [
'laptops' => ['pa_brand', 'pa_processor', 'pa_ram', 'pa_storage', 'pa_screen-size'],
'smartphones' => ['pa_brand', 'pa_storage', 'pa_ram', 'pa_camera', 'pa_battery'],
'headphones' => ['pa_brand', 'pa_type', 'pa_connection', 'pa_noise-cancelling'],
'cameras' => ['pa_brand', 'pa_megapixels', 'pa_sensor-size', 'pa_video-quality'],
];
Przykład 3: Sklep z modą
$filters_map = [
'mens-clothing' => ['pa_size', 'pa_color', 'pa_material', 'pa_brand', 'pa_style'],
'womens-clothing' => ['pa_size', 'pa_color', 'pa_material', 'pa_brand', 'pa_occasion'],
'shoes' => ['pa_size', 'pa_color', 'pa_brand', 'pa_type', 'pa_material'],
'accessories' => ['pa_color', 'pa_material', 'pa_brand', 'pa_type'],
];
Przykład 4: Sklep meblowy
$filters_map = [
'bedroom' => ['pa_type', 'pa_material', 'pa_color', 'pa_style', 'pa_size'],
'living-room' => ['pa_type', 'pa_material', 'pa_color', 'pa_seating-capacity'],
'office' => ['pa_type', 'pa_material', 'pa_color', 'pa_ergonomic'],
'outdoor' => ['pa_type', 'pa_material', 'pa_weather-resistant', 'pa_color'],
];
Zaawansowane: Dołącz cenę i kategorie
Jeśli chcesz wyświetlić zakres cen i kategorie oprócz atrybutów:
// On category pages, add price and allow category drill-down
if (isset($filters_map[$cat])) {
$taxonomies = implode(',', $filters_map[$cat]);
return do_shortcode('[woof tax_only="product_cat,' . esc_attr($taxonomies) . '" by_price="1" ajax_redraw="1"]');
}
Wyjaśnienie parametrów:
product_cat– wyświetla filtr kategorii dla rozwijanego widokuby_price="1"– Pokazuje suwak zakresu cenajax_redraw="1"– Dynamicznie aktualizuje filtry
Rozwiązywanie problemów
Filtry nie aktualizują się dynamicznie
Problem: Filtry pozostają statyczne po wyborze
Rozwiązanie:
- Upewnij się
ajax_redraw="1"jest w Twoim shortcode - Włącz „Ponowne rysowanie AJAX formularza” w ustawieniach widżetu
- Sprawdź konsolę JavaScript pod kątem błędów
Błędne filtry wyświetlane w kategorii
Problem: Kategoria wyświetla niepoprawny zestaw filtrów
Rozwiązanie:
- Sprawdź, czy slug kategorii jest poprawny (sprawdź URL lub ustawienia kategorii)
- Użyj małych liter w
$filters_maptablica - Sprawdź, czy kategoria istnieje w Twoim mapowaniu
Filtry w ogóle się nie pojawiają
Problem: Brak widocznych filtrów na stronie
Rozwiązanie:
- Sprawdź, czy slugi atrybutów zaczynają się od
pa_(np.pa_colorniecolor) - Sprawdź, czy atrybuty są przypisane do produktów w tej kategorii
- Użyj
[woof]tymczasowo, aby sprawdzić, czy podstawowy shortcode działa
Strona sklepu wyświetla filtry kategorii
Problem: Strona sklepu pokazuje nieprawidłowy zestaw filtrów
Rozwiązanie:
- Zweryfikuj
is_shop()warunek jest pierwszy w Twoim kodzie - Sprawdź, że
!is_product_category()jest uwzględniony - Wyczyść wszystkie pamięci podręczne (WordPress, serwer, przeglądarka)
Slagi atrybutów nie działają
Problem: Filtry nie pojawiają się dla określonych atrybutów
Rozwiązanie:
- Przejdź do Produkty → Atrybuty aby znaleźć poprawne slugi
- Pamiętaj, aby użyć
pa_prefiks (wymóg WooCommerce) - Sprawdź pisownię:
pa_colourvspa_color
Kod nie działa po dodaniu
Problem: Biały ekran lub błędy po dodaniu kodu
Rozwiązanie:
- Sprawdź błędy składni PHP w logu błędów
- Upewnij się, że edytujesz plik functions.php motywu potomnego
- Zweryfikuj, czy wszystkie nawiasy i cudzysłowy są zamknięte
- Usuń kod i dodaj go z powrotem linia po linii
Rozważania dotyczące wydajności
Wpływ odświeżania AJAX:
- Każdy wybór uruchamia żądanie AJAX
- Więcej produktów = dłuższy czas odpowiedzi
- Rozwiązanie: Użyj cache i zoptymalizuj bazę danych
Wiele widżetów a shortcode:
- Widżety: Większe zużycie pamięci (wszystkie widżety się ładują)
- Shortcode: Bardziej efektywny (ładuje tylko jeden zestaw)
- Zalecenie: Użyj podejścia shortcode
Duże katalogi:
- Rozważ paginację w filtrach
- Użyj ładowania leniwego dla atrybutów
- Wdróż cachowanie po stronie serwera
Alternatywne podejścia
Używanie wielu skrótów
Zamiast jednego dynamicznego shortcode, użyj wielu statycznych:
// On wheel category page
[woof tax_only="pa_sub-type,pa_material,pa_colour,pa_size" ajax_redraw="1"]
// On Lingerie category page
[woof tax_only="pa_size,pa_colour,pa_material" ajax_redraw="1"]
// On Shop page
[woof tax_only="product_cat,pa_colour" by_price="1" ajax_redraw="1"]
Następnie użyj Widget Logic, aby wyświetlić odpowiedni shortcode na każdej stronie.
Używanie plików szablonów
Dodaj logikę warunkową bezpośrednio w szablonie motywu:
<?php
if (is_product_category('books')) {
echo do_shortcode('[woof tax_only="pa_sub-type,pa_material,pa_colour,pa_size"]');
} elseif (is_product_category('lingerie')) {
echo do_shortcode('[woof tax_only="pa_size,pa_colour,pa_material"]');
} elseif (is_shop()) {
echo do_shortcode('[woof tax_only="product_cat,pa_colour" by_price="1"]');
} else {
echo do_shortcode('[woof]');
}
?>
Podsumowanie
Problem: Te same filtry wyświetlają się wszędzie, zaśmiecając interfejs
Rozwiązanie 1: Włącz dynamiczne przeładowanie dla filtrowania zależnego
Rozwiązanie 2: Utwórz [woof_dynamic] shortcode z mapowaniem kategorii
Rozwiązanie 3: Dodaj obsługę strony sklepu z minimalnymi filtrami
Rozwiązanie 4: Użyj Widget Logic do zaawansowanej kontroli widoczności
Najlepsze podejście: Połącz rozwiązania 2 + 3 dla kompleksowego dynamicznego filtrowania
Klucz kodu:
add_shortcode('woof_dynamic', function() {
// Shop page logic
if (is_shop() AND !is_product_category()) {
return do_shortcode('[woof tax_only="product_cat" by_price="1"]');
}
// Category mapping
$term = get_queried_object();
if ($term AND $term->taxonomy === 'product_cat') {
$filters_map = [
'category-slug' => ['pa_attribute1', 'pa_attribute2'],
];
// Return category-specific filters
}
return do_shortcode('[woof]'); // Fallback
});
Tworzy to profesjonalne, przyjazne dla użytkownika doświadczenie filtrowania dopasowane do każdej kategorii produktów.