So passe ich den WooCommerce „In den Warenkorb“-Button an (ohne Code oder mit Code) 

Sie haben Ihren WooCommerce-Shop eingerichtet, aber der Standard-Button „In den Warenkorb“ ist schlicht grau und fügt sich in die Seite ein. Sie möchten, dass er etwas Klareres sagt, zu Ihrer Markenfarbe passt oder ein auffälliges Symbol trägt.

Ich habe WooCommerce-Shop-Seiten mit SeedProd erstellt und den Button-Text mit WPCode angepasst. Daher zeige ich Ihnen die Optionen für benutzerdefinierte WooCommerce-„In den Warenkorb“-Buttons, die ich tatsächlich verwende. Für eine vollständige visuelle Neugestaltung verwende ich SeedProd, für eine kostenlose native Änderung verwende ich WooCommerce Blocks und für einen schnellen Text- oder Farbwechsel füge ich einen Code-Schnipsel ein.

Welche Methode sollten Sie verwenden?

Wählen Sie die Methode, die dem von Ihnen benötigten Kontrollumfang und dem, wofür Sie zu zahlen bereit sind, entspricht.

• SeedProd (visuell, ohne Code): Am besten geeignet, wenn Sie Ihre Shop- und Produktseiten gestalten und die volle Kontrolle über Text, Farbe, Symbol und Hover-Stile wünschen. Für das WooCommerce-Design ist der Elite-Plan erforderlich.
• WooCommerce Blocks (kostenlos, nativ): Gut geeignet, um den Button zu platzieren und den Stil des Mengenwählers festzulegen, aber er ändert nicht den Button-Text, die Farbe oder die Typografie auf der einzelnen Produktseite.
• Code-Schnipsel (schnelle Anpassung): Am besten für eine schnelle Text- oder Farbänderung auf einzelnen Seiten und Shop-Seiten, wenn Sie damit vertraut sind, einen Schnipsel in WPCode einzufügen.

Eines, das es wert ist, gleich zu Beginn gesagt zu werden, ist, dass klarere, handlungsorientierte Beschriftungen wie „Jetzt kaufen“ oder „Zur Tasche hinzufügen“ dazu neigen, die Zurückhaltung bei Erstbesuchern zu verringern, da sie den Leuten genau sagen, was als Nächstes passiert. Diese kleine Änderung der Wortwahl ist hier oft der einfachste Gewinn.

Passen Sie den benutzerdefinierten WooCommerce „In den Warenkorb“-Button mit SeedProd an

Für die erste Methode verwende ich SeedProd, da es mir ermöglicht, den Button-Text, die Farbe und das Symbol visuell zu bearbeiten, während ich die Änderung sehe.

SeedProd ist ein Drag-and-Drop-Website-Builder, mit dem Sie jeden Teil Ihres Shops ohne Code anpassen können. Da es WooCommerce-Unterstützung bietet, können Sie Ihre Shop- und Produktseiten, einschließlich der Schaltfläche „In den Warenkorb legen“, per Point-and-Click gestalten.

Eine ehrliche Anmerkung, bevor Sie beginnen: Die WooCommerce-Designfunktionen von SeedProd erfordern den Elite-Plan. Wenn Sie eine kostenlose Methode wünschen, springen Sie zur unten stehenden Methode mit WooCommerce-Blöcken.

Schritt 1. SeedProd installieren und aktivieren

Gehen Sie zur SeedProd-Preisseite und wählen Sie den Elite-Plan, um WooCommerce-Funktionen freizuschalten. Installieren und aktivieren Sie dann das Plugin.

Gehen Sie als Nächstes zu SeedProd » Einstellungen, fügen Sie Ihren Lizenzschlüssel ein und klicken Sie auf Schlüssel überprüfen.

Schritt 2. Wählen Sie ein Website-Kit

Gehen Sie als Nächstes zu SeedProd » Theme Builder und klicken Sie auf die Schaltfläche Themes. Hier sehen Sie eine Bibliothek von Website-Kits, die Sie mit einem Klick importieren können.

Suchen Sie nach Kits, die mit „WooCommerce“ gekennzeichnet sind, da diese für Online-Shops konzipiert sind.

Wählen Sie ein Design, das Ihnen gefällt, und SeedProd lädt es in Ihren Theme Builder, damit Sie sofort mit der Anpassung beginnen können.

Schritt 3. Passen Sie Ihren „In den Warenkorb“-Button an

Lassen Sie uns nun den „In den Warenkorb“-Button dort bearbeiten, wo er am wichtigsten ist: auf Ihren Shop- und Produktseiten.

Passen Sie den „In den Warenkorb“-Button auf der Shop-Seite an

Öffnen Sie in SeedProd » Theme Builder Ihre Shop-Seite und klicken Sie auf Design bearbeiten.

Wählen Sie den Block Produktgitter und öffnen Sie dann die Einstellungen für Buttons.

• Stil: Wählen Sie Flat, 2D, Vintage, Ghost oder Link.
• Text: Ändern Sie die Beschriftung in etwas Klareres wie „Jetzt kaufen“.
• Design: Passen Sie Farbe, Größe, Radius des Rahmens und Hover-Effekte unter Erweitert an.

Klicken Sie auf Speichern, wenn Sie mit dem Button-Stil zufrieden sind.

Passen Sie den „In den Warenkorb“-Button auf der Produktseite an

Öffnen Sie als Nächstes die Vorlage Produktseite und klicken Sie auf Design bearbeiten. Wählen Sie den „In den Warenkorb“-Button im Bereich Produktdetails aus, um seine Einstellungen zu bearbeiten.

• Text & Ausrichtung: Aktualisieren Sie den CTA-Text und die Position.
• Symbol: Fügen Sie ein Warenkorb- oder Häkchensymbol vor/nach dem Text mit Font Awesome hinzu.
• Erweitert: Passen Sie Farben, Typografie, Abstände und Hover-Stile an.

Sie können den Block Schaltfläche „In den Warenkorb legen“ auch in andere Vorlagen, wie z. B. einen Blogbeitrag, einfügen und eine Produkt-ID eingeben, damit die Schaltfläche direkt zu diesem Artikel verlinkt. Ich mache das, wenn ich ein einzelnes Produkt in einem Artikel bewerben möchte.

Schritt 4. Speichern und veröffentlichen Sie Ihre Änderungen

Wenn Sie mit dem Aussehen Ihrer WooCommerce-Seiten zufrieden sind, können Sie Ihren Shop live schalten. Gehen Sie dazu zurück zum Theme Builder und schalten Sie in der oberen rechten Ecke den Schalter SeedProd Theme aktivieren auf „Ein“.

Werfen wir einen Blick auf einige der Seiten, die ich angepasst habe, beginnend mit der Shop-Seite.

Hier ist die Produktseite mit der neuen Schaltfläche.

Und hier ist die Produktarchivseite.

Sie können denselben Block „Schaltfläche „In den Warenkorb legen““ auch auf einer Blog-Seite verwenden.

Passen Sie den „In den Warenkorb“-Button mit WooCommerce Blocks (kostenlos) an

Wenn Ihr Theme ein Block-Theme ist, können Sie die Schaltfläche „In den Warenkorb legen“ im Website-Editor unter Darstellung » Editor öffnen und Ihre einzelne Produktvorlage bearbeiten.

Wählen Sie dann den Block „In den Warenkorb legen“ aus.

Hier ist die ehrliche Einschränkung, auf die ich gestoßen bin: Der native Block für einzelne Produkte erlaubt es Ihnen nicht, den Text, die Farbe oder die Typografie der Schaltfläche zu ändern. Seine Hauptoption ist der Stil des Mengenwählers, den Sie zwischen einem einfachen Eingabefeld und einem Plus/Minus-Schrittwechsler wechseln können.

Auf Shop- und Archiv-Grids bietet der Block „Produkt-Schaltfläche“ zwar Einstellungen für Farbe und Typografie, aber die Beschriftung stammt immer noch von WooCommerce, sodass Sie sie dort auch nicht neu eingeben können. Um den Text der Schaltfläche kostenlos zu ändern, verwenden Sie die unten stehende Code-Snippet-Methode.

Für die vollständige Kontrolle über Text, Farben, Symbole und Hover-Stile an einem Ort bietet der obige visuelle Builder die meiste Funktionalität, und Sie können die WooCommerce-Shop-Seite anpassen im selben Editor.

Fügen Sie einen benutzerdefinierten WooCommerce „In den Warenkorb“-Button mit Code hinzu

Bevorzugen Sie Code? Sie können den Schaltflächentext und die Farbe mit kleinen Code-Schnipseln ändern. Fügen Sie diese zur Sicherheit mit einem Plugin wie WPCode hinzu, anstatt Theme-Dateien direkt zu bearbeiten.

Wie ändere ich den Text der Schaltfläche „In den Warenkorb legen“ in WooCommerce?

Sie ändern den Text der Schaltfläche mit einem kleinen PHP-Filter. WooCommerce verwendet einen Filter für einzelne Produktseiten und einen separaten für Shop- und Archivseiten, also decken Sie beide ab, wenn Sie die neue Beschriftung überall haben möchten.

Das erste Snippet ändert die Beschriftung auf einzelnen Produktseiten. Erstellen Sie ein neues PHP-Snippet in WPCode und fügen Sie es ein.

add_filter('woocommerce_product_single_add_to_cart_text', 'SP_customize_add_to_cart_button_woocommerce');
function SP_customize_add_to_cart_button_woocommerce() {
  return __('Buy this item', 'woocommerce');
}

Das zweite Snippet ändert die Beschriftung auf den Shop- und Produktarchivseiten, auf denen Produkte in einem Raster angezeigt werden. Fügen Sie es als eigenes Snippet neben dem ersten hinzu.

add_filter('woocommerce_product_add_to_cart_text', 'SP_customize_archive_add_to_cart_button_woocommerce');
function SP_customize_archive_add_to_cart_button_woocommerce() {
  return __('Buy this item', 'woocommerce');
}

Speichern Sie die Snippets und rufen Sie dann ein einzelnes Produkt auf, um Ihren neuen Schaltflächentext zu sehen.

Wenn der neue Text nicht angezeigt wird, leeren Sie Ihren Seiten-Cache und Objekt-Cache. Der Filter ändert nur neu gerenderte Inhalte, sodass eine gecachte Seite oder eine CDN-Kopie weiterhin das alte „In den Warenkorb“-Label ausliefert, bis Sie diese leeren.

Wie ändere ich die Farbe des „In den Warenkorb“-Buttons in WooCommerce?

Sie ändern die Button-Farbe mit CSS. Diese erste Regel zielt auf den Button auf einzelnen Produktseiten ab.

Gehen Sie zu Design » Anpassen » Zusätzliches CSS und fügen Sie dieses CSS hinzu.

.single-product .product .single_add_to_cart_button.button {
  background-color: #FF0000;
  color: #C0C0C0;
}

Diese zweite Regel formatiert die Buttons in Produktarchiven und im Shop-Raster, sodass die Farbe auch auf der Produktkategorie (Archiv) Seite übereinstimmt.

.woocommerce .product .add_to_cart_button.button {
  background-color: #FF0000;
  color: #C0C0C0;
}

Verknüpfen Sie einen Kauf-Button von überall mit „In den Warenkorb“-URLs

Wenn Sie einen Button wünschen, der ein Produkt von einer Landingpage, Preistabelle oder einem Blogbeitrag in den Warenkorb legt, verwenden Sie eine „In den Warenkorb“-URL. Verlinken Sie zu ?add-to-cart=ID&quantity=N, wobei Sie ID durch die Produkt-ID und N durch die Menge ersetzen.

Zum Beispiel fügt https://ihrshop.com/?add-to-cart=99&quantity=1 beim Klicken einen Artikel von Produkt 99 zum Warenkorb hinzu. Es ist eine saubere Methode, um Leute ohne zusätzlichen Schritt direkt zur Kasse zu leiten.

Weitere Möglichkeiten zur Anpassung von WooCommerce

Das Anpassen der Schaltfläche „In den Warenkorb“ ist nur eine von vielen Möglichkeiten, Ihren Shop zu optimieren. Weitere WooCommerce-Anpassungen finden Sie in den folgenden Anleitungen:

• So passen Sie den WooCommerce-Tab „Zusätzliche Informationen“ an
• So fügen Sie die Schaltfläche „Warenkorb anzeigen“ in WooCommerce hinzu
• So ändern Sie den Titel der Shop-Seite in WooCommerce
• So blenden Sie nicht vorrätige Produkte in WooCommerce aus

FAQs zum benutzerdefinierten WooCommerce „In den Warenkorb“-Button

Wie ändere ich den Text des „In den Warenkorb“-Buttons auf den Shop- und Archivseiten, nicht nur auf einzelnen Produkten?

Einzelne Produktseiten und Shop-/Archivseiten verwenden unterschiedliche Filter. Verwenden Sie woocommerce_product_single_add_to_cart_text für die einzelne Produktseite und woocommerce_product_add_to_cart_text für die Shop- und Archiv-Raster.

Fügen Sie beide Snippets in WPCode hinzu, um das neue Label überall zu erhalten. Wenn Sie lieber keinen Code anfassen möchten, ändern Sie den Text visuell in SeedProd.

Benötige ich ein Plugin, um den WooCommerce „In den Warenkorb“-Button anzupassen, oder kann ich das kostenlos machen?

Sie können es kostenlos mit einem Code-Snippet machen. Die kostenlose Version von WPCode ermöglicht es Ihnen, den Button-Text und die Farbe zu ändern, ohne etwas kaufen zu müssen.

SeedProds visuelles WooCommerce-Design benötigt den Elite-Plan, aber es gibt Ihnen die meiste Kontrolle über Text, Farbe, Icons und Hover-Stile an einem Ort.

Wie passe ich den „In den Warenkorb“-Button mit WooCommerce-Blöcken oder dem Site-Editor an?

Öffnen Sie Design » Editor auf einem Block-Theme, bearbeiten Sie Ihre Einzelproduktvorlage und wählen Sie den „In den Warenkorb“-Block aus. Der native Block ist begrenzt: Auf der Einzelproduktseite ist die Hauptoption der Mengenwähler-Stil, ein einfaches Eingabefeld oder ein Plus/Minus-Schrittregler.

Dies ändert weder den Button-Text, noch die Farbe oder Typografie dort. Verwenden Sie stattdessen ein Code-Snippet oder SeedProds visuellen Builder.

Warum wird mein benutzerdefinierter Text für den „In den Warenkorb“-Button nicht angezeigt?

Die häufigste Ursache ist Caching. Ein Caching-Plugin, Objekt-Cache oder CDN kann eine alte Version der Seite ausliefern, sodass der Filter das Label nur bei neuen Renderings ändert.

Leeren Sie Ihren Seiten-Cache und Objekt-Cache und laden Sie dann neu. Überprüfen Sie auch, ob Sie den richtigen Filter für den Seitentyp hinzugefügt haben, da einzelne und Archivseiten separate Filter verwenden.

Passen Sie Ihren WooCommerce „In den Warenkorb“-Button noch heute an

Diese schlichte graue Schaltfläche ist jetzt ein klarer, markenkonformer Call-to-Action, der Käufern genau sagt, was sie als Nächstes tun sollen. Wählen Sie die Methode, die zu Ihrem Shop passt, sei es die kostenlose WooCommerce Blocks-Option, ein schneller Code-Schnipsel oder SeedProd für ein komplettes visuelles Redesign.

Vielleicht gefällt Ihnen auch dieser Beitrag: So bearbeiten Sie ein Menü in WordPress für benutzerdefinierte Navigation.

Starten Sie noch heute mit SeedProd

Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.