So fügen Sie benutzerdefinierte Felder und Registerkarten per Code zur WooCommerce-Produktdaten-Metabox hinzu

In diesem Beitrag erfahren Sie, wie Sie Ihre benutzerdefinierten Metafelder in die Produktdaten-Metabox von WooCommerce einfügen. wie Sie Felder hinzufügen und wie Sie Ihre eigene benutzerdefinierte Registerkarte hinzufügen. Wir gehen detailliert darauf ein, wie Sie Ihre Felder hinzufügen, wo Sie sie hinzufügen, wie Sie sie speichern und schließlich, wie Sie sie im Frontend anzeigen.

Hinzufügen von benutzerdefinierten Feldern zu bestehenden Panels

Zuerst schauen wir uns an, wie man ein Feld zu bestehenden Panels hinzufügt. Wir müssen uns in zwei Haken einhaken; eine zum Ausgeben des Felds und eine zum Speichern des Werts davon. Der erste Haken hängt davon ab, in welcher Registerkarte Sie Ihr Feld anzeigen möchten.

Die Produktdaten-Metabox

Beachten Sie, dass die Sichtbarkeit der Registerkarten je nach Produkttyp unterschiedlich ist. Beispielsweise wird die Registerkarte „Allgemein” entfernt, wenn Sie zu einem gruppierten Produkttyp wechseln. Sie sollten also nicht nur überlegen, wo Ihre benutzerdefinierten Felder logisch hineinpassen, sondern Sie müssen auch ein Bedienfeld in Betracht ziehen, das für alle Ihre gewünschten Produkttypen sichtbar ist. Dies ist eine Liste der allgemeinsten verfügbaren Hooks:

• woocommerce_product_options_general_product_data("Allgemein")
• woocommerce_product_options_inventory_product_data("Inventar")
• woocommerce_product_options_shipping("Versand")
• woocommerce_product_options_related(„Verknüpfte Produkte”)
• woocommerce_product_options_attributes(„Attribute”)
• woocommerce_product_options_advanced("Fortschrittlich")

Hinzufügen einer Formulareingabe

Was die Ausgabe einer Formulareingabe betrifft, so könnten Sie die Formulareingabe manuell in HTML ausgeben (z. B. <input type="text"...>), aber WooCommerce bietet einfache Funktionen zum einfachen Hinzufügen von Feldern beliebiger Art. Ich empfehle, diese zu verwenden. Sehen Sie sich hier die Übersicht aller möglichen Eingabetypen von WooCommerce an und erfahren Sie, welche Argumente Sie übergeben können, um die Ausgabe zu steuern.

Was dieses Tutorial angeht, werde ich eine einfache Texteingabe auf der Registerkarte „Inventar” hinzufügen, um die Anzahl der Artikel in jedem Paket zu schreiben. Für den Schlüssel, unter dem Ihr benutzerdefinierter Wert gespeichert wird, fügen Sie immer einen Unterstrich „_” davor ein, in meinem Fall ist es „_number_in_package”:

Speichern und bearbeiten Sie ein Produkt. Sie sollten Ihr benutzerdefiniertes Feld unten auf der Registerkarte "Inventar" sehen:

Das benutzerdefinierte Feld „Anzahl im Paket” wurde unten hinzugefügt

Ein Hinweis zur Feldsichtbarkeit je nach Produkttyp

Die Produktdaten-Metabox von WooCommerce enthält eine Menge Javascript, das sowohl Felder als auch Registerkarten/Panels verbirgt und anzeigt. Sie können dies ganz einfach nutzen, wenn Sie möchten, dass Ihr Feld nur für bestimmte Produkttypen sichtbar ist, indem Sie Ihrem Feld bestimmte Klassennamen zuweisen.

Angenommen, Sie möchten, dass Ihr Feld nur angezeigt wird, wenn das Produkt vom Typ „Einfaches Produkt” ist, oder Sie möchten, dass es ausgeblendet wird, wenn das Produkt ein variables Produkt ist. WooCommerce hört auf bestimmte Klassennamen wie show_if_<producttype>und hide_if_<producttype>und Sie können mehrere Klassen kombinieren, um eine Feinabstimmung vorzunehmen, wann Ihr Feld ausgeblendet oder sichtbar sein soll.

Zum Beispiel, wenn ich möchte, dass mein Feld nur für einfache Produkte sichtbar ist; Ich werde dies in ‘ wrapper_class‘ zu meiner Feldeingabe hinzufügen:

Sie können wrapper_classzB auch ‘ show_if_simple show_if_grouped‘ einstellen, um das Feld nur für einfache oder gruppierte Produkte sichtbar zu machen. Probieren Sie es selbst aus!

Speichern Ihres benutzerdefinierten Felds

Ab sofort wird alles, was Sie in Ihr Feld eingeben, nicht gespeichert. Das machen wir als nächstes. Wir hängen uns an woocommerce_process_product_metaund speichern den Wert von PHPs Global $_POST(Formularübermittlung).

Lassen Sie mich den obigen Code kurz erklären. Sie könnten das Feld einfach speichern, indem Sie verwenden update_post_meta(), aber in neueren Versionen von WooCommerce wurde die Handhabung von Produkt-Meta stark verbessert. Solange Sie das Produktobjekt haben (das wir durch Aufrufen wc_get_product()mit der Post-ID erhalten), können Sie problemlos alle Produktinformationen im Objekt manipulieren und schließlich save()einmal aufrufen, um alle Änderungen zu aktualisieren. Dies ist sehr vorteilhaft, insbesondere wenn Sie mehrere Felder speichern möchten – in diesem Fall müssen Sie keine Datenbankoperationen für jedes Feld ausführen, sondern nur noch ein letztes Mal, wenn Sie aufrufen save().

Verwenden Sie update_meta_data()auf dem Objekt für alle Metadaten, die Sie speichern möchten.

Mit der obigen Funktion sollte Ihr Feld jetzt gespeichert werden, wenn Sie es in Produkt bearbeiten aktualisieren! Beachten Sie auch, dass Sie bei Verwendung der WooCommerce-Funktionen zur Ausgabe des Felds den Wert Ihres Felds nicht manuell abrufen müssen, bevor Sie das Feld ausgeben – es ist vollautomatisch.

Ausgabe Ihres benutzerdefinierten Felds im Frontend

Der erste Schritt besteht darin, herauszufinden, welchen Hook Sie für die Ausgabe Ihres benutzerdefinierten Felds verwenden möchten. WooCommerce bietet viele verfügbare Hooks, um genau zu steuern, wo Sie die Ausgabe haben möchten. Wenn Sie sich nicht sicher sind, werfen Sie einen Blick in plugins/woocommerce/templates/diese Dateien und finden Sie leicht einen geeigneten Haken. Sie können die Vorlage auch überschreiben und die Ausgabe in die Vorlage einfügen, aber ich empfehle immer, stattdessen Hooks zu verwenden.

Was mich betrifft, möchte ich, dass mein benutzerdefiniertes Feld in einem einzelnen Produkt innerhalb des Meta-Div ausgegeben wird – zusammen mit WooCommerce, das SKU und Kategorie ausgibt. Dafür verwende ich den Haken woocommerce_product_meta_start. Innerhalb der Hooks (wie bei fast allen Template-Hooks) können Sie auf das globale Post-Objekt zugreifen. Ich werde der gleichen Faustregel folgen wie beim Speichern meines Feldes; Verwenden get_meta()Sie für das Produktobjekt, um mein benutzerdefiniertes Feld zu erhalten:

Hinzufügen einer benutzerdefinierten Registerkarte und eines Bedienfelds zur Produktdaten-Metabox

Wenn Sie eine Sammlung von benutzerdefinierten Feldern hinzufügen möchten, die logisch zusammengehören, kann es eine gute Idee sein, sie in einer benutzerdefinierten Registerkarte zu gruppieren. Um eine benutzerdefinierte Registerkarte zur Produktdaten-Metabox hinzuzufügen, müssen wir einen Haken in einen Filter zum Hinzufügen der Registerkarte selbst und einen Haken zum Ausgeben des Inhalts des Panels setzen. Zum Schluss müssen wir noch den gleichen Haken wie oben hinzufügen, um unsere Felder zu speichern.

Zum Beispiel werde ich ein benutzerdefiniertes Bedienfeld namens „Zusätzliche Informationen” hinzufügen, in dem ich eine Texteingabe, ein Kontrollkästchen und eine Zahleneingabe hinzufügen möchte.

Zuerst filtern wir woocommerce_product_data_tabsunsere Registerkarte und fügen sie ihrem Array hinzu.

Es gibt einige nützliche Argumente, die wir hier liefern können. Sie können beispielsweise ‘ class‘ verwenden, um die Sichtbarkeit der Registerkarte je nach Produkttyp zu steuern. Wenn Sie es verpasst haben, sehen Sie sich den oben erwähnten Abschnitt über die Feldsichtbarkeit an. Beachten Sie jedoch, dass Sie die Klassen in Registerkarten als Array und nicht als Zeichenfolge bereitstellen müssen. Sie können auch ‘ priority‘ angeben, um zu entscheiden, wo Ihre Registerkarte erscheinen soll. Wenn Sie zB 25 verwenden, wird der Reiter direkt nach „Inventar” positioniert.

Standardmäßig wird Ihr Tab mit einem Schraubenschlüssel als Symbol angezeigt. Leider gibt es (noch) keine Möglichkeit, das über den Filter zu steuern. Wenn dies für Sie wichtig ist, können Sie Admin-CSS hinzufügen und Ihrem Tab eine andere Klasse zuweisen. Hier ist eine Übersicht der verfügbaren Symbole in WooCommerce.

Panel-Ausgang

Der nächste Schritt ist das Einhängen woocommerce_product_data_panelsund Ausgeben des Inhalts Ihres Panels. Ein wichtiger Hinweis hier ist, die Ausgabe mit diveinem idAttribut mit dem gleichen Namen zu beginnen, den Sie als Schlüssel in Tabulatoren angegeben haben (in meinem Fall ‘ additional_info‘). Was den Inhalt betrifft, liegt es an Ihnen – Sie können beliebigen HTML-Code hinzufügen, aber ich empfehle, die Funktionen von WooCommerce für die Ausgabe von Formularfeldern zu verwenden. Die gleichen Vorteile für das Ausblenden oder Anzeigen von Feldern funktionieren auch hier.

Nach dem Speichern sollten Sie nun die Registerkarte und ihren Inhalt in der Produktdaten-Metabox sehen (es sei denn, das Produkt ist natürlich ein externes Produkt).

Es bleibt nur noch, die in Ihre benutzerdefinierten Felder eingegebenen Daten zu speichern, und dafür verwenden wir denselben Prozess wie oben:

Hinweis: In WooCommerce gibt es eine allgemeine Regel, nach der alle Kontrollkästchen als „ ” gespeichert werden yes, wenn sie aktiviert sind, oder als leere Zeichenfolge, wenn sie nicht aktiviert sind. Indem ich die Regel von WooCommerce befolge und mein aktiviertes Kontrollkästchen als „ yes” speichere, wird sichergestellt, dass mein Kontrollkästchen woocommerce_wp_checkbox()wie beabsichtigt funktioniert, wenn es den aktuellen Wert meines Felds abruft.

Fazit

In diesem Beitrag zeige ich, wie Sie Ihre benutzerdefinierten Felder zur Produktdaten-Metabox von WooCommerce hinzufügen, wie Sie sie speichern, wie Sie ihre Sichtbarkeit steuern und ein einfaches Beispiel für die Ausgabe Ihres Felds im Frontend. Ich habe auch gezeigt, wie Sie der Metabox eine benutzerdefinierte Registerkarte hinzufügen und Ihre Felder dort hinzufügen. Ich hoffe, das hat Ihnen geholfen, WooCommerce selbst anzupassen!