So erstellen Sie die WooCommerce-Schaltfläche „In den Warenkorb“ nach Produkt-ID

Veröffentlicht: 2021-02-24

Woocommerce-Schaltfläche zum Warenkorb hinzufügen nach Produkt-ID WiIt ist möglich, WooCommerce-Schaltflächen zum Hinzufügen zum Warenkorb nach Produkt-ID zu erstellen und die Schaltfläche auf Formularen, Widgets, Beiträgen oder Seiten und sogar auf Vorlagen zu verwenden. Idealerweise kann die WooCommerce-Schaltfläche zum Hinzufügen zum Warenkorb angepasst werden, um eine Vielzahl von benutzerdefinierten Optionen zu bieten.

WooCommerce-Schaltfläche „In den Warenkorb“ nach Produkt-ID

In einem früheren Beitrag habe ich erklärt, wie man die WooCommerce-Schaltfläche „Zum Warenkorb hinzufügen“ in einen Link ändert und auch, wie man die WooCommerce-Schaltfläche „Zum Warenkorb hinzufügen“ ändert, um mehr zu lesen.
Dies sind andere frühere Tutorials, die Ihnen helfen können, mehr darüber zu erfahren, wie Sie die WooCommerce-Schaltfläche „In den Warenkorb“ anpassen können:

So ersetzen Sie die Schaltfläche „In den Warenkorb“ durch einen Link WooCommerce
So verstecken Sie die Schaltfläche „Weiterlesen“ und „In den Warenkorb“ WooCommerce
So ändern Sie den Text der Schaltfläche „In den Warenkorb“ auf der WooCommerce-Shop-Seite
So ändern Sie den Text zum Warenkorb hinzufügen WooCommerce Guide mit Beispielen
So fügen Sie das Produkt in WooCommerce programmgesteuert zum Warenkorb hinzu
So ändern Sie die WooCommerce-Benachrichtigung „Zum Warenkorb hinzugefügt“.
So verbergen Sie den Preis und fügen den Warenkorb für abgemeldete Benutzer hinzu WooCommerce

Wie Sie aus der obigen Liste der Tutorials ersehen können, gibt es mehrere Möglichkeiten, wie Sie die WooCommerce-Schaltfläche „In den Warenkorb“ anpassen können, um unterschiedliche Inhaltslayouts oder -designs zu erreichen.

Wenn Sie beispielsweise eine WooCommerce-Preistabelle erstellen möchten, müssen Sie möglicherweise Schaltflächen zum Hinzufügen zum Warenkorb erstellen, die Sie der Schaltfläche „Call to Action“ in der Preistabelle hinzufügen können.

WooCommerce-Schaltfläche „In den Warenkorb“ nach Produkt-ID

Erstellen Sie ein einfaches Produkt WooCommerce Add to Cart Button nach Produkt-ID

Um die WooCommerce-Schaltfläche „In den Warenkorb“ nach Produkt-ID zu erstellen, müssen Sie die Produkt-ID des spezifischen Produkts kennen, für das Sie die Schaltfläche „In den Warenkorb“ erstellen möchten. Die Produkt-ID kann leicht auf der Übersichtsseite aller Produkte gefunden werden, wie in diesem Tutorial unter – How to Get WooCommerce Product ID erklärt.

Link zum Warenkorb hinzufügen

Sie können jetzt die Warenkorb-URL erstellen, die Sie nicht zum Schaltflächencode an der Stelle hinzufügen, an der die Schaltfläche angezeigt werden soll. In diesem Fall können Sie den einfachen Produkt-In-den-Warenkorb-Link wie im folgenden Code erstellen:

https://example.com/?add-to-cart=840

Die URL Ihrer Website sollte den example.com-Teil der URL ersetzen, und die spezifische Produkt-ID sollte die im obigen Beispiel verwendete Produkt-ID 840 ersetzen.

Sie können dies wie im folgenden Code in einen HTML-Schaltflächencode einfügen:

Erstellen Sie ein einfaches Produkt mit Menge WooCommerce In den Warenkorb-Button nach Produkt-ID

Sie können auch die Menge zur URL zum Hinzufügen zum Einkaufswagen hinzufügen, und Sie können dies tun, indem Sie die verschiedenen URL-Parameter verwenden, die verwendet werden, um Logik zu den URLs hinzuzufügen.

In diesem Fall können Sie den Code, den wir im obigen Schritt erstellt haben, erweitern und eine einfache Produkt-WooCommerce-Schaltfläche zum Hinzufügen zum Warenkorb nach Produkt-ID mit der Menge 2 wie folgt erstellen:

https://example.com/?add-to-cart=840&quantity=2

Wie Sie sehen können, haben wir ein kaufmännisches Und-Zeichen und das Wort Menge hinzugefügt und es mit 2 gleichgesetzt, der Anzahl der Artikel, die wir in den Warenkorb legen möchten, wenn auf die Schaltfläche desselben Produkts geklickt wird.

Um diese URL zum HTML-Code hinzuzufügen und eine WooCommerce-Schaltfläche zum Hinzufügen zum Warenkorb nach Produkt-ID mit der Menge zu erstellen, sollten Sie den folgenden Code verwenden:

Erstellen Sie eine WooCommerce-Schaltfläche „In den Warenkorb“ nach Produkt-ID mit Weiterleitung zum Warenkorb

Um Ihren WooCommerce-Shop-Kunden die Navigation auf Ihrer Website zu erleichtern, ist das Erstellen von Weiterleitungen sehr wichtig. In der Vergangenheit habe ich die vielen Möglichkeiten zur Erstellung von WooCommerce-Weiterleitungen hervorgehoben.

Insbesondere habe ich in diesen Blog-Posts geteilt – WooCommerce erstellt eine Weiterleitung nach dem Auschecken und eine WooCommerce-Weiterleitung nach dem Abmelden und erstellte sogar das WooCommerce-Plugin zur Weiterleitung nach dem Auschecken , um Ihnen bei der Implementierung einer Weiterleitung nach dem Auschecken zu helfen.

WooCommerce-Weiterleitung zum Warenkorb nach dem Hinzufügen zum Warenkorb

Sie können auch eine Weiterleitung zum Warenkorb mit der WooCommerce-Schaltfläche „In den Warenkorb“ nach Produkt-ID erstellen. Sie können dies erreichen, indem Sie den Code, den ich im obigen Schritt geteilt habe, wie folgt ändern:

https://example.com/cart/?add-to-cart=840

Wie Sie sehen, haben wir den Warenkorb zur URL hinzugefügt, um sicherzustellen, dass der Benutzer zum Warenkorb weitergeleitet wird, nachdem er das Produkt in den Warenkorb gelegt hat. Der vollständige Code mit dem HTML-Button-Code sieht wie folgt aus:

WooCommerce-Weiterleitung zur Kasse nach dem Hinzufügen zum Warenkorb

Sie können auch eine Weiterleitung zur Kasse mit der WooCommerce-Schaltfläche „In den Warenkorb“ nach Produkt-ID erstellen. Sie können dies erreichen, indem Sie den Code ändern, den ich im Schritt geteilt habe, indem Sie den Checkout auf der obigen URL wie folgt hinzufügen:

https://example.com/checkout/?add-to-cart=840

Wie Sie sehen, haben wir die Kasse zur URL hinzugefügt, um sicherzustellen, dass der Benutzer zur Kasse weitergeleitet wird, nachdem er das Produkt in den Warenkorb gelegt hat. Der vollständige Code mit dem HTML-Button-Code sieht wie folgt aus:

Fazit

In diesem Tutorial haben wir die verschiedenen Möglichkeiten hervorgehoben, wie Sie die WooCommerce-Schaltfläche „Zum Warenkorb hinzufügen“ nach Produkt-ID erstellen können zum Warenkorb-Button.

Ich hoffe, Sie können jetzt WooCommerce-Schaltflächen zum Hinzufügen zum Warenkorb nach Produkt-ID erstellen und in Ihrer Preistabelle, Formularen und Vorlagen verwenden. Sie können die Schaltfläche zum Hinzufügen zum Einkaufswagen auch weiter anpassen, indem Sie die Schaltflächenklasse verwenden, die ich dem obigen Code hinzugefügt habe. Wenn Sie Ihre Website noch anpassen, können Sie von den Ideen profitieren, die ich im Ultimate WooCommerce Hide Guide geteilt habe.

Für WooCommerce-Benutzer, die das Storefront-Design installiert haben und es weiter anpassen möchten, habe ich eine brillante Sammlung von über 80 Tipps zur Anpassung des WooCommerce Storefront-Designs geteilt, die Ihnen zeigen, wie Sie ein benutzerdefiniertes Erscheinungsbild Ihrer Website mit dem standardmäßigen WooCommerce-Design – Storefront – erstellen können .

So erstellen Sie die WooCommerce-Schaltfläche „In den Warenkorb“ nach Produkt-ID

WooCommerce-Schaltfläche „In den Warenkorb“ nach Produkt-ID

Erstellen Sie ein einfaches Produkt WooCommerce Add to Cart Button nach Produkt-ID

Link zum Warenkorb hinzufügen

Erstellen Sie ein einfaches Produkt mit Menge WooCommerce In den Warenkorb-Button nach Produkt-ID

Erstellen Sie eine WooCommerce-Schaltfläche „In den Warenkorb“ nach Produkt-ID mit Weiterleitung zum Warenkorb

WooCommerce-Weiterleitung zum Warenkorb nach dem Hinzufügen zum Warenkorb

WooCommerce-Weiterleitung zur Kasse nach dem Hinzufügen zum Warenkorb

Fazit

Ähnliche Artikel