Wenn Sie einen WooCommerce-Shop betreiben, kann der Standard-Button „In den Warenkorb“ schlicht und leicht zu übersehen sein. Durch Anpassung können Sie den Text durch etwas Überzeugenderes wie „Jetzt kaufen“ ersetzen, die Farbe an Ihre Marke anpassen oder sogar ein Symbol hinzufügen, um Aufmerksamkeit zu erregen.
Die Anpassung Ihres WooCommerce „In den Warenkorb“-Buttons macht ihn relevanter für Ihre Produkte und Marke, was Klicks und Verkäufe steigert.
In diesem Leitfaden führe ich Sie durch einfache Möglichkeiten, den „In den Warenkorb“-Button in WooCommerce anzupassen, damit er zu Ihrem Shop passt und Klicks fördert.
Schritte zum Anpassen des WooCommerce „In den Warenkorb“-Buttons:
WooCommerce „In den Warenkorb“-Button mit SeedProd anpassen
Für die erste Methode verwenden wir SeedProd, den besten Website-Builder für WordPress.
Dieses leistungsstarke Plugin enthält einen Drag-and-Drop-Seitenersteller, mit dem Sie jeden Teil Ihrer Website ohne Code anpassen können. Sie können benutzerdefinierte WordPress-Themes erstellen, hochkonvertierende Landingpages erstellen und jedes Layout mit Point-and-Click anpassen.
Da SeedProd WooCommerce-Unterstützung bietet, können Sie es verwenden, um ganze WooCommerce-Websites ohne Entwickler zu entwerfen und zu starten. Befolgen Sie die nachstehenden Schritte, um mit SeedProd einen benutzerdefinierten „In den Warenkorb“-Button zu Ihrem WooCommerce-Shop hinzuzufügen.
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.
Bonus-Tipp: Fügen Sie eine Schaltfläche „In den Warenkorb“ zu Blogbeiträgen hinzu
Wenn Sie Produkte in Ihren Blog-Inhalten bewerben möchten, öffnen Sie die Vorlage Blog-Seite, fügen Sie einen Abschnitt mit zwei Spalten mit einem Bild und Produktdetails hinzu und ziehen Sie dann den Block Schaltfläche „In den Warenkorb“ hinein. Geben Sie die Produkt-ID ein, damit die Schaltfläche direkt zum Artikel verlinkt.
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 wir angepasst haben:
Shop-Seite
Produktseite
Archivseite
Blog-Seite
Fügen Sie eine benutzerdefinierte WooCommerce-Schaltfläche „In den Warenkorb“ 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.
So ändern Sie den Text der Schaltfläche „In den Warenkorb“ in WooCommerce
Erstellen Sie einen neuen PHP-Snippet in WPCode und fügen Sie diesen Code ein, um „In den Warenkorb“ durch Ihren eigenen Text zu ersetzen.
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');
}
Speichern Sie den Snippet und rufen Sie dann ein einzelnes Produkt auf, um Ihren neuen Schaltflächentext zu sehen.
So ändern Sie die Farbe der Schaltfläche „In den Warenkorb“ in WooCommerce
Gehen Sie zu Darstellung » Anpassen » Zusätzliches CSS und fügen Sie dieses CSS hinzu, um die Schaltfläche auf einzelnen Produktseiten zu ändern.
.single-product .product .single_add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}Um Schaltflächen in Produktarchiven oder im Shop-Raster zu gestalten, verwenden Sie diesen Selektor:
.woocommerce .product .add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}
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
WooCommerce Schaltfläche „In den Warenkorb“ FAQs
display: none;. Some plugins also let you disable it for specific products.border-radius for rounded corners.Ich hoffe, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie eine benutzerdefinierte Schaltfläche „In den Warenkorb“ in WooCommerce hinzufügen.
Vielleicht gefällt Ihnen auch dieser Beitrag: So bearbeiten Sie ein Menü in WordPress für benutzerdefinierte Navigation.
Bereit, Ihre WooCommerce-Schaltflächen „In den Warenkorb“ anzupassen?
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.
