Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Wie man Brotkrümel in WooCommerce hinzufügt (Anleitung für Anfänger)

Sind Sie schon einmal durch ein riesiges Geschäft gewandert und haben den Überblick verloren, wo Sie angefangen haben und wie Sie zum Hauptgang zurückkommen? Die Navigation in einem großen Online-Shop kann sich genauso anfühlen.

Brotkrümel sind kleine Navigationspfade, die Ihnen den Weg zeigen, den Sie auf einer Website zurückgelegt haben, wie hilfreiche Schilder, die die Kunden durch Ihren WooCommerce-Shop führen.

Sie erleichtern nicht nur den Kunden die Orientierung, sondern geben auch Suchmaschinen ein besseres Verständnis für die Struktur Ihrer Website, was sich positiv auf Ihre Suchmaschinenoptimierung auswirken kann.

Die gute Nachricht ist, dass das Hinzufügen von Breadcrumbs zu Ihrem WooCommerce-Shop erstaunlich einfach ist. In diesem Artikel zeigen wir Ihnen einige einfache Methoden, mit denen Sie diese hilfreichen Navigationspfade in kürzester Zeit auf Ihrer Website einrichten können.

Add WooCommerce Breadcrumbs

Warum sollten Sie Breadcrumbs in WooCommerce hinzufügen?

Brotkrümel sind Navigationslinks, die oben auf Ihren Produktseiten oder Blogbeiträgen erscheinen. Diese Links zeigen Ihren Besuchern, wie sie auf die Seite gelangt sind, die sie gerade sehen.

Wenn Sie zum Beispiel ein WooCommerce-Geschäft haben, das Kleidung verkauft, dann könnte das Breadcrumb-Menü etwa so aussehen: Startseite “ Herrenmode “ Hemden & Polos “ Formelle Hemden.

WooCommerce Breadcrumbs example

Durch die Aktivierung von Breadcrumbs in WooCommerce können Ihre Kunden leichter in Ihrem Online-Shop navigieren und die gesuchten Produkte finden. Sie können einfach auf die Produktattribute oder Kategorien klicken, um verwandte Produkte anzuzeigen.

Brotkrümel helfen den Suchmaschinen auch, die Hierarchie und Struktur der Links in Ihrem eCommerce-Shop zu verstehen. Suchmaschinen wie Google zeigen sie sogar in den Suchergebnissen an, was Ihre Klickrate erhöhen kann.

Sehen wir uns also an, wie Sie Breadcrumbs in Ihrem WooCommerce-Shop aktivieren können. Wir werden zwei Methoden behandeln, wobei die erste für die meisten Benutzer empfohlen wird:

Die einfachste Möglichkeit, Breadcrumbs in WooCommerce zu aktivieren, ist die Verwendung des Plugins All in One SEO (AIOSEO).

Es ist das beste WordPress-SEO-Plugin auf dem Markt und ermöglicht es Ihnen, Breadcrumbs in WooCommerce mit einem Klick auf eine Schaltfläche hinzuzufügen. Das Plugin hilft Ihnen auch, Ihren Shop ohne technische Kenntnisse für Suchmaschinen zu optimieren.

Für dieses Tutorial werden wir die AIOSEO Pro-Version verwenden, da sie Breadcrumbs-Vorlagen enthält und mehr Optionen zur Anpassung bietet.

Es ist auch eine kostenlose Version erhältlich, die zwar Breadcrumbs enthält, aber keine Breadcrumb-Vorlagen bietet.

Zunächst müssen Sie das AIOSEO-Plugin auf Ihrer Website installieren und aktivieren. Weitere Details zur Installation eines WordPress-Plugins finden Sie in unserer Anleitung.

Nach der Aktivierung müssen Sie zu All in One SEO “ Allgemeine Einstellungen navigieren und Ihren Lizenzschlüssel eingeben. Sie finden den Schlüssel im AIOSEO-Kontobereich.

All in One SEO license

Als Nächstes müssen Sie AIOSEO in Ihrem WooCommerce-Shop mithilfe des Einrichtungsassistenten einrichten. Wenn Sie Hilfe benötigen, können Sie unserer Anleitung zur Einrichtung von All in One SEO für WordPress folgen.

Sobald Sie das Plugin auf Ihrer Website korrekt konfiguriert haben, müssen Sie auf die Seite All in One SEO “ Allgemeine Einstellungen gehen und dann auf die Registerkarte „Brotkrümel“ klicken.

Enable breadcrumbs display in All in One SEO

Danach können Sie die Option „Enable Breadcrumbs“ aktivieren. AIOSEO fügt dann automatisch Breadcrumbs-Schema-Markup zum Code Ihres WooCommerce-Shops hinzu.

Als Nächstes müssen Sie auswählen, wie Sie die Breadcrumbs anzeigen möchten. Scrollen Sie einfach nach unten und Sie werden die verschiedenen Möglichkeiten sehen, wie Sie Ihrem Online-Shop Breadcrumbs hinzufügen können.

Sie können sie manuell über einen Shortcode oder Block zu jeder Seite oder jedem Beitrag hinzufügen oder sie in einen Widget-Bereich einfügen. Fortgeschrittene Benutzer können auch PHP-Code verwenden, um Breadcrumbs zu ihren Theme-Vorlagendateien hinzuzufügen.

Im Folgenden zeigen wir Ihnen, wie Sie Ihren WooCommerce-Produkten Breadcrumbs hinzufügen können, aber zunächst werfen wir einen Blick auf die Anpassungsoptionen.

Breadcrumb display options

Wenn Sie nun nach unten zum Abschnitt Brotkrumen-Einstellungen scrollen, sehen Sie mehrere Einstellungen, mit denen Sie Ihre Brotkrumen anpassen können.

Sie können zum Beispiel das Trennsymbol ändern, den Homepage-Link aktivieren, ein Breadcrumb-Präfix hinzufügen, das Format ändern und vieles mehr. Sie können sogar eine Vorschau sehen, wie Ihre Navigationslinks in Ihrem WooCommerce-Shop erscheinen.

Breadcrumb settings

AIOSEO Pro gibt Ihnen auch Zugang zu Breadcrumb-Vorlagen.

Mit diesen Vorlagen können Sie professionell aussehende Breadcrumb-Links für verschiedene Inhaltstypen, Taxonomien und Archive auf Ihrer Website anzeigen.

AIOSEO Breadcrumb Templates

Darüber hinaus bietet das WordPress-Plugin auch verschiedene Optionen zur Anpassung der Vorlage.

Sie können zum Beispiel die Option „Standardvorlage verwenden“ deaktivieren und weitere Einstellungen anzeigen.

Customize product breadcrumb template

Es gibt Optionen für die Anzeige des Homepage-Links, des Archiv-Links für den Beitragstyp, des Taxonomie-Links, für das Hinzufügen von Tags zur Vorlage und für die Auswahl, ob Sie die Kategorien oder die Taxonomie der Tags priorisieren möchten.

Wenn Sie übergeordnete Kategorien für mehrere Produkte eingerichtet haben, können Sie diese auch im Editor für Brotkrumenvorlagen anpassen.

Wenn Sie fertig sind, vergessen Sie nicht, Ihre Änderungen zu speichern.

Als nächstes müssen Sie Ihren WooCommerce-Produktseiten Breadcrumbs hinzufügen.

AIOSEO zeigt Ihnen vier verschiedene Methoden, aber die einfachste ist die Verwendung eines Shortcodes, um die Breadcrumbs-Navigationslinks in Ihrem Online Shop anzuzeigen.

Use a shortcode to add breadcrumbs

Sie müssen nur den folgenden Shortcode an der Stelle einfügen, an der Sie die Breadcrumbs anzeigen möchten:

[aioseo_breadcrumbs]

Gehen Sie einfach zu Produkte “ Alle Produkte und bearbeiten Sie eine Produktseite. Anschließend können Sie den Shortcode in der Textansicht des WordPress-Editors hinzufügen und Ihre Seite aktualisieren.

Add shortcode in product page

Sie können nun Ihre Produktseite besuchen, um die Breadcrumb-Navigationslinks in Aktion zu sehen.

So sah es auf unserer Test-Website aus.

Breadcrumbs example

Außerdem können Sie Breadcrumbs in der Seitenleiste Ihres WooCommerce-Shops hinzufügen. Auf diese Weise müssen Sie nicht jede einzelne Produktseite bearbeiten, um Navigationslinks anzuzeigen, da diese überall auf Ihrer Website in der Seitenleiste erscheinen.

Um Breadcrumbs in der Seitenleiste anzuzeigen, können Sie in Ihrem WordPress-Adminbereich auf Darstellung “ Widgets gehen.

Klicken Sie auf das Pluszeichen oben links und suchen Sie dann nach „Brotkrumen“, um das Widget „AIOSEO – Breadcrumbs“ zu finden. Ziehen Sie es einfach per Drag & Drop in die Seitenleiste. Sie können auch einen Titel für Ihre Navigationslinks eingeben.

AIOSEO Breadcrumbs widget

Sobald das erledigt ist, können Sie auf die Schaltfläche „Speichern“ klicken.

Rufen Sie dann einfach Ihren WooCommerce-Shop auf, um die Breadcrumbs in der Seitenleiste zu sehen.

WooCommerce Sidebar Breadcrumbs

Wenn Sie andere Möglichkeiten nutzen möchten, um Ihrem WooCommerce-Shop Breadcrumbs hinzuzufügen, lesen Sie unsere Anleitung zur Anzeige von Breadcrumb-Navigationslinks in WordPress.

Wie man Brotkrümel für mehrere Kategorien hinzufügt

Haben Sie Produkte in Ihrem WooCommerce-Shop, die mehrere Kategorien haben?

Wenn ja, dann kann die korrekte Einrichtung von Breadcrumbs eine Herausforderung sein, da WordPress nicht den Weg aufzeichnet, den ein Kunde genommen hat, um auf der Produktseite zu landen.

AIOSEO fügt jedoch automatisch die erste Kategorie in den Breadcrumb ein und macht es einfach, das richtige Navigationsmenü für Produkte anzuzeigen, die mehrere Kategorien haben.

Das Plugin bietet auch eine Breadcrumb-Vorlage, die Sie für WordPress-Taxonomien wie Produktkategorien anpassen können. Alles, was Sie tun müssen, ist, zu All in One SEO “ Allgemeine Einstellungen zu gehen und dann die Registerkarte „Breadcrumbs“ auszuwählen.

Scrollen Sie dann zum Abschnitt „Breadcrumbs-Vorlagen“ und wählen Sie die Registerkarte „Taxonomien“. Standardmäßig zeigt das Plugin den Link zum übergeordneten Artikel in der Breadcrumb-Ansicht Ihres WooCommerce-Shops an.

Show parent category in breadcrumbs

Wenn Sie die Option „Standardvorlage verwenden“ deaktivieren, sehen Sie, dass der Link „Übergeordneten Artikel anzeigen“ aktiviert ist. Auf diese Weise können Sie ganz einfach die Hauptkategorie für jedes Produkt auf Ihrer Website anzeigen.

Nehmen wir an, Sie betreiben ein Online-Schuhgeschäft und eines der Produkte befindet sich sowohl in der Kategorie Sneakers als auch in der Kategorie Turnschuhe.

Product has multiple categories

AIOSEO wird automatisch die erste Kategorie auswählen.

Dann wird dies im Navigationsmenü der Brotkrümel angezeigt.

Multiple category breadcrumb preview

Methode 2: Hinzufügen von Brotkrumen mit WooCommerce Breadcrumbs Plugin

Eine andere Möglichkeit, Breadcrumbs in WooCommerce zu aktivieren, ist die Verwendung des WooCommerce Breadcrumbs-Plugins.

Es ist ein kostenloses WordPress-Plugin, mit dem Sie Ihrem Online-Shop Breadcrumbs hinzufügen können. Das Plugin ist einfach zu bedienen, aber es fehlen die Anpassungsfunktionen, die Sie in AIOSEO finden.

Zunächst müssen Sie das WooCommerce Breadcrumbs-Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.

Sobald das Plugin aktiviert ist, können Sie in Ihrem WordPress-Adminbereich zu Einstellungen “ WC Breadcrumbs gehen. Klicken Sie dann auf das Kontrollkästchen für „Breadcrumbs aktivieren“.

Enable WooCommerce Breadcrumbs

Als Nächstes können Sie das Aussehen der Navigationslinks ändern, die in Ihrem WooCommerce-Shop angezeigt werden.

Mit dem WooCommerce-Plugin können Sie das Breadcrumb-Trennsymbol und die HTML-Tags vor und nach Ihren Breadcrumbs auswählen.

Wenn Sie nun nach unten scrollen, finden Sie weitere Optionen zur Anpassung. Sie können zum Beispiel den Text und die URL für Ihre Homepage ändern, die in den Navigationslinks erscheinen werden.

More WooCommerce Breadcrumbs settings

Wenn Sie mit den Änderungen fertig sind, vergessen Sie nicht, auf die Schaltfläche „Änderungen speichern“ am unteren Rand zu klicken.

Expertenleitfäden zu WordPress und WooCommerce Navigation

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie man Breadcrumbs in WooCommerce hinzufügt. Vielleicht interessieren Sie sich auch für einige andere Anleitungen zur Navigation in WordPress und WooCommerce:

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

Kommentare

  1. Herzlichen Glückwunsch, du hast die Möglichkeit, der erste Kommentator dieses Artikels zu sein.
    Hast du eine Frage oder Anregung? Bitte hinterlasse einen Kommentar, um die Diskussion zu starten.

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.