Wenn Sie einen WooCommerce-Shop betreiben, kann die Standardschaltfläche "In den Warenkorb" schlicht und leicht zu übersehen sein. Wenn Sie sie anpassen, können Sie den Text gegen etwas Überzeugendes wie "Jetzt kaufen" austauschen, die Farbe ändern, um sie an Ihre Marke anzupassen, oder sogar ein Symbol hinzufügen, um die Aufmerksamkeit zu erhöhen.
Wenn Sie Ihre WooCommerce-Warenkorbschaltfläche anpassen, wird sie relevanter für Ihre Produkte und Ihre Marke, was zu mehr Klicks und Verkäufen führt.
In dieser Anleitung zeige ich Ihnen, wie Sie die Schaltfläche "In den Warenkorb" in WooCommerce auf einfache Weise anpassen können, damit sie zu Ihrem Shop passt und die Klickrate erhöht.
Schritte zum Anpassen der WooCommerce-Schaltfläche "In den Warenkorb":
Anpassen der WooCommerce Schaltfläche "In den Warenkorb" mit SeedProd
Für die erste Methode werden wir SeedProd verwenden, den besten Website-Builder für WordPress.
Dieses leistungsstarke Plugin enthält einen Drag-and-Drop-Seiten-Builder, mit dem Sie jeden Teil Ihrer Website ohne Code anpassen können. Sie können benutzerdefinierte WordPress-Themes erstellen, hochkonvertierende Landing Pages erstellen und jedes Layout mit Point-and-Click anpassen.
Da SeedProd WooCommerce unterstützt, können Sie damit ganze WooCommerce-Websites ohne einen Entwickler entwerfen und starten. Führen Sie die folgenden Schritte aus, um mit SeedProd eine benutzerdefinierte Schaltfläche "In den Warenkorb" zu Ihrer WooCommerce-Website hinzuzufügen.
Schritt 1. Installieren und Aktivieren von SeedProd
Gehen Sie auf die Preisseite von SeedProd und wählen Sie den Elite-Plan, um die WooCommerce-Funktionen freizuschalten. Installieren und aktivieren Sie dann das Plugin.
Gehen Sie dann 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 dann 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 mit der Bezeichnung "WooCommerce", 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. Anpassen der Schaltfläche "In den Warenkorb
Lassen Sie uns nun die Schaltfläche "In den Warenkorb" dort bearbeiten, wo sie am wichtigsten ist: auf Ihren Shop- und Produktseiten.
Anpassen der Schaltfläche "In den Warenkorb" auf der Shop-Seite
Öffnen Sie in SeedProd " Theme Builder Ihre Shop-Seite und klicken Sie auf Design bearbeiten.
Wählen Sie den Block Produkte Raster und öffnen Sie die Einstellungen für die Schaltflächen.
- Stil: Wählen Sie Flach, 2D, Vintage, Ghost oder Link.
- Text: Ändern Sie die Beschriftung in etwas eindeutigeres wie "Jetzt kaufen".
- Gestaltung: Passen Sie Farbe, Größe, Randradius und Hover-Effekte unter Erweitert an.
Klicken Sie auf Speichern, wenn Sie mit der Gestaltung der Schaltfläche zufrieden sind.
Anpassen der Schaltfläche "In den Warenkorb" auf der Produktseite
Öffnen Sie dann die Vorlage für die Produktseite und klicken Sie auf Design bearbeiten. Wählen Sie die Schaltfläche "In den Warenkorb" im Bereich der Produktdetails aus, um ihre Einstellungen zu bearbeiten.
- Text und Ausrichtung: Aktualisieren Sie den CTA-Text und die Position.
- Symbol: Fügen Sie mit Font Awesome ein Einkaufswagen- oder Kontrollsymbol vor/nach dem Text ein.
- Erweitert: Optimieren Sie Farben, Typografie, Abstände und Hover-Stile.
Bonus-Tipp: Hinzufügen einer Schaltfläche "In den Warenkorb" zu Blogbeiträgen
Wenn Sie Produkte in Ihrem Blog-Inhalt bewerben möchten, öffnen Sie die Vorlage für die Blog-Seite, fügen Sie einen zweispaltigen Abschnitt mit einem Bild und Produktdetails hinzu und ziehen Sie dann den Block "In den Warenkorb" hinein. Geben Sie die Produkt-ID ein, damit die Schaltfläche direkt auf den Artikel verweist.
Schritt 4. Speichern und veröffentlichen Sie Ihre Änderungen
Wenn Sie mit dem Aussehen Ihrer WooCommerce-Seiten zufrieden sind, können Sie Ihren Shop in Betrieb nehmen. Gehen Sie dazu zurück zum Theme Builder, und schalten Sie in der oberen rechten Ecke den Schalter "SeedProd-Theme aktivieren " auf "Ein".
Schauen wir uns einige der Seiten an, die wir angepasst haben:
Shop Seite
Produkt Seite
Archiv Seite
Blog Seite
Hinzufügen einer benutzerdefinierten WooCommerce-Schaltfläche "In den Warenkorb" mit Code
Sie bevorzugen Code? Sie können den Text und die Farbe der Schaltflächen mit kleinen Codefragmenten ändern. Fügen Sie diese zur Sicherheit mit einem Plugin wie WPCode hinzu, anstatt die Themendateien direkt zu bearbeiten.
Wie man den Text der Schaltfläche "In den Warenkorb" in WooCommerce ändert
Erstellen Sie ein neues PHP-Snippet in WPCode und fügen Sie diesen Code ein, um "Add to cart" 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 das Snippet und zeigen Sie dann ein einzelnes Produkt an, um Ihren neuen Schaltflächentext zu sehen.
Wie man die Farbe der Schaltfläche "In den Warenkorb" in WooCommerce ändert
Gehen Sie zu Erscheinungsbild " Anpassen " Zusätzliches CSS und fügen Sie dieses CSS hinzu, um die Farbe der Schaltflächen auf einzelnen Produktseiten zu ändern.
.single-product .product .single_add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}Verwenden Sie diesen Selektor, um Schaltflächen in Produktarchiven oder dem Shop-Gitter zu gestalten:
.woocommerce .product .add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}
Weitere Möglichkeiten zur Anpassung von WooCommerce
Die Anpassung der Schaltfläche "In den Warenkorb" ist nur eine der vielen Möglichkeiten, Ihren Shop zu optimieren. Weitere WooCommerce-Anpassungen finden Sie in den folgenden Anleitungen:
- So passen Sie die Registerkarte "Zusätzliche Informationen" von WooCommerce an
- Wie man den View Cart Button in WooCommerce hinzufügt
- Wie man den Titel der Shop-Seite in WooCommerce ändert
- Wie man nicht vorrätige Produkte in WooCommerce ausblendet
WooCommerce In den Warenkorb Schaltfläche FAQs
display: none;. Mit einigen Plugins können Sie diese Funktion auch für bestimmte Produkte deaktivieren.border-radius für abgerundete Ecken.Ich hoffe, dieser Artikel hat Ihnen geholfen zu lernen, wie man eine benutzerdefinierte Schaltfläche "In den Warenkorb" in WooCommerce hinzufügen.
Dieser Beitrag könnte Ihnen auch gefallen: Wie man ein Menü in WordPress für eine benutzerdefinierte Navigation bearbeitet.
Sind Sie bereit, Ihre WooCommerce-Schaltflächen für den Warenkorb anzupassen?
Vielen Dank fürs Lesen! Wir würden uns freuen, Ihre Meinung zu hören. Bitte beteiligen Sie sich an der Konversation auf YouTube, X und Facebook, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.
