Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. WordPress
Code

So erstellen Sie eine benutzerdefinierte Einstellungen in WooCommerce

by
Difficulty:IntermediateLength:MediumLanguages:

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Final product image
What You'll Be Creating

WooCommerce ist mit Abstand das führende E-Commerce-Plugin für WordPress. Zum Zeitpunkt des Schreibens hat es über 3 Millionen aktive Installationen und ist Berichten zufolge mehr als 40% aller Online-Shops.

Einer der Gründe für die Popularität von WooCommerce ist seine Erweiterbarkeit. Wie WordPress selbst ist WooCommerce vollgepackt mit Aktionen und Filtern, an denen sich Entwickler beteiligen können, wenn sie die Standardfunktionen von WooCommerce erweitern möchten.

Ein gutes Beispiel hierfür ist die Möglichkeit, ein benutzerdefiniertes Datenfeld zu erstellen.

Was wird in diesem Lernprogramm behandelt?

Dieses Tutorial ist in zwei Teile aufgeteilt. Im ersten Teil betrachten wir:

  • Hinzufügung eines benutzerdefinierten Bereichs zu WooCommerce
  • Hinzufügen von benutzerdefinierten Feldern zum Panel
  • Bereinigen und Speichern benutzerdefinierter Feldwerte

Dann schauen wir uns im zweiten Teil an:

  • Angepasste Felder auf der Produktseite anzeigen
  • Ändern des Produktpreises abhängig vom Wert der benutzerdefinierten Felder
  • Angepasste Feldwerte im Warenkorb und in der Reihenfolge anzeigen

Was ist ein WooCommerce-Panel für benutzerdefinierte Daten?

Wenn Sie ein neues Produkt in WooCommerce erstellen, geben Sie die meisten wichtigen Produktinformationen wie Preis und Lagerbestand im Abschnitt Produktdaten ein.

WooCommerce custom data panel

Im obigen Screenshot sehen Sie, dass der Abschnitt "Produktdaten" in Felder unterteilt ist: die Registerkarten auf der linken Seite, z. Allgemein, Inventar usw. öffnen jeweils verschiedene Bereiche in der Hauptansicht rechts.

In diesem Lernprogramm sehen wir uns ein benutzerdefiniertes Bedienfeld für Produktdaten an und fügen einige benutzerdefinierte Felder hinzu. Dann betrachten wir diese benutzerdefinierten Felder im Frontend und speichern ihre Werte in Kundenaufträgen.

In unserem Beispielszenario werden wir ein "Giftwrap" -Panel hinzufügen, das einige benutzerdefinierte Felder enthält:

  • ein Kontrollkästchen, um eine Geschenkverpackung für das Produkt auf der Produktseite einzufügen
  • ein Kontrollkästchen, um ein Eingabefeld zu aktivieren, in dem ein Kunde eine Nachricht auf der Produktseite eingeben kann
  • ein Eingabefeld, um einen Preis für die Geschenkverpackung hinzuzufügen; Der Preis wird zum Produktpreis im Warenkorb hinzugefügt

Im Backend wird es so aussehen:

Giftwrap panel

Und am vorderen Ende wird es in etwa so aussehen:

Front end example

Erstellen Sie ein neues Plugin

Da wir die Funktionalität erweitern, werden wir ein Plug-in erstellen, anstatt unseren Code einem Thema hinzuzufügen. Das bedeutet, dass unsere Benutzer diese zusätzlichen Funktionen beibehalten können, auch wenn sie das Design ihrer Website wechseln. Das Erstellen eines Plugins ist für dieses Tutorial nicht möglich, aber wenn Sie Hilfe benötigen, werfen Sie einen Blick auf diesen Tuts + Coffee Break Kurs zum Erstellen Ihres ersten Plugins:

Unser Plugin wird aus zwei Klassen bestehen: eine für die Verwaltung von Inhalten im Admin und eine für die Verwaltung von allem am Frontend. Unsere Plugin-Dateistruktur wird wie folgt aussehen:

Project structure

Admin Class

Zuerst müssen wir unsere Klasse erstellen, um alles am Backend zu handhaben. Erstellen Sie in einem Ordner Namens classes eine neue Datei namens class-tpwcp-admin.php.

Diese Klasse hat Folgendes:

  • Erstellen Sie die benutzerdefinierte Registerkarte (die Registerkarte ist das anklickbare Element auf der linken Seite des Abschnitts Produktdaten).
  • Fügen Sie dem benutzerdefinierten Bereich die benutzerdefinierten Felder hinzu (der Bereich ist das Element, das angezeigt wird, wenn Sie auf einen Tab klicken).
  • Entscheiden Sie die Produkttypen, für die das Panel aktiviert werden soll.
  • Bereinigen und speichern Sie die benutzerdefinierten Feldwerte.

Fügen Sie den folgenden Code in diese neue Datei ein. Wir werden danach Schritt für Schritt durchgehen.

Erstellen Sie die benutzerdefinierte Registerkarte

