Wie du die WooCommerce Breadcrumb reparierst

Was sind Breadcrumbs?

Hänsel und Gretel kennst du noch? Sicherlich – zumindest so grob. Genau wie die beiden ihre Brotkrumen (Breadcrumbs) verstreuen, um später wieder aus dem Wald zu finden, speichert die Breadcrumb Navigation deinen Weg durch die Webseite. So kannst du zu jeder Zeit sehen, wo du gerade bist, wie du dort hingekommen bist und wie du wieder zurückkommst.

Meistens findest du diese Art der Navigation auf verschachtelten Webseiten. Sie befindet sich häufig über dem eigentlichen Inhalt und startet oft mit “Sie sind hier”. Schon mal gesehen, oder?

Nicht nur für deine Besucher ist diese Art der Navigation wichtig, sondern auch für Suchmaschinen. Sie können die Struktur der Seite durch die hierarchische Verlinkung besser verstehen und die Relevanz der Seiten einordnen.

Was ist an den WooCommerce Breadcrumbs falsch?

Gut, wenn du auf diesen Artikel gestoßen bist, weißt du vermutlich schon was eine Breadcrumb Navigation ist und hast ein Problem damit. Denn auch WooCommerce bringt eine solche Linkleiste im Standard mit. Allerdings mit einem kleinen Fehler, der bei folgenden zwei Szenarien deine Besucher ziemlich verwirren wird.

Artikel in mehreren Kategorien

Du kannst deine Artikel in WooCommerce nicht nur in einer Kategorie anzeigen, sondern in beliebig vielen. Nehmen wir als Beispiel ein Parfüm, das Unisex ist und sowohl in der Kategorie “Für ihn”, als auch in der Kategorie “Für sie” einsortiert ist. Bei WooCommerce wird jetzt in der Brotkrumen-Navigation als Kategorie immer die Kategorie angezeigt, in der das Produkt als erstes angelegt wurde. Selbst die Option, eine Kategorie als “Primäre Kategorie” auszuwählen, hat darauf keinen Einfluss.

Klickt deine Besucherin jetzt also auf die Kategorie “Für sie” und wählt das Parfüm “Le Duft” aus, dann kann es passieren, dass in der Breadcrumb Navigation “Sie sind hier: Start > Für ihn > Le Duft” steht. Ziemlich verwirrend und auch unschön, weil der Besucher über die Kategorie nicht wieder in die Ebene darüber zurück kommt.

Einstieg über die WooCommerce Suche

Ein ähnliches Problem tritt bei der Suche auf. Nehmen wir an, dein Besucher gibt in das Suchfeld “Damenparfüm” ein und klickt auf der Suchergebnis-Seite auf “Le Duft”. In der Breadcrumb Navigation erscheint jetzt wieder “Sie sind hier: Start > Für ihn > Le Duft”. Ebenfalls sehr verwirrend und auch ärgerlich, weil er keinerlei Möglichkeit hat, über einen Navigationspunkt zu den Suchergebnissen zurückzukehren.

So kannst du deine WooCommerce Breadcrumb reparieren

Code für deine functions.php

function ut_fix_breadcrumb($crumbs)
{
    if (is_product() && $_SERVER['HTTP_REFERER'] && stristr($_SERVER['HTTP_REFERER'], 'deine-domain.de')) {

        $permalinks = wc_get_permalink_structure();
        $current_title = '';

        if (count($crumbs)) {
            $current_title = end($crumbs)[0];
        }

        $shop_page_id = wc_get_page_id( 'shop' );
        $shop_page    = get_post( $shop_page_id );

        $breadcrumb = array(
            array(__(get_the_title( $shop_page ), 'woocommerce-multilingual'), site_url()),
        );

        // search or category referer
        if (stristr($_SERVER['HTTP_REFERER'], '?s=')) {
            $breadcrumb[] = array(__('Suchergebnisse', 'woocommerce-multilingual'), esc_url($_SERVER['HTTP_REFERER']));


            $breadcrumb[] = array($current_title);

            return count($breadcrumb) > 2 ? $breadcrumb : $crumbs;

        } else {
            $url_parts = explode('/', trim(wp_parse_url($_SERVER['HTTP_REFERER'])['path'], '/'));
            $url = site_url() . '/' . $permalinks['category_base'];

            foreach ($url_parts as $url_part) {
                if ($term = get_term_by('slug', $url_part, 'product_cat')) {
                    $url .= '/' . $url_part;
                    $breadcrumb[] = array($term->name, $url);
                }
            }
            $breadcrumb[] = array($current_title);

            return count($breadcrumb) > 2 ? $breadcrumb : $crumbs;
        }
    }

    return $crumbs;

}
add_filter('woocommerce_get_breadcrumb', 'ut_fix_breadcrumb');

Was der Code macht

Der Code behebt im Grunde die beiden oben genannten Probleme. Das wird dadurch ermöglicht, dass in PHP eine Server-Variable zur Verfügung steht, die die zuletzt besuchte Seite enthält. Der Code prüft, ob diese Variable gefüllt ist und von deiner Domain kommt (Achtung: “deine-domain.de” im Code musst du austauschen). Wenn das so ist, wird diese zuletzt besuchte Seite in die Breadcrumb Navigation aufgenommen, falls nicht, wird die Navigation unverändert ausgegeben.

Der Code funktioniert mit folgendem Setup: WordPress, WooCommerce, WooCommerce Germanized, WPML *, Theme: VendiPro. Wenn du ein anderes Setup hast und der Code dort auch funktioniert, oder bei dir etwas nicht funktioniert, schreibe es mir gerne in die Kommentare.

Breadcrumb richtig reparieren

Wenn du dich nicht traust den Code selbst einzubauen, oder etwas dabei schief gegangen ist, kann ich dir gerne weiterhelfen – melde dich einfach über das Kontaktformular. Ich biete außerdem Wartungsverträge für deinen WooCommerce Shop an. Schau dir mal meine Pakete an, vielleicht ist der richtige WooCommerce Wartungsvertrag für dich dabei.