Hinweis: Der folgende Artikel hilft Ihnen weiter: So passen Sie Ihre WooCommerce-Schaltfläche „Zum Warenkorb hinzufügen“ an
Möchten Sie Ihre WooCommerce-Schaltfläche „Zum Warenkorb hinzufügen“ anpassen?
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 Warenkorb hinzufügen.
Warum sollten Sie Ihren WooCommerce-Button „Zum Warenkorb hinzufügen“ anpassen?
Wenn Sie die Schaltfläche „Zum Warenkorb hinzufügen“ bearbeiten, können Sie sie an die von Ihnen verkauften WooCommerce-Produkte anpassen. Wenn Sie bei der Standard-Warenkorbschaltfläche bleiben, hat diese möglicherweise überhaupt keinen Bezug zum Produkttyp.
Beispielsweise möchten Sie möglicherweise den Text zum Hinzufügen zum Warenkorb ändern und ihn durch ein Symbol oder ein Kontrollkästchen für mehrere Produkte ersetzen. Alternativ möchten Sie möglicherweise die Farbe der Schaltfläche ändern, um sie auf Ihrer Website stärker hervorzuheben.
Möglicherweise möchten Sie Warenkorb-Schaltflächen auch an anderer Stelle auf Ihrer WooCommerce-Website anzeigen, z. B. auf Ihrer Checkout-Seite, in den Kategorien und auf der Warenkorbseite.
Um einen der oben genannten Schritte auszuführen, benötigen Sie eine Möglichkeit, die Schaltfläche „Zum Warenkorb hinzufügen“ einfach und mit minimalem Aufwand anzupassen.
So fügen Sie in WooCommerce eine benutzerdefinierte Schaltfläche „Zum Warenkorb hinzufügen“ hinzu
Glücklicherweise teilen wir zwei 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 Warenkorb-Schaltflächen manuell ohne Plugin anpassen können.
Methode 1: Passen Sie Ihre WooCommerce-Schaltfläche „Zum Warenkorb hinzufügen“ mit SeedProd an
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, Landingpages mit hoher Conversion-Rate erstellen und jedes Layout per Mausklick anpassen.
Da SeedProd WooCommerce-Unterstützung bietet, können Sie damit ganze WooCommerce-Websites ohne Entwickler entwerfen und starten. Führen Sie die folgenden Schritte aus, um mit SeedProd Ihrer WooCommerce-Site eine benutzerdefinierte Schaltfläche zum Hinzufügen zum Warenkorb hinzuzufügen.
Schritt 1. Installieren und aktivieren Sie SeedProd
Gehen Sie zunächst zur Preisseite von SeedProd und wählen Sie Ihren SeedProd-Plan aus. Um auf die WooCommerce-Funktionen zugreifen zu können, benötigen Sie die SeedProd Elite planen.
Melden Sie sich als Nächstes bei Ihrem SeedProd-Konto an und klicken Sie auf Downloads Klicken Sie auf die Registerkarte und laden Sie die ZIP-Datei des Plugins herunter. Sie können den Lizenzschlüssel auch auf derselben Seite kopieren.
Jetzt können Sie das Plugin auf Ihre WordPress-Website hochladen. Wenn Sie dabei Hilfe benötigen, folgen Sie dieser Anleitung auf Installieren und Aktivieren eines WordPress-Plugins.
Gehen Sie nach der Installation von SeedProd zu SeedProd » Einstellungen Seite und fügen Sie den zuvor gespeicherten Lizenzschlüssel ein.
Stellen Sie sicher, dass Sie auf klicken Schlüssel überprüfen Klicken Sie auf die Schaltfläche, bevor Sie mit dem nächsten Schritt fortfahren.
Note: Mit SeedProd können Sie WooCommerce auf zwei Arten benutzerdefinierte Schaltflächen zum Hinzufügen zum Warenkorb hinzufügen:
Für dieses Tutorial erstellen wir ein benutzerdefiniertes WooCommerce-Theme, da alle Seiten Ihres WooCommerce-Shops automatisch erstellt werden.
Schritt 2. Wählen Sie ein Website-Kit
Navigieren Sie für den nächsten Schritt zu SeedProd » Theme Builder Buchseite. Hier können Sie die verschiedenen Teile Ihres WooCommerce-Themes erstellen und das Design jeder Vorlage anpassen.
Sie können dies tun, indem Sie entweder jedes Teil von Grund auf neu erstellen oder ein vorgefertigtes Website-Kit verwenden. Wir entscheiden uns für die zweite Option, da diese einfacher und schneller ist.
Um ein Website-Kit auszuwählen, klicken Sie auf Themen Taste.
Auf dem nächsten Bildschirm sehen Sie die verfügbaren Website-Kits. WooCommerce-kompatible Kits werden neben ihren Titeln „WooCommerce“ tragen.
Sie können dann mit der Maus über ein Design fahren, das Ihnen gefällt, und auf das Häkchensymbol klicken, um es in Ihren Theme Builder zu importieren.
Für diesen Leitfaden verwenden wir die Töpferei WooCommerce Website-Kit.
Nach dem Import Ihres Website-Kits sehen Sie die einzelnen Teile Ihres Themes in einer Liste wie dieser:
SeedProd erstellt automatisch Inhaltsseiten, z. B. Ihre Info-, Warenkorb-, Checkout- und Kontaktseiten. Sie können diese Seiten anzeigen, indem Sie auf gehen Seiten ” Alle Seiten aus Ihrem WordPress-Dashboard und passen Sie sie mit dem Drag-and-Drop-Seitenersteller von SeedProd an.
Beginnen wir mit dem Anpassungsprozess, indem wir Ihre WooCommerce-Schaltfläche „Zum Warenkorb hinzufügen“ anpassen.
Schritt 3. Passen Sie Ihre Schaltfläche „Zum Warenkorb hinzufügen“ 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-Seite-Schaltfläche „Zum Warenkorb hinzufügen“.
Zunächst beginnen wir mit der Bearbeitung Ihrer WooCommerce-Shop-Seite. Finden Sie dazu die Shop-Seite Vorlagenteil und klicken Sie auf Design bearbeiten Verknüpfung.
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 die Produkte Gitter Block. 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 klicken Fortschrittlich Klicken Sie auf die Registerkarte, um weitere Anpassungsoptionen anzuzeigen, einschließlich Schriftarten, Farben, Rahmen und mehr.
Im Abschnitt „Schaltflächen“ können Sie Ihre WooCommerce-Schaltfläche „Zum Warenkorb hinzufügen“ mit wenigen Klicks anpassen. Im Dropdown-Menü „Schaltflächenstil“ können Sie beispielsweise Folgendes auswählen:
- Wohnung
- 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 ein Erscheinungsbild zu finden, das Ihren Geschäftsanforderungen entspricht. Dann drücken Sie die Speichern Klicken Sie auf die Schaltfläche 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 Schaltfläche „Zum Warenkorb hinzufügen“ auf der Produktseite
Sehen wir uns nun die Anpassung der Schaltfläche „In den Warenkorb“ auf einzelnen Produktseiten an. Sie müssen das finden Produktseite Vorlage und klicken Sie auf Design bearbeiten Link zum Ö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 „In den Warenkorb hinzufügen“.
- Produktdaten-Registerkarten
Sie können jedes Element anpassen, indem Sie darauf klicken, um seine Einstellungen anzuzeigen. Wenn Sie beispielsweise auf die Schaltfläche „In den Warenkorb“ klicken, können Sie den Text der Schaltfläche in einen ansprechenderen Text ändern.
Sie können auch die Ausrichtung der Schaltflächen ändern und ein Symbol aus der Font Awesome-Symbolbibliothek hinzufügen.
Der Fortschrittlich Auf der Registerkarte können Sie die Farben, Typografie, Schatten und Abstände Ihrer Schaltflächen wie zuvor ändern.
Bearbeiten der Warenkorb-Schaltfläche für Ihr Produktarchiv
Das Ändern der Schaltfläche „In den Warenkorb“ in Ihrem Produktarchiv erfolgt nach einem ähnlichen Vorgang wie auf Ihrer Shop-Seite. Finden Sie einfach die Produktarchive Vorlagenteil und klicken Sie auf Design bearbeiten Klicken Sie auf den Link, um ihn im visuellen Editor zu öffnen.
Der Block, den SeedProd auf dieser Seite verwendet, ist der Archivprodukte Block. 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 die Filterung nach Abfrage aktivieren, z. B.:
- Abfrage nach Attribut
- Wählen Sie „Nach Tags“ aus
- Wählen Sie „Nach Kategorie“ aus
- Wählen Sie „Nach Produkt-SKU“ aus
- Wählen Sie „Nach Gruppe“ aus
- Wählen Sie „Nach Sichtbarkeit“.
Dann im Fortschrittlich Auf der Registerkarte „Zum Warenkorb hinzufügen“ können Sie die Schaltfläche „Zum Warenkorb hinzufügen“ anpassen, indem Sie Farben, Schriftart, Abstand, Größe und mehr ändern.
Hinzufügen einer benutzerdefinierten Schaltfläche „In den Warenkorb“ auf der Blog-Seite
Ihre Blog-Seite ist ein weiterer Ort, an dem Sie eine Schaltfläche zum Hinzufügen zum Warenkorb anzeigen können. Auf diese Weise können Sie nach Blogbeiträgen Produkte weiterempfehlen, um den Umsatz anzukurbeln.
Um dies mit SeedProd zu tun, suchen Sie nach Blog-Seite Vorlage und klicken Sie auf Design bearbeiten Verknüpfung.
Standardmäßig wird auf Ihrer Blog-Seite eine Liste Ihrer neuesten Blog-Beiträge angezeigt. Sie können sie jedoch anpassen, um beliebige andere Inhalte aufzunehmen, die Ihnen gefallen.
Fügen wir dieser Seite einen Abschnitt hinzu, in dem ein neues Produkt vorgestellt wird. Ziehen Sie zunächst einen Spaltenblock auf die Seite und wählen Sie ein Spaltenlayout.
Wählen Sie als Nächstes die aus Bild blockieren und ein Produktbild hinzufügen.
In der zweiten Spalte können Sie die verwenden Überschrift Und Absatz Blöcke für Ihren Produkttitel und Ihre Beschreibung. Ziehen Sie dann über das in den Warenkorb legen Taste damit Benutzer das Produkt in ihren Warenkorb legen können.
Klicken Sie nun auf den Block, um seine Einstellungen zu öffnen und Ihren benutzerdefinierten Text für die Schaltfläche „Zum Warenkorb hinzufügen“ hinzuzufügen.
Sie benötigen außerdem die Produkt-ID für das jeweilige Produkt. Sie können es finden, indem Sie auf gehen Produkte » Alle Produkte aus Ihrem WordPress-Dashboard und Kopieren des ID-Werts.
Anschließend können Sie die ID in das Feld „Produkt-ID“ auf der Schaltfläche „Zum Warenkorb hinzufügen“ einfügen. Dadurch wird sichergestellt, dass ein bestimmtes Produkt Ihrem Warenkorb hinzugefügt wird, nachdem Sie auf die URL „Zum Warenkorb hinzufügen“ geklickt haben.
Denken Sie daran, auf zu klicken Speichern Klicken Sie auf die Schaltfläche, 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 zum Leben erwecken. Gehen Sie dazu zurück zum Theme Builder und drehen Sie in der oberen rechten Ecke das Aktivieren Sie das SeedProd-Theme auf die Position „Ein“ schalten.
Werfen wir einen Blick auf einige der Seiten, die wir angepasst haben:
Shop-Seite
Produktseite
Archivseite
Blog-Seite
Methode 2: Fügen Sie eine benutzerdefinierte WooCommerce-Schaltfläche „Zum Warenkorb hinzufügen“ 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 Anfänger sind, da dies Ihre Website beschädigen kann.
Allerdings verstehen wir, dass manche Leute ihr bestehendes Website-Design nicht komplett überschreiben möchten.
Bevor Sie beginnen, schlagen wir vor Erstellen eines untergeordneten Themas um sicherzustellen, dass Ihre Änderungen nicht verloren gehen, wenn Sie Ihr WordPress-Theme aktualisieren. Sie sollten auch Ihre WordPress-Site sichern, um sie sicher wiederherzustellen, falls etwas schief geht.
Da wir für diese Methode Code-Snippets verarbeiten, ist es eine gute Idee, ein Code-Snippets-Plugin zu installieren WPCode. 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 Schaltfläche „Zum Warenkorb hinzufügen“ auf Produktseiten
Zuerst schauen wir uns an, wie wir den Text der Schaltfläche „Zum Warenkorb hinzufügen“ in WooCommerce ändern. Beispielsweise möchten Sie möglicherweise 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 __(‘Diesen Artikel kaufen’, ‘woocommerce’); }
Speichern Sie Ihre Änderungen. Wenn Sie dann ein einzelnes Produkt ansehen, wird der Text Ihrer neuen Schaltfläche „Zum Warenkorb hinzufügen“ angezeigt.
Ändern Sie die Farbe der Schaltfläche „Zum Warenkorb hinzufügen“.
Wenn Sie die Farbe Ihrer Schaltfläche „Zum Warenkorb hinzufügen“ ändern möchten, müssen Sie benutzerdefiniertes CSS hinzufügen. Sie können dies tun, indem Sie zu gehen Aussehen » Anpassen » Zusätzliches CSS aus Ihrem WordPress-Dashboard.
Fügen Sie nun den folgenden CSS-Code ein:
.single-product .product .single_add_to_cart_button.button { Hintergrundfarbe: #FF0000; Farbe: #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 { Hintergrundfarbe: #FF0000; Farbe: #C0C0C0; }
Hier hast du es!
Wir hoffen, dass dieser Artikel Ihnen dabei geholfen hat, zu erfahren, 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-Schaltflächen zum Hinzufügen zum Warenkorb anzupassen?
Danke fürs Lesen. Bitte folgen Sie uns weiter YouTube, TwitterUnd Facebook für weitere hilfreiche Inhalte zum Wachstum Ihres Unternehmens.