Um die benutzerdefinierte Registerkarte zu erstellen, haken wir uns mit der Funktion create_giftwrap_tab im woocommerce_product_data_tabs-Filter ein. Dies übergibt das WooCommerce $tabsObjekt in, das wir dann mit den folgenden Parametern modifizieren:

  • label: Verwenden Sie dies, um den Namen Ihres Tabs zu definieren.
  • target: Dies wird verwendet, um einen Anker-Link zu erstellen, der also eindeutig sein muss.
  • class: Ein Array von Klassen, die auf Ihr Panel angewendet werden.
  • priority: Definieren Sie, wo Ihre Registerkarte angezeigt werden soll.

Produkttypen

In diesem Stadium sollten Sie überlegen, für welche Produkttypen unser Panel aktiviert werden soll. Standardmäßig gibt es vier WooCommerce-Produkttypen: Einfach, Variabel, Gruppiert und Affiliate. Nehmen wir an, für unser Beispielszenario möchten wir, dass unser Giftwrap-Panel für einfache und variable Produkttypen aktiviert wird.

Um dies zu erreichen, fügen wir das hinzu show_if_simple und show_if_variable Klassen zum obigen Klassenparameter. Wenn wir das Panel für variable Produkttypen nicht aktivieren möchten, lassen wir einfach das weg show_if_variable Klasse.

Fügen Sie benutzerdefinierte Felder hinzu

Der nächste Haken, den wir benutzen, ist woocommerce_product_data_panels. Mit dieser Aktion können wir unser eigenes Markup für das Giftwrap-Panel ausgeben.  In unserer Klasse die Funktion display_giftwrap_fields schafft ein paar div Wrapper, in denen wir einige WooCommerce-Funktionen verwenden, um benutzerdefinierte Felder zu erstellen.

Beachten Sie, wie die id Attribut für unser Äußeres divgiftwrap_panel, stimmt mit dem Wert überein, den wir an den Wert übergeben haben target Parameter unserer giftwrap Registerkarte oben. So kann WooCommerce dieses Panel anzeigen, wenn wir auf die Registerkarte Giftwrap klicken.

WooCommerce Custom Field Funktionen

In unserem Beispiel sind die zwei Funktionen, die wir zum Erstellen unserer Felder verwenden:

  • woocommerce_wp_checkbox
  • woocommerce_wp_text_input

Diese Funktionen werden von WooCommerce speziell zum Erstellen benutzerdefinierter Felder bereitgestellt. Sie nehmen eine Reihe von Argumenten an, darunter:

  • id: Dies ist die ID Ihres Feldes. Es muss eindeutig sein und wir werden es später in unserem Code referenzieren.
  • label : Dies ist das Etikett, das dem Benutzer angezeigt wird.
  • desc_tip:Dies ist die optionale QuickInfo, die angezeigt wird, wenn der Benutzer über das Fragezeichensymbol neben der Beschriftung fährt.

Beachten Sie auch, dass die  woocommerce_wp_text_input Funktion nimmt auch ein type Argument, wo Sie angeben können number für ein Zahleneingabefeld, oder text für ein Texteingabefeld. Unser Feld wird verwendet, um einen Preis einzugeben, also spezifizieren wir es als number

Speichern Sie die benutzerdefinierten Felder

Der letzte Teil unserer Admin-Klasse verwendet den woocommerce_process_product_meta Aktion zum Speichern unserer benutzerdefinierten Feldwerte.

Um die Speicherung und das Abrufen von Daten zu standardisieren und zu optimieren, hat WooCommerce 3.0 eine CRUD-Methode (Create, Read, Update, Delete) zum Einstellen und Abrufen von Produktdaten eingeführt. Sie können mehr über die dahinterstehenden Gedanken in der WooCommerce 3.0 announcement.

In diesem Sinne, anstatt der bekannteren get_post_meta und update_post_meta Methoden, die wir in der Vergangenheit vielleicht benutzt haben, benutzen wir jetzt $post_id um einen WooCommerce zu erstellen $product Objekt und wenden Sie dann das update_meta_data methode zum Speichern von Daten. Beispielsweise:

Bitte beachten Sie auch, dass wir unsere Daten sorgfältig bereinigen, bevor Sie sie in der Datenbank speichern. Weitere Informationen zur Datenbereinigung finden Sie hier:

Haupt-Plugin-Datei

Wenn du deine erstellt hast readme.txt datei und Ihre Haupt-Plugin-Datei tutsplus-woocommerce-panel.php, Sie können diesen Code zu Ihrer Hauptdatei hinzufügen.

Dies wird Ihre Admin-Klasse initiieren.

Wenn Sie Ihr Plug-in auf einer Website (zusammen mit WooCommerce) aktivieren und dann ein neues Produkt erstellen, sehen Sie Ihr neues Giftwrap-Bedienfeld sowie benutzerdefinierte Felder. Sie können die Felder aktualisieren und speichern ... Aber Sie werden noch nichts am Frontend sehen.

Schlusswort

Lassen Sie uns nur wiederholen, was wir bisher in diesem Artikel gesehen haben.

Wir haben uns ein Beispielszenario angesehen, um WooCommerce ein benutzerdefiniertes "Giftwrap" -Panel hinzuzufügen. Wir haben ein Plugin erstellt und eine Klasse hinzugefügt, um das Panel zu erstellen. Innerhalb der Klasse haben wir auch WooCommerce-Funktionen verwendet, um benutzerdefinierte Felder hinzuzufügen, und dann haben wir diese Feldwerte bereinigt und gespeichert.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.