So fügen Sie in WooCommerce einen benutzerdefinierten Add-to-Cart-Button hinzu

Möchten Sie erfahren, wie Sie in WooCommerce eine benutzerdefinierte Schaltfläche zum Hinzufügen zum Warenkorb hinzufügen?

Das Anpassen von Schaltflächen in Ihrem WooCommerce-Shop kann Ihnen helfen, Aufmerksamkeit zu erregen und die Konversionsraten und Verkäufe zu verbessern.

In diesem Artikel zeigen wir Ihnen Schritt für Schritt, wie Sie in WooCommerce eine benutzerdefinierte Schaltfläche zum Hinzufügen zum Einkaufswagen hinzufügen.

Warum sollten Sie Ihren WooCommerce-Add-to-Cart-Button anpassen?

Durch die Bearbeitung Ihrer „Zum Warenkorb hinzufügen“-Schaltfläche können Sie sie an die von Ihnen verkauften WooCommerce-Produkte anpassen. Wenn Sie bei der Standard-Warenkorb-Schaltfläche bleiben, kann dies völlig unabhängig vom Produkttyp sein.

Beispielsweise möchten Sie möglicherweise den Text zum Hinzufügen zum Einkaufswagen ändern und ihn durch ein Symbol oder ein Kontrollkästchen für mehrere Produkte ersetzen. Alternativ können Sie auch die Farbe der Schaltfläche ändern, um sie auf Ihrer Website besser hervorzuheben.

Möglicherweise möchten Sie auch Warenkorb-Schaltflächen an anderer Stelle auf Ihrer WooCommerce-Website anzeigen, z. B. auf Ihrer Checkout-Seite, in Kategorien und auf der Warenkorbseite.

Um einen der oben genannten Schritte auszuführen, benötigen Sie eine Möglichkeit, Ihren Warenkorb-hinzufügen-Button einfach und mit minimalem Aufwand anzupassen.

So fügen Sie in WooCommerce einen benutzerdefinierten Add-to-Cart-Button hinzu

Glücklicherweise teilen wir 2 Methoden zum Erstellen einer benutzerdefinierten WooCommerce-Schaltfläche zum Hinzufügen zum Warenkorb. Die erste Methode verwendet ein einfaches und leistungsstarkes WordPress-Plugin, und die zweite Methode zeigt Ihnen, wie Sie Ihre Einkaufswagen-Schaltflächen manuell ohne ein Plugin anpassen können.

Methode 1: Fügen Sie mit SeedProd eine benutzerdefinierte Add-to-Cart-Schaltfläche hinzu

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-Designs erstellen, Zielseiten mit hoher Konvertierungsrate erstellen und jedes Layout mit Point-and-Click anpassen.

Da SeedProd WooCommerce-Unterstützung enthält, können Sie damit ganze WooCommerce-Websites ohne Entwickler entwerfen und starten. Befolgen Sie die nachstehenden Schritte, um SeedProd zu verwenden, um Ihrer WooCommerce-Website eine benutzerdefinierte Schaltfläche zum Hinzufügen zum Einkaufswagen hinzuzufügen.

Schritt 1. Installieren und aktivieren Sie SeedProd

Gehen Sie zunächst zur SeedProd-Preisseite und wählen Sie Ihren SeedProd-Plan aus. Um auf die WooCommerce-Funktionen zugreifen zu können, benötigen Sie den SeedProd Elite- Plan.

Melden Sie sich als Nächstes bei Ihrem SeedProd-Konto an, klicken Sie auf die Registerkarte Downloads und laden Sie die ZIP-Datei des Plugins herunter. Auf derselben Seite können Sie auch den Lizenzschlüssel kopieren.

Jetzt können Sie das Plugin auf Ihre WordPress-Website hochladen. Wenn Sie dabei Hilfe benötigen, folgen Sie dieser Anleitung zur Installation und Aktivierung eines WordPress-Plugins.

Gehen Sie nach der Installation von SeedProd zur Seite SeedProd » Einstellungen und fügen Sie den zuvor gespeicherten Lizenzschlüssel ein.

Stellen Sie sicher, dass Sie auf die Schaltfläche Schlüssel überprüfen klicken, bevor Sie mit dem nächsten Schritt fortfahren.

Hinweis: Mit SeedProd können Sie WooCommerce auf zwei Arten benutzerdefinierte Schaltflächen zum Hinzufügen zum Warenkorb hinzufügen:

• Nutzung einer Landingpage
• Erstellen eines benutzerdefinierten WooCommerce-Designs

Für dieses Tutorial erstellen wir ein benutzerdefiniertes WooCommerce-Design, da es alle Ihre WooCommerce-Shopseiten automatisch erstellt.

Schritt 2. Wählen Sie ein Website-Kit

Navigieren Sie für den nächsten Schritt zur Seite SeedProd » Theme Builder . Hier können Sie die verschiedenen Teile Ihres WooCommerce-Designs erstellen und das Design jeder Vorlage anpassen.

Dazu können Sie entweder jeden Teil von Grund auf neu erstellen oder ein vorgefertigtes Website-Kit verwenden. Wir entscheiden uns für die zweite Option, weil sie einfacher und schneller ist.

Um ein Website-Kit auszuwählen, klicken Sie auf die Schaltfläche Themen .

Auf dem nächsten Bildschirm sehen Sie die verfügbaren Website-Kits. WooCommerce-kompatible Kits haben „WooCommerce“ neben ihren Titeln.

Du kannst dann mit der Maus über ein Design fahren, das dir gefällt, und auf das Häkchen-Symbol klicken, um es in deinen Theme Builder zu importieren.

Für diese Anleitung verwenden wir das Pottery Shop WooCommerce Website Kit.

Nachdem Sie Ihr Website-Kit importiert haben, sehen Sie die einzelnen Teile Ihres Designs in einer Liste wie dieser:

SeedProd erstellt automatisch Inhaltsseiten, wie z. B. Ihre About-, Warenkorb-, Checkout- und Kontaktseiten. Sie können diese Seiten anzeigen, indem Sie in Ihrem WordPress-Dashboard zu Seiten » Alle Seiten gehen und sie mit dem Drag-and-Drop-Seitenersteller von SeedProd anpassen.

Beginnen wir mit dem Anpassungsprozess, indem wir Ihre WooCommerce-Schaltfläche zum Hinzufügen zum Warenkorb anpassen.

Schritt 3. Passen Sie Ihren „Zum Warenkorb hinzufügen“-Button an

Im Folgenden zeigen wir Ihnen, wie Sie in WooCommerce auf Ihren Shop-, Produkt-, Produktarchiv- und Blog-Seiten eine benutzerdefinierte Schaltfläche zum Hinzufügen zum Warenkorb hinzufügen.

Hinzufügen einer benutzerdefinierten Shop-Seiten-Add-to-Cart-Schaltfläche

Zunächst beginnen wir mit der Bearbeitung Ihrer WooCommerce-Shopseite. Suchen Sie dazu den Vorlagenteil der Shop-Seite und klicken Sie auf den Link Design bearbeiten .

Ihre WooCommerce-Shop-Seite wird im Drag-and-Drop-Seitenersteller von SeedProd geöffnet, wo Sie Ihr Design ohne Code anpassen können.

Sie können auf die Live-Vorschau klicken, um jedes Seitenelement zu bearbeiten und seine Einstellungen anzupassen. Ebenso können Sie Blöcke aus dem linken Bereich ziehen und auf Ihrer Seite ablegen, um mehr Inhalt hinzuzufügen.

Standardmäßig verwendet die Shop-Seitenvorlage den Produktrasterblock . Wenn Sie darauf klicken, werden Ihnen Einstellungen angezeigt, mit denen Sie steuern können, wie Ihre Produktlisten aussehen.

Sie können beispielsweise die Anzahl der Spalten ändern, Produkte nach Produkt-ID, Abfrage oder Typ filtern und die Reihenfolge ändern, in der sie angezeigt werden.

Sie können auch auf die Registerkarte „ Erweitert “ klicken, um weitere Anpassungsoptionen anzuzeigen, darunter Schriftstile, Farben, Rahmen und mehr.

Im Abschnitt Schaltflächen können Sie Ihre WooCommerce-Schaltfläche zum Hinzufügen zum Warenkorb mit wenigen Klicks anpassen. Beispielsweise können Sie unter dem Dropdown-Menü Schaltflächenstil Folgendes auswählen:

• Eben
• 2D
• Jahrgang
• Geist
• Verknüpfung

Darüber hinaus können Sie die Farbe, Typografie, Größe und den Rahmenradius der Schaltfläche ändern.

Experimentieren Sie mit den Anpassungsoptionen, um einen Look zu finden, der Ihren Geschäftsanforderungen entspricht. Klicken Sie dann auf die Schaltfläche Speichern in der oberen rechten Ecke, um Ihre Änderungen zu speichern, und klicken Sie auf das X-Symbol, um zum Theme Builder zurückzukehren.

Ändern der Add-to-Cart-Schaltfläche auf der Produktseite

Sehen wir uns nun an, wie Sie die Schaltfläche „Zum Warenkorb hinzufügen“ auf einzelnen Produktseiten anpassen können. Sie müssen die Produktseitenvorlage finden und auf den Link Design bearbeiten klicken, um sie zu öffnen.

Dieses Mal sehen Sie die einzelnen Produktdetails im visuellen Editor von SeedProd.

Standardmäßig wird Folgendes angezeigt:

• Produktbild
• Produktname
• Produktpreis
• kurze Beschreibung
• Schaltfläche "Zum Warenkorb hinzufügen".
• Registerkarten für Produktdaten

Sie können jedes Element anpassen, indem Sie darauf klicken, um seine Einstellungen anzuzeigen. Wenn Sie beispielsweise auf die Schaltfläche „Zum Warenkorb hinzufügen“ klicken, können Sie den Schaltflächentext ansprechender gestalten.

Sie können auch die Schaltflächenausrichtung ändern und ein Symbol aus der Symbolbibliothek von Font Awesome hinzufügen.

Auf der Registerkarte Erweitert können Sie wie zuvor die Farben, Typografie, Schatten und Abstände Ihrer Schaltflächen ändern.

Bearbeiten der Warenkorb-Schaltfläche Ihres Produktarchivs

Das Ändern Ihrer „Zum Warenkorb hinzufügen“-Schaltfläche in Ihrem Produktarchiv folgt einem ähnlichen Prozess wie auf Ihrer Shop-Seite. Suchen Sie einfach den Vorlagenteil Produktarchiv und klicken Sie auf den Link Design bearbeiten , um ihn im visuellen Editor zu öffnen.

Der Block, den SeedProd auf dieser Seite verwendet, ist der Block Archive Products . Benutzer sehen diese Seite, wenn sie auf die Überschrift einer Produktkategorie klicken oder die Suchleiste Ihres Shops verwenden.

Dieser Block zeigt keine Vorschau im visuellen Live-Editor an; Sie können jedoch weiterhin anpassen, was der Block im Frontend anzeigt, indem Sie seine Einstellungen öffnen.

Sie können beispielsweise die Anzahl der Spalten ändern, Elemente nach Anzahl anzeigen und nach Filter sortieren. Darüber hinaus können Sie das Filtern nach Abfrage aktivieren, z. B.:

• Abfrage nach Attribut
• Wählen Sie Nach Tags
• Wählen Sie Nach Kategorie
• Wählen Sie Nach Produkt-SKU aus
• Wählen Sie Nach Gruppe
• Wählen Sie Nach Sichtbarkeit

Dann können Sie auf der Registerkarte „ Erweitert “ die Schaltfläche „Zum Warenkorb hinzufügen“ anpassen, indem Sie Farbe, Schriftart, Abstand, Größe und mehr ändern.

Hinzufügen einer benutzerdefinierten „In den Einkaufswagen“-Schaltfläche auf der Blog-Seite

Ihre Blog-Seite ist ein weiterer Ort, an dem Sie eine Schaltfläche zum Hinzufügen zum Einkaufswagen anzeigen können. Auf diese Weise können Sie nach Blogbeiträgen Produkte empfehlen, um den Umsatz anzukurbeln.

Um dies mit SeedProd zu tun, suchen Sie die Blog-Seitenvorlage und klicken Sie auf den Link Design bearbeiten .

Standardmäßig zeigt Ihre Blog-Seite eine Liste Ihrer neuesten Blog-Posts an, aber Sie können sie so anpassen, dass sie beliebige andere Inhalte enthält.

Fügen wir dieser Seite einen Abschnitt hinzu, in dem ein neues Produkt vorgestellt wird. Ziehen Sie zuerst einen Spaltenblock auf die Seite und wählen Sie ein Spaltenlayout aus.

Wählen Sie als Nächstes den Bildblock und fügen Sie ein Produktbild hinzu.

In der zweiten Spalte können Sie die Überschriften- und Absatzblöcke für Ihren Produkttitel und Ihre Produktbeschreibung verwenden. Ziehen Sie dann über die Add-to-Cart- Schaltfläche , damit Benutzer das Produkt zu ihrem Einkaufswagen hinzufügen können.

Klicken Sie nun auf den Block, um seine Einstellungen zu öffnen, und fügen Sie Ihren benutzerdefinierten Text für die Schaltfläche „Zum Warenkorb hinzufügen“ hinzu.

Sie benötigen auch die Produkt-ID für dieses spezifische Produkt. Sie finden es, indem Sie in Ihrem WordPress-Dashboard zu Produkte » Alle Produkte gehen und den ID-Wert kopieren.

Danach können Sie die ID in das Feld Produkt-ID auf Ihrer Schaltfläche zum Hinzufügen zum Warenkorb einfügen. Dadurch wird sichergestellt, dass ein bestimmtes Produkt Ihrem Warenkorb hinzugefügt wird, nachdem Sie auf die URL zum Hinzufügen zum Warenkorb geklickt haben.

Denken Sie daran, auf die Schaltfläche Speichern zu klicken, um Ihre Änderungen zu speichern.

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 drehen Sie in der oberen rechten Ecke den Schalter Enable SeedProd Theme auf die Position „On“.

Werfen wir einen Blick auf einige der Seiten, die wir angepasst haben:

Shop-Seite

Produktseite

Archivseite

Blog-Seite

Methode 2: Fügen Sie einen benutzerdefinierten Add-to-Cart-Button mit Code hinzu

Die nächste Methode, die wir Ihnen zeigen, besteht darin, den Code auf Ihrer WordPress-Website zu ändern. Wir empfehlen dies normalerweise nicht, wenn Sie ein Anfänger sind, da dies Ihre Website beschädigen kann.

Wir verstehen jedoch, dass einige Leute ihr vorhandenes Website-Design nicht vollständig überschreiben möchten.

Bevor Sie beginnen, empfehlen wir Ihnen, ein untergeordnetes Design zu erstellen, um sicherzustellen, dass Sie Ihre Änderungen nicht verlieren, wenn Sie Ihr WordPress-Design aktualisieren. Sie sollten auch Ihre WordPress-Site sichern, um sie sicher wiederherzustellen, falls etwas schief geht.

Da wir für diese Methode Code-Snippets handhaben werden, ist es eine gute Idee, ein Code-Snippets-Plug-in wie WPCode zu installieren. Das bedeutet, dass Sie Ihre Designdateien nicht direkt bearbeiten müssen.

Wenn Sie alles bereit haben, können Sie in WooCommerce manuell benutzerdefinierte Schaltflächen zum Hinzufügen zum Warenkorb hinzufügen.

Ändern Sie den Text der „In den Einkaufswagen“-Schaltfläche auf den Produktseiten

Zuerst sehen wir uns an, wie man den Text der „Zum Warenkorb hinzufügen“-Schaltfläche in WooCommerce ändert. Beispielsweise möchten Sie vielleicht den Text der Schaltfläche in „Diesen Artikel kaufen“ ändern.

Erstellen Sie dazu ein benutzerdefiniertes Code-Snippet in WPCode und fügen Sie den folgenden PHP-Code 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');
}

Speichern Sie Ihre Änderungen. Wenn Sie dann ein einzelnes Produkt anzeigen, sehen Sie Ihren neuen Text für die Schaltfläche „Zum Warenkorb hinzufügen“.

Ändern Sie die Farbe der Schaltfläche „Zum Warenkorb hinzufügen“.

Wenn Sie die Farbe Ihrer „Zum Warenkorb hinzufügen“-Schaltfläche ändern möchten, müssen Sie benutzerdefiniertes CSS hinzufügen. Sie können dies tun, indem Sie in Ihrem WordPress-Dashboard zu Aussehen » Anpassen » Zusätzliches CSS gehen.

Fügen Sie nun folgenden CSS-Code ein:

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

Sie können dasselbe für Ihre Produktarchivseiten tun, indem Sie das folgende CSS-Code-Snippet einfügen:

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

Hier hast du es!

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie in WooCommerce eine benutzerdefinierte Schaltfläche zum Hinzufügen zum Warenkorb hinzufügen.

Dieser Beitrag könnte Ihnen auch gefallen: So bearbeiten Sie ein Menü in WordPress für eine benutzerdefinierte Navigation.

Sind Sie bereit, Ihre WooCommerce-Add-to-Cart-Buttons anzupassen?

Danke fürs Lesen. Bitte folgen Sie uns auf YouTube, Twitter und Facebook, um weitere hilfreiche Inhalte zum Wachstum Ihres Unternehmens zu erhalten.