Jak wyświetlać różne filtry WooCommerce na kategorię (Dynamic Filtering)

Dowiedz się, jak wyświetlać różne zestawy filtrów w zależności od kategorii produktów, tworzyć filtrowanie zależne oraz dostosowywać filtry dla strony sklepu WooCommerce.

Problem

Domyślnie WOOF pokazuje te same filtry na wszystkich stronach. Jednak różne kategorie produktów często wymagają różnych opcji filtrowania:

Przykładowe scenariusze:

• Kategoria Elektronika: Pokaż Markę, Przekątną ekranu, Pamięć, RAM
• Kategoria Odzież: Pokaż Rozmiar, Kolor, Materiał, Styl
• Kategoria Meble: Pokaż Materiał, Kolor, Wymiary, Typ pomieszczenia
• Strona sklepu (główne archiwum): Pokaż tylko Kategorie, Zakres cen, Polecane marki

Obecne ograniczenie: Wszystkie opcje filtrów pozostają globalne, nawet po wybraniu kategorii przez użytkownika, co sprawia, że interfejs jest zaśmiecony nieistotnymi filtrami.

Czego się nauczysz:

1. Jak włączyć filtrowanie zależne/warunkowe (filtry aktualizują się na podstawie wyboru)
2. Jak pokazywać różne filtry dla każdej kategorii produktów
3. Jak tworzyć niestandardowe zestawy filtrów dla strony sklepu
4. Jak używać Widget Logic do zaawansowanego sterowania widocznością

Rozwiązanie 1: Włącz filtrowanie zależne (przerysowanie AJAX)

Pierwszym krokiem jest włączenie przerysowania formularza AJAX, które dynamicznie aktualizuje filtry, gdy użytkownik dokonuje wyborów.

Dla widżetów:

1. Przejdź do Wygląd → Widżety
2. Znajdź swój widżet WOOF
3. Włącz opcję „Przerysowanie formularza AJAX”

Dzięki temu filtry aktualizują się automatycznie po każdym wyborze, pokazując tylko odpowiednie opcje.

Dla shortcode'ów:

Dodaj atrybut ajax_redraw do swojego shortcode'a WOOF:

[woof ajax_redraw="1"]

Co to robi:

• Gdy użytkownik wybierze „Koło” → inne filtry aktualizują się automatycznie
• Pokazuje tylko podtypy, materiały, kolory dostępne dla Koła
• Zmniejsza bałagan, ukrywając nieistotne opcje

Dokumentacja: https://products-filter.com/shortcode/woof

Rozwiązanie 2: Widoczność filtrów na podstawie kategorii (niestandardowy shortcode)

To rozwiązanie tworzy dynamiczny shortcode, który wyświetla różne filtry w zależności od bieżącej kategorii produktów.

Krok 1: Utwórz niestandardowy shortcode

Dodaj ten kod do pliku functions.php swojego motywu potomnego:

/**
 * 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'a

Zastąp swój istniejący shortcode [woof] następującym:

[woof_dynamic]

Umieść ten shortcode w:

• Obszarach widżetów (widżet Tekst/HTML)
• Blokach kreatora stron (Elementor, Divi itp.)
• Plikach szablonów motywu: <?php echo do_shortcode('[woof_dynamic]'); ?>

Krok 3: Skonfiguruj swoje kategorie

Zaktualizuj tablicę $filters_map swoimi faktycznymi danymi:

• Slugami kategorii (np. 'wheel', 'electronics')
• Slugami atrybutów (np. 'pa_brand', 'pa_size')

Znajdowanie swoich slugów:

Slugi kategorii:

• Przejdź do Produkty → Kategorie
• Najedź kursorem na nazwę kategorii
• Spójrz na adres URL: ...tag_ID=123&taxonomy=product_cat&post_type=product
• Lub edytuj kategorię i spójrz na pole sluga

Slugi atrybutów:

• Przejdź do Produkty → Atrybuty
• Zaczynają się od pa_, po którym następuje nazwa atrybutu
• Przykłady: pa_color, pa_size, pa_brand, pa_material

Rozwiązanie 3: Niestandardowe filtry dla strony sklepu

Główna strona sklepu WooCommerce wymaga innego podejścia, ponieważ nie jest archiwum kategorii.

Rozwiązanie łączone: 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:

1. Na stronie sklepu: Pokazuje tylko filtry Kategorie, Kolor i Cena
2. Na stronach kategorii: Pokazuje filtry specyficzne dla kategorii z mapowania
3. Na innych stronach: Pokazuje domyślne filtry

Dostosuj filtry strony sklepu: Zmień tę linię, aby pokazywać inne 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 taksonomie
• by_price="1" – Pokaż filtr zakresu cen
• by_only="product_cat,pa_brand" – Alternatywa dla tax_only
• ajax_redraw="1" – Włącz dynamiczne aktualizacje

Rozwiązanie 4: Widget Logic dla warunkowej widoczności

Jeśli wolisz używać widżetów zamiast shortcode'ów, możesz kontrolować widoczność widżetów za pomocą logiki warunkowej.

Krok 1: Zainstaluj wtyczkę Widget Logic

Wybierz jedną z tych wtyczek:

• Widget Logic: https://wordpress.org/plugins/widget-logic/
• Show Widget by Logic: https://github.com/realmag777/Show-WordPress-Widget-by-Logic

Krok 2: Utwórz wiele widżetów WOOF

1. Przejdź do Wygląd → Widżety
2. Dodaj wiele widżetów WOOF do swojego paska bocznego
3. Skonfiguruj każdy widżet z innymi filtrami

Krok 3: Dodaj logikę warunkową

Dla każdego widżetu dodaj warunki widoczności:

Pokaż tylko w kategorii Koła:

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'))

Pokaż 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 elektroniczny

$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 modowy

$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 pokazać 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"]');
}

Objaśnienie parametrów:

• product_cat – Pokazuje filtr kategorii do zawężania
• by_price="1" – Pokazuje suwak zakresu cen
• ajax_redraw="1" – Aktualizuje filtry dynamicznie

Rozwiązywanie problemów

Filtry nie aktualizują się dynamicznie

Problem: Filtry pozostają statyczne po dokonaniu wyboru
Rozwiązanie:

• Upewnij się, że ajax_redraw="1" znajduje się w twoim shortcodzie
• Włącz „Przerysowanie formularza AJAX” w ustawieniach widżetu
• Sprawdź konsolę JavaScript pod kątem błędów

Nieprawidłowe filtry wyświetlane w kategorii

Problem: Kategoria pokazuje nieprawidłowy zestaw filtrów
Rozwiązanie:

• Sprawdź, czy slug kategorii jest poprawny (sprawdź URL lub ustawienia kategorii)
• Używaj małych liter w tablicy $filters_map
• Sprawdź, czy kategoria istnieje w twoim mapowaniu

Filtry w ogóle się nie pojawiają

Problem: Na stronie nie widać żadnych filtrów
Rozwiązanie:

• Sprawdź, czy slugi atrybutów zaczynają się od pa_ (np. pa_color, a nie color)
• Sprawdź, czy atrybuty są przypisane do produktów w tej kategorii
• Użyj tymczasowo [woof], aby sprawdzić, czy podstawowy shortcode działa

Strona sklepu pokazuje filtry kategorii

Problem: Strona sklepu pokazuje nieprawidłowy zestaw filtrów
Rozwiązanie:

• Sprawdź, czy warunek is_shop() jest pierwszy w twoim kodzie
• Upewnij się, że !is_product_category() jest uwzględnione
• Wyczyść wszystkie pamięci podręczne (WordPress, serwer, przeglądarka)

Slugi atrybutów nie działają

Problem: Filtry nie pokazują się dla konkretnych atrybutów
Rozwiązanie:

• Przejdź do Produkty → Atrybuty, aby znaleźć poprawne slugi
• Pamiętaj o użyciu przedrostka pa_ (wymóg WooCommerce)
• Sprawdź pisownię: pa_colour vs pa_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 dzienniku błędów
• Upewnij się, że edytujesz plik functions.php motywu potomnego
• Sprawdź, czy wszystkie nawiasy i cudzysłowy są zamknięte
• Usuń kod i dodawaj go ponownie linia po linii

Uwagi dotyczące wydajności

Wpływ przerysowania AJAX:

• Każdy wybór wyzwala żądanie AJAX
• Więcej produktów = dłuższy czas odpowiedzi
• Rozwiązanie: Używaj buforowania i optymalizuj bazę danych

Wiele widżetów vs. shortcode:

• Widżety: Większe zużycie pamięci (wszystkie widżety się ładują)
• Shortcode: Bardziej wydajny (ładuje się tylko jeden zestaw)
• Zalecenie: Użyj podejścia z shortcodem

Duże katalogi:

• Rozważ paginację w filtrach
• Użyj leniwego ładowania dla atrybutów
• Zaimplementuj buforowanie po stronie serwera

Alternatywne podejścia

Używanie wielu shortcode'ów

Zamiast jednego dynamicznego shortcode'a, 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 pokazać 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 pokazują się wszędzie, zaśmiecając interfejs

Rozwiązanie 1: Włącz przerysowanie AJAX dla filtrowania zależnego

Rozwiązanie 2: Utwórz shortcode [woof_dynamic] z mapowaniem kategorii

Rozwiązanie 3: Dodaj obsługę strony sklepu z minimalnymi filtrami

Rozwiązanie 4: Użyj Widget Logic do zaawansowanego sterowania widocznością

Najlepsze podejście: Połącz rozwiązania 2 i 3, aby uzyskać kompleksowe filtrowanie dynamiczne

Kluczowy kod:

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
});

To tworzy profesjonalne, przyjazne dla użytkownika doświadczenie filtrowania dostosowane do każdej kategorii produktów.