HUSKY - Product Filter for WooCommerce

Verschiedene WooCommerce-Filter pro Kategorie anzeigen (Dynamische Filterung)

Erfahren Sie, wie Sie verschiedene Filtersets basierend auf Produktkategorien anzeigen, abhängige Filter erstellen und Filter für die WooCommerce Shop-Seite anpassen.

Das Problem

Standardmäßig zeigt WOOF auf allen Seiten die gleichen Filter an. Verschiedene Produktkategorien benötigen jedoch oft unterschiedliche Filteroptionen:

Beispiel-Szenarien:

  • Elektronik-Kategorie: Marke, Bildschirmgröße, Speicher, RAM anzeigen
  • Bekleidungskategorie: Größe, Farbe, Material, Stil anzeigen
  • Möbelkategorie: Materialien, Farben, Abmessungen, Raumtypen anzeigen
  • Shop-Seite (Hauptarchiv): Nur Kategorien, Preisspanne, vorgestellte Marken anzeigen

Aktuelle Einschränkung: Alle Filteroptionen bleiben global, auch nachdem ein Benutzer eine Kategorie ausgewählt hat, was die Benutzeroberfläche mit irrelevanten Filtern überladen macht.

Was du lernen wirst:

  1. Wie man abhängige/bedingte Filterung aktiviert (Filter aktualisieren sich basierend auf der Auswahl)
  2. Wie man verschiedene Filter pro Produktkategorie anzeigt
  3. Wie man benutzerdefinierte Filtersets für die Shop-Seite erstellt
  4. So verwenden Sie Widget Logic zur erweiterten Sichtbarkeitskontrolle

 

Lösung 1: Abhängige Filterung aktivieren (AJAX-Neuzuweisung)

Der erste Schritt ist die Aktivierung der AJAX-Formular-Neuzeichenung, die Filter dynamisch aktualisiert, wenn Benutzer Auswahlen treffen.

Für Widgets:

  1. Gehen Sie zu Darstellung → Widgets
  2. Finden Sie Ihr WOOF-Widget
  3. Aktivieren Sie die Option „Formular-AJAX-Neuzezeichnung“

Dies bewirkt, dass sich Filter nach jeder Auswahl automatisch aktualisieren und nur relevante Optionen anzeigen.

Für Shortcodes:

Fügen Sie die ajax_redraw Attribut zu Ihrem WOOF-Shortcode:

[woof ajax_redraw="1"]

Was dies bewirkt:

  • Wenn der Benutzer „Rad“ auswählt → andere Filter werden automatisch aktualisiert.
  • Zeigt nur Untertypen, Materialien, Farben an, die für Rad verfügbar sind
  • Reduziert Unordnung durch Ausblenden irrelevanter Optionen

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

 

Lösung 2: Kategorienbasierte Filter-Sichtbarkeit (Custom Shortcode)

Diese Lösung erstellt einen dynamischen Shortcode, der je nach aktueller Produktkategorie unterschiedliche Filter anzeigt.

 

Schritt 1: Benutzerdefinierten Shortcode erstellen

Fügen Sie diesen Code zu Ihrem Child-Theme hinzu 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"]');
});

 

Schritt 2: Verwenden Sie den Shortcode

Ersetzen Sie Ihre bestehenden [woof] Shortcode mit:

[woof_dynamic]

Platzieren Sie diesen Shortcode in:

  • Widget-Bereiche (Text/HTML-Widget)
  • Page Builder-Blöcke (Elementor, Divi, etc.)
  • Theme-Template-Dateien: <?php echo do_shortcode('[woof_dynamic]'); ?>

 

Schritt 3: Konfigurieren Sie Ihre Kategorien

Aktualisieren Sie die $filters_map Array mit Ihren tatsächlichen:

  • Kategorie-Slugs (z. B. „Rad“, „Elektronik“)
  • Attribut-Slugs (z. B. „pa_brand“, „pa_size“)

Ihre Slugs finden:

Kategorie-Slugs:

  • Gehen Sie zu Produkte → Kategorien
  • Über einen Kategorienamen fahren
  • Schauen Sie sich die URL an: ...tag_ID=123&taxonomy=product_cat&post_type=product
  • Oder bearbeiten Sie die Kategorie und schauen Sie sich das Slug-Feld an

Attribut-Slugs:

  • Gehen Sie zu Produkte → Attribute
  • Sie beginnen mit pa_ gefolgt vom Attributnamen
  • Beispiele: pa_color, pa_size, pa_brand, pa_material

 

Lösung 3: Benutzerdefinierte Filter für die Shop-Seite

Die Hauptseite „WooCommerce Shop“ benötigt eine andere Behandlung, da sie kein Kategorie-Archiv ist.

Kombinierte Lösung: Shop-Seite + Kategorieseiten

Dieser Code behandelt sowohl die Shop-Seite als auch einzelne Kategorie-Seiten:

/**
 * 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"]');
});

Was dieser Code tut:

  1. Auf der Shop-Seite: Zeigt nur Kategorien, Farbe und Preis Filter an
  2. Auf Kategorie-Seiten: Zeigt kategoriespezifische Filter aus der Zuordnung an
  3. Auf anderen Seiten: Zeigt Standardfilter an

Filter der Shop-Seite anpassen: Ändern Sie diese Zeile, um unterschiedliche Filter auf der Shop-Seite anzuzeigen:

[woof tax_only="product_cat,pa_colour" by_price="1" ajax_redraw="1"]

Verfügbare Parameter:

  • tax_only="product_cat,pa_brand" – Nur diese Taxonomien anzeigen
  • by_price="1" – Preisbereichsfilter anzeigen
  • by_only="product_cat,pa_brand" – Alternative zu tax_only
  • ajax_redraw="1" – Dynamische Updates aktivieren

 

Lösung 4: Widget-Logik für bedingte Sichtbarkeit

Wenn Sie Widgets anstelle von Shortcodes verwenden möchten, können Sie die Sichtbarkeit von Widgets mit bedingter Logik steuern.

Schritt 1: Installieren Sie das Widget Logic Plugin

Wählen Sie eines dieser Plugins:

 

Schritt 2: Erstellen Sie mehrere WOOF-Widgets

  1. Gehen Sie zu Darstellung → Widgets
  2. Fügen Sie mehrere WOOF-Widgets zu Ihrer Seitenleiste hinzu
  3. Konfigurieren Sie jedes Widget mit unterschiedlichen Filtern

Schritt 3: Bedingte Logik hinzufügen

Fügen Sie für jedes Widget Sichtbarkeitsbedingungen hinzu:

Nur in der Kategorie Wheel anzeigen:

is_product_category('wheel')

Nur in der Kategorie Lingerie anzeigen:

is_product_category('lingerie')

Nur auf der Shop-Seite anzeigen:

is_shop() AND !is_product_category()

Auf mehreren Kategorien anzeigen:

is_product_category(array('wheel', 'lingerie', 'massage-candles'))

Überall außer auf der Shop-Seite anzeigen:

!is_shop()

Anzeigen in Elektronik- oder Computerkategorien:

is_product_category('electronics') || is_product_category('computers')

Praxisbeispiele

Beispiel 1: Adult Products Store

$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'],
];

 

Beispiel 2: Elektronikgeschäft

$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'],
];

 

Beispiel 3: Modegeschäft

$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'],
];

 

Beispiel 4: Möbelgeschäft

$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'],
];

 

Erweitert: Preis und Kategorien einschließen

Wenn Sie zusätzlich zu den Attributen Preisspanne und Kategorien anzeigen möchten:

// 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"]');
}

Erklärung der Parameter:

  • product_cat – Zeigt den Kategorie-Filter für Drilldown an
  • by_price="1" – Zeigt einen Preisbereich-Schieberegler an
  • ajax_redraw="1" – Filter dynamisch aktualisieren

Fehlerbehebung

Filter werden nicht dynamisch aktualisiert

Problem: Filter bleiben nach der Auswahl statisch
Lösung:

  • Stellen Sie sicher ajax_redraw="1" ist in Ihrem Shortcode
  • „Formular-AJAX-Neuzeichung“ in den Widget-Einstellungen aktivieren
  • Überprüfen Sie die JavaScript-Konsole auf Fehler

Falsche Filter werden in der Kategorie angezeigt

Problem: Kategorie zeigt falschen Filter an
Lösung:

  • Überprüfen Sie, ob der Kategorie-Slug korrekt ist (prüfen Sie die URL oder die Kategorieeinstellungen)
  • Kleinbuchstaben verwenden in $filters_map Array
  • Prüfen Sie, ob die Kategorie in Ihrer Zuordnung vorhanden ist

Filter werden gar nicht angezeigt

Problem: Keine Filter auf der Seite sichtbar
Lösung:

  • Überprüfen Sie, ob Attribut-Slugs mit pa_ (z. B. pa_color nicht color)
  • Prüfen Sie, ob Attribute Produkten in dieser Kategorie zugewiesen sind
  • Verwenden [woof] vorübergehend, um zu sehen, ob der grundlegende Shortcode funktioniert

Shop-Seite zeigt Kategorie-Filter an

Problem: Shop-Seite zeigt falschen Filter-Set an
Lösung:

  • Überprüfen is_shop() Bedingung steht zuerst in Ihrem Code
  • Prüfen Sie das !is_product_category() ist enthalten
  • Alle Caches löschen (WordPress, Server, Browser)

Attribut-Slugs funktionieren nicht

Problem: Filter werden für bestimmte Attribute nicht angezeigt
Lösung:

  • Gehen Sie zu Produkte → Attribute um korrekte Slugs zu finden
  • Denken Sie daran, zu verwenden pa_ Präfix (WooCommerce-Anforderung)
  • Rechtschreibung prüfen: pa_colour vs pa_color

Code funktioniert nach dem Hinzufügen nicht

Problem: Weißer Bildschirm oder Fehler nach dem Hinzufügen von Code
Lösung:

  • PHP-Syntaxfehler im Fehlerprotokoll prüfen
  • Stellen Sie sicher, dass Sie die functions.php des Child-Themes bearbeiten
  • Überprüfe, ob alle Klammern und Anführungszeichen geschlossen sind
  • Code entfernen und Zeile für Zeile wieder hinzufügen

Leistungsüberlegungen

AJAX-Neuzeichendarstellung:

  • Jede Auswahl löst eine AJAX-Anfrage aus
  • Mehr Produkte = längere Antwortzeit
  • Lösung: Caching verwenden und Datenbank optimieren

Mehrere Widgets vs. Shortcode:

  • Widgets: Höherer Speicherverbrauch (alle Widgets werden geladen)
  • Shortcode: Effizienter (nur ein Set wird geladen)
  • Empfehlung: Verwenden Sie die Shortcode-Methode

Große Kataloge:

  • Berücksichtigen Sie die Paginierung in Filtern
  • Lazy Loading für Attribute verwenden
  • Serverseitiges Caching implementieren

Alternative Ansätze

Mehrere Shortcodes verwenden

Anstatt eines dynamischen Shortcodes verwenden Sie mehrere statische:

// 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"]

Verwenden Sie dann Widget Logic, um den richtigen Shortcode auf jeder Seite anzuzeigen.

Verwendung von Vorlagendateien

Fügen Sie bedingte Logik direkt in Ihre Theme-Vorlage ein:

<?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]');
}
?>

Zusammenfassung

Problem: Gleiche Filter überall anzeigen, Benutzeroberfläche überladen

Lösung 1: AJAX-Neuzeichen für abhängige Filterung aktivieren

Lösung 2: Erstellen [woof_dynamic] Shortcode mit Kategorie-Mapping

Lösung 3: Shop-Seiten-Handling mit minimalen Filtern hinzufügen

Lösung 4: Verwenden Sie Widget Logic für erweiterte Sichtbarkeitskontrolle.

Bester Ansatz: Kombinieren Sie Lösungen 2 + 3 für eine umfassende dynamische Filterung

Tastencode:

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

Dies schafft eine professionelle, benutzerfreundliche Filtererfahrung, die auf jede Produktkategorie zugeschnitten ist.