Wenn du einen WooCommerce-Shop betreibst, ist die Schaltfläche „In den Warenkorb“ eines deiner wichtigsten Werkzeuge zur Steigerung der Konversionen. Sie ist die Brücke zwischen dem Stöbern der Kunden und dem Kauf. Ein gut platzierter, voll funktionsfähiger Warenkorb-Button macht das Einkaufserlebnis angenehmer und erhöht die Wahrscheinlichkeit von Verkäufen.
Aber was passiert, wenn diese wichtige Schaltfläche fehlt oder sich nicht wie erwartet verhält? Viele Shop-Betreiber/innen stoßen auf häufige Probleme, wie z. B. die Fehlermeldung „Die Schaltfläche „In den Warenkorb“ wird nicht angezeigt“, oder sie möchten die Schaltfläche anpassen, um ein besseres Markenerlebnis zu schaffen.
Dieser Artikel ist ein umfassender Leitfaden zum Hinzufügen, Anpassen und zur Fehlerbehebung der Schaltfläche „Zum Warenkorb hinzufügen“ in WooCommerce. Egal, ob du ein Entwickler bist, der die volle Kontrolle haben will, ein Shopbetreiber, der eine einfache Lösung sucht, oder jemand, der Fehler beheben will – hier findest du praktische Schritte, um die Arbeit effizient zu erledigen. Los geht’s!
Die WooCommerce-Schaltfläche zum Hinzufügen zum Warenkorb: eine kurze Einführung
Die Schaltfläche „In den Warenkorb“ in WooCommerce ist eine wichtige Möglichkeit, um mit deinem Shop zu interagieren. Standardmäßig können Kunden damit Produkte auswählen und sie in den Warenkorb legen.
Hier ist ein kurzer Überblick darüber, wo du diese Schaltfläche normalerweise findest:
- Produktseite: Sie erscheint neben den Produktdetails wie Titel, Preis und Beschreibung.
- Shop-Seite: Wird direkt unter jedem Produkt angezeigt und ermöglicht es Kunden, Artikel hinzuzufügen, ohne die einzelnen Produktseiten zu besuchen.
- Kategorieseite: Ähnlich wie die Shop-Seiten vereinfachen sie den Kaufprozess für mehrere Produkte in einer bestimmten Kategorie des Shops.
WooCommerce bietet zwar eine Standard-Schaltfläche zum Hinzufügen zum Warenkorb, die für die meisten Shops geeignet ist, aber es gibt Fälle, in denen du Änderungen vornehmen musst. Du könntest zum Beispiel den Button an das Design deiner Marke anpassen, die Sprache ändern oder zusätzliche Funktionen hinzufügen. Vielleicht musst du aber auch etwas reparieren. Wenn die Schaltfläche fehlt, kaputt ist oder sich aufgrund von Kompatibilitätsproblemen mit dem Theme, Plugin-Konflikten oder veralteten WooCommerce-Einstellungen nicht richtig verhält, kann eine Fehlerbehebung angebracht sein.
In den folgenden Abschnitten stellen wir dir verschiedene Methoden vor, mit denen du die Schaltfläche „Hinzufügen zum Warenkorb“ hinzufügen, anpassen und reparieren kannst, damit dein WooCommerce-Shop optimal funktioniert.
Methoden zum Anfügen der Schaltfläche „Zum Warenkorb hinzufügen“
Es gibt drei Hauptmethoden, um deinem WooCommerce-Shop eine Schaltfläche für den Warenkorb hinzuzufügen. Nicht jede Methode eignet sich für jeden Kenntnisstand. Lies dir also die Beschreibungen durch, wäge die Vor- und Nachteile ab und entscheide dich dann für die Methode, die für dich am sinnvollsten ist.
- Shortcodes verwenden: Diese einfache, codefreie Methode ist ideal für Anfänger. Mit Shortcodes kannst du schnell Schaltflächen zu Seiten oder Beiträgen hinzufügen, aber die Anpassungsmöglichkeiten können etwas eingeschränkt sein.
- Bearbeiten von Theme-Dateien: Wenn du mehr Kontrolle brauchst und dich mit dem Programmieren auskennst, kannst du durch das Bearbeiten von Theme-Dateien (wie
functions.php) die Schaltfläche genau nach deinen Wünschen hinzufügen und anpassen. Dieser Ansatz erfordert jedoch Vorsicht und technisches Wissen, da sich Fehler auf deine gesamte Website auswirken können. - Plugins verwenden: Plugins sind eine benutzerfreundliche Option, die das Hinzufügen und Anpassen von Add-to-Cart-Buttons vereinfacht. Diese Methode ist zwar schnell und leicht zugänglich, aber schlecht ausgewählte Plugins verursachen manchmal Konflikte, verlangsamen die Leistung der Website oder erfordern häufige Aktualisierungen.
Wir erklären dir, wie du mit Shortcodes eine Zum-Warenkorb-hinzufügen-Schaltfläche einfügst.
Shortcodes verwenden
Shortcodes sind eine der einfachsten und am leichtesten zugänglichen Methoden, um in WooCommerce eine Schaltfläche „zum Warenkorb hinzufügen“ einzufügen. Ein Shortcode ist ein kleines Stück Code, das in eckigen Klammern steht, etwa so: [shortcode]. WooCommerce interpretiert diesen Shortcode dann, um eine bestimmte Funktion auf deiner Website anzuzeigen.
Um eine „zum Warenkorb hinzufügen“-Schaltfläche mit einem Shortcode hinzuzufügen, kannst du die folgende Syntax verwenden: [add_to_cart id="PRODUCT_ID"]
Hier ist PRODUCT_ID die eindeutige ID des Produkts, auf das du verlinken möchtest. Um die Produkt-ID zu finden, gehe in deinem WordPress-Dashboard auf Produkte > Alle Produkte. Wenn du mit dem Mauszeiger über das Produkt fährst, das du hinzufügen möchtest, erscheint die Produkt-ID unter dem Produktnamen wie folgt: ID: 123.
Anschließend musst du den Shortcode in eine Seite oder einen Beitrag einfügen. Öffne dazu die Seite oder den Beitrag, auf der/dem du die Schaltfläche anzeigen möchtest. Füge dann einen Shortcode-Block hinzu (wenn du den WordPress-Blockeditor verwendest) oder füge den Shortcode direkt in den Inhaltsbereich ein.
Ersetze PRODUCT_ID durch die richtige Produkt-ID und speichere oder aktualisiere dann die Seite oder den Beitrag. In der Vorschau der Seite siehst du, dass die Schaltfläche zusammen mit dem Preis des Artikels eingefügt wurde:
In der Standardeinstellung übernimmt die Schaltfläche die Stile deines Themes.
Bearbeiten von Theme-Dateien (benutzerdefinierte Option)
Für Shop-Betreiber/innen oder Entwickler/innen, die die volle Kontrolle haben wollen, ist die Bearbeitung von Theme-Dateien eine hervorragende Möglichkeit, den Add-to-Cart-Button hinzuzufügen und anzupassen. Diese Methode erfordert Programmierkenntnisse und Vorsicht, bietet aber unendlich viele Möglichkeiten der Anpassung.
Auf diese Weise kannst du die Platzierung, den Stil und die Funktionalität der Schaltfläche genau nach Bedarf ändern. Außerdem bist du so weniger von Plugins von Drittanbietern abhängig, was die Leistung deiner Website verbessern kann.
Um den Add-to-Cart-Button durch Bearbeiten der Dateien deines Themes hinzuzufügen, musst du zunächst ein Child-Theme erstellen. Bevor du die Dateien deines Themes bearbeitest, solltest du unbedingt ein Child-Theme erstellen, damit deine Änderungen bei Theme-Updates nicht verloren gehen.
Der Rest dieser Anleitung wird nur innerhalb des Child-Themes ausgeführt.
Die Datei, die du bearbeiten musst, hängt davon ab, wo der Button erscheinen soll. Übliche Dateien sind:
single-product.php(für Produktseiten)functions.php(für globale Funktionen)
Sobald du die richtige Datei in deinem Child-Theme gefunden hast, fügst du den folgenden PHP-Snippet an der gewünschten Stelle in deiner Theme-Datei ein:echo do_shortcode('[add_to_cart id="PRODUCT_ID"]');
Ersetze PRODUCT_ID durch die tatsächliche Produkt-ID.
Speichere dann deine Änderungen und lade die aktualisierte Datei hoch. Besuche deinen Shop, um sicherzugehen, dass die Schaltfläche erscheint und wie erwartet funktioniert.
Plugins verwenden
Wenn du eine Lösung ohne Code bevorzugst, sind Plugins eine schnelle und zuverlässige Möglichkeit, die Schaltfläche „Zum Warenkorb hinzufügen“ ohne Programmierkenntnisse hinzuzufügen und anzupassen.
Hier sind einige bewährte Plugins, mit denen du die WooCommerce-Schaltfläche verwalten und anpassen kannst:
YITH WooCommerce Produkt Add-Ons
Mit dem YITH WooCommerce Product Add-Ons Plugin kannst du deine Produkte aufwerten, indem du zusätzliche Optionen und Anpassungen direkt auf der Produktseite anbietest. Egal, ob es sich um Geschenkverpackungen, Personalisierungsfelder oder zusätzliche Dienstleistungen handelt, dieses Plugin macht es einfacher, ein individuelles Einkaufserlebnis zu bieten. Kunden können während des Kaufvorgangs Add-Ons auswählen, was ihre Zufriedenheit erhöht und den durchschnittlichen Bestellwert deines Shops steigert.
Hauptmerkmale
- Füge unbegrenzt viele Zusatzoptionen zu deinen Produkten hinzu, z. B. Kontrollkästchen, Dropdowns, Textfelder und mehr.
- Erhebe zusätzliche Gebühren für ausgewählte Add-ons, um deinen Umsatz zu steigern.
- Bietet eine bedingte Logik an, um Optionen je nach Auswahl des Kunden anzuzeigen.
- Vollständige Kompatibilität mit variablen Produkten und WooCommerce-Themes.
WooCommerce Custom Add to Cart Button
Mit dem Woo Custom Add to Cart Button Plugin kannst du die Funktionsweise deiner WooCommerce „zum Warenkorb hinzufügen“-Schaltflächen individuell anpassen. Du hast die volle Kontrolle über den Text, die Farben, den Stil und die Platzierung der Buttons, damit sie perfekt zum Branding deines Shops passen. Das Plugin unterstützt auch erweiterte Funktionen wie benutzerdefinierte URLs, mit denen du Kunden nach dem Klick auf den Button auf bestimmte Seiten wie die Kasse oder benutzerdefinierte Landing Pages weiterleiten kannst.
Wichtigste Funktionen
- Passe den Text, den Stil und die Platzierung des Add-to-Cart-Buttons an.
- Lege benutzerdefinierte Weiterleitungs-URLs für einen verbesserten Bestellvorgang fest.
- Änderungen lassen sich leicht durchführen, ohne dass du den Code anfassen musst, was es für Anfänger einfach macht.
- Leichtgewichtig und kompatibel mit den meisten WooCommerce-Themes.
WPC AJAX Add to Cart
Das WPC AJAX Add to Cart Plugin erweitert deinen WooCommerce Shop, indem es Kunden ermöglicht, Produkte in den Warenkorb zu legen, ohne die Seite zu aktualisieren. Diese AJAX-Funktionalität verbessert das Einkaufserlebnis und macht es schneller und benutzerfreundlicher. Das Plugin unterstützt eine Vielzahl von Produkttypen, darunter einfache, variable und gruppierte Produkte. Außerdem lässt es sich mit den meisten WooCommerce-Themen und -Plugins integrieren.
Hauptmerkmale
- AJAX-gestützte Add-to-Cart-Funktionalität für ein reibungsloses Nutzererlebnis.
- Flexible Unterstützung für verschiedene Produkttypen, einschließlich variabler und gruppierter Produkte.
- Kompatibilität mit gängigen WooCommerce-Themes und -Erweiterungen.
- Leichtes Design, damit dein Shop schnell und reaktionsschnell bleibt.
Häufige Probleme und ihre Behebung
Selbst mit den integrierten Funktionen von WooCommerce kann die Schaltfläche „In den Warenkorb“ manchmal seltsam aussehen, sich falsch verhalten oder gar nicht angezeigt werden. Das stört die Leistung deines Shops und frustriert die Kunden. Im Folgenden gehen wir auf die häufigsten Probleme ein und bieten Schritt-für-Schritt-Lösungen, um sie zu beheben.
Die Schaltfläche „In den Warenkorb“ wird nicht angezeigt
Wenn die Schaltfläche „In den Warenkorb“ nicht angezeigt wird, liegt das oft daran, dass:
- Probleme mit der Theme-Kompatibilität
- Plugin-Konflikte
- Veraltete WooCommerce-Versionen
- Falsche Produkteinstellungen
Um dieses Problem zu beheben, überprüfe zuerst deine WooCommerce-Einstellungen. Gehe zu WooCommerce > Einstellungen > Produkte und vergewissere dich, dass die Option AJAX-Schaltflächen zum Hinzufügen zum Warenkorb aktivieren aktiviert ist.
Als nächstes überprüfe den Produkttyp. Bei einigen Produkttypen, wie z. B. externen oder Partnerprodukten, wird möglicherweise keine Schaltfläche zum Hinzufügen zum Warenkorb angezeigt. Um dies zu beheben, gehe in deinem Dashboard zu Produkte > Alle Produkte.
Bearbeite dann das Produkt und vergewissere dich, dass es im Abschnitt Produktdaten auf Einfaches Produkt oder Variables Produkt eingestellt ist.
Wenn dies das Problem nicht behebt, prüfe, ob Plugin-Konflikte vorliegen. Deaktiviere alle Plugins außer WooCommerce und besuche dann deinen Shop, um zu sehen, ob die Schaltfläche „In den Warenkorb“ wieder angezeigt wird. Wenn dies der Fall ist, reaktiviere die Plugins nacheinander und aktualisiere die Website jedes Mal, um das Konflikt-Plugin zu identifizieren.
Um die Fehlersuche fortzusetzen, wechsle vorübergehend zu einem Standard-Theme wie Storefront oder Twenty Twenty-Four. Wenn die Schaltfläche auch mit dem Standard-Theme funktioniert, liegt das Problem bei deinem aktiven Theme. Möglicherweise musst du den Theme-Entwickler um Unterstützung bitten.
Du kannst auch überprüfen, ob WooCommerce und WordPress auf dem neuesten Stand sind. Gehe zu Dashboard > Updates und stelle sicher, dass WooCommerce, WordPress und alle Plugins auf dem neuesten Stand sind. Veraltete Versionen können zu Fehlern und Leistungsproblemen führen.
Wenn du immer noch Probleme hast, aktiviere das Debugging. Gehe dazu zu WooCommerce > Status > Logs und suche nach Fehlermeldungen. Ein Tool wie das Plugin Query Monitor kann dir helfen, PHP-Fehler oder Konflikte zu erkennen.
Schaltfläche „In den Warenkorb“ funktioniert nicht
Manchmal wird die Schaltfläche zwar angezeigt, aber die Produkte können nicht in den Warenkorb gelegt werden. Das kann z. B. an JavaScript-Fehlern oder Caching-Problemen liegen.
Überprüfe zunächst, ob JavaScript-Fehler vorliegen. Öffne deinen Shop in einem Browser und drücke F12, um die Entwicklertools zu öffnen oder Cmd + Option + I auf dem Mac. Gehe auf die Registerkarte Konsole und suche nach roten Fehlermeldungen.
Wenn Fehler angezeigt werden, können sie durch widersprüchliche Skripte aus einem Theme oder Plugin verursacht werden.
Wenn du ein Caching-Plugin verwendest, lösche den Cache und teste erneut. Lösche den Cache deines Browsers oder teste die Seite in einem Inkognito-Fenster.
Doppelte „In den Warenkorb“-Schaltflächen
Manchmal siehst du auf den Produktseiten mehrere „In den Warenkorb“-Schaltflächen, was Kunden verwirren kann.
Dies wird oft durch Theme-Vorlagen oder Anpassungen verursacht. Um dies zu beheben, überprüfe, ob in der Datei single-product.php deines Themes doppelte do_action(‚woocommerce_after_add_to_cart_button‘) Hooks vorhanden sind. Entferne dann die doppelten Hooks und speichere die Änderungen.
So passt du die WooCommerce-Schaltfläche für den Warenkorb an
Wenn du die Schaltfläche „In den Warenkorb“ anpasst, verbessert sich die Benutzerfreundlichkeit und sie passt besser zum Branding deines Shops. Egal, ob du den Text, den Stil oder die Funktionalität ändern möchtest, WooCommerce macht es mit ein paar Anpassungen an deinen Theme-Dateien oder CSS möglich. Denke daran, ein Child-Theme zu verwenden, um diese Änderungen vorzunehmen, und immer ein Backup deiner Website zu erstellen, bevor du fortfährst.
Ändere den Text der Schaltfläche
WooCommerce verwendet standardmäßig „In den Warenkorb“ als Schaltflächentext. Wenn du ihn durch „Jetzt kaufen“ oder „In den Warenkorb“ ersetzen möchtest, kannst du das mit einem einfachen Codeschnipsel tun.
Füge den folgenden Code in die Datei functions.php deines Child-Themes ein:
function customize_add_to_cart_text( $text ) {
return __( 'Buy Now', 'woocommerce' );
}
add_filter( 'woocommerce_product_add_to_cart_text', 'customize_add_to_cart_text' );Ersetze ‚Buy Now‘ durch deinen gewünschten Text.
Speichere die Datei und aktualisiere deinen Shop, um den aktualisierten Schaltflächentext zu sehen.
Ändere den Stil der Schaltfläche
Um die Schaltfläche besser an dein Branding anzupassen, kannst du das Aussehen der Schaltfläche, einschließlich Farben, Schriftarten und Größen, mit benutzerdefiniertem CSS ändern.
Hier ist ein Beispiel für CSS, mit dem du die Schaltfläche „In den Warenkorb“ anpassen kannst:
.button.single_add_to_cart_button {
background-color: #ff6600;
color: #ffffff;
font-size: 18px;
padding: 12px 24px;
border-radius: 8px;
text-transform: uppercase;
}
.button.single_add_to_cart_button:hover {
background-color: #e65c00;
color: #ffffff;
}Um dieses CSS anzuwenden, gehe in deinem WordPress-Dashboard zu Darstellung > Anpassen > Zusätzliche CSS. Füge den obigen Code ein und klicke auf Veröffentlichen, um die Änderungen zu speichern.
Leite die Nutzer nach dem Klick auf die Schaltfläche weiter
Wenn du auf den Warenkorb-Button klickst, bleiben die Kunden normalerweise auf der gleichen Seite. Wenn du Nutzer/innen auf eine bestimmte Seite umleiten möchtest – z. B. auf die Seite des Warenkorbs oder der Kasse -, füge das folgende Snippet von GitHub zu deiner functions.php Datei hinzu:
function redirect_after_add_to_cart() {
global $woocommerce;
$checkout_url = wc_get_checkout_url();
return $checkout_url;
}
add_filter( 'woocommerce_add_to_cart_redirect', 'redirect_after_add_to_cart' );Dieses Beispiel leitet die Nutzer zur Kassenseite weiter.
Ersetze $checkout_url bei Bedarf durch eine beliebige andere Seiten-URL (z. B. die Warenkorb-Seite).
Zusammenfassung
Die WooCommerce-Schaltfläche „In den Warenkorb“ spielt eine wichtige Rolle bei der Gestaltung eines reibungslosen Einkaufserlebnisses und der Steigerung der Konversionsrate. In diesem Leitfaden haben wir verschiedene Methoden zum Hinzufügen, Anpassen und zur effektiven Fehlerbehebung der Schaltfläche vorgestellt.
Du kannst Shortcodes verwenden, um das Hinzufügen zu vereinfachen, die Themadateien bearbeiten, um die volle Kontrolle zu haben, oder dich auf Plugins verlassen, um eine Lösung ohne Code zu finden. Außerdem haben wir erklärt, wie du häufige Probleme beheben und Anpassungen vornehmen kannst, um von Anfang an ein solides Nutzererlebnis zu schaffen.
Willst du, dass dein Shop von Anfang bis Ende gut funktioniert? Dann solltest du das Managed Hosting für WordPress von Kinsta in Betracht ziehen. Funktionen wie Staging-Umgebungen, automatische Backups und erstklassige Sicherheitsvorkehrungen sorgen dafür, dass deine Website reibungslos läuft, während du dich auf das Wachstum deines Shops und die Bereitstellung hervorragender Produkte konzentrieren kannst. Was ist besser als das?
Steve Bonisteel is Technical Editor bij Kinsta. Hij begon zijn schrijverscarrière als verslaggever en achtervolgde ambulances en brandweerwagens. Sinds eind jaren negentig schrijft hij over internetgerelateerde technologie.
