HUSKY - Products Filter Professional for WooCommerce

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:

  1. Jak włączyć filtrowanie zależne/warunkowe (filtry aktualizują się w zależności od wyboru)
  2. Jak pokazać różne filtry dla każdej kategorii produktów
  3. Jak tworzyć niestandardowe zestawy filtrów dla strony Sklep
  4. 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:

  1. Przejdź do Wygląd → Widżety
  2. Znajdź swój widget WOOF
  3. 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:

  1. Na stronie Sklepu: Pokazuje tylko filtry Kategorii, Kolorów i Ceny
  2. Na stronach kategorii: Wyświetla filtry specyficzne dla kategorii z mapowania
  3. 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 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 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:

 

Krok 2: Tworzenie wielu 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 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 widoku
  • by_price="1" – Pokazuje suwak zakresu cen
  • ajax_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_map tablica
  • 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_color nie color)
  • 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_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 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.