Erstellen Sie benutzerdefinierte WooCommerce-Produktregisterkarten mit erweiterten benutzerdefinierten Feldern

Beim Anzeigen eines Produkts in WooCommerce werden Informationen über das Produkt in Registerkarten angezeigt. Diese Registerkarten werden von WooCommerce behoben und generiert, außerhalb Ihrer Kontrolle. Dieser Beitrag zeigt Ihnen, wie Sie Code hinzufügen, der es den Autoren ermöglicht, benutzerdefinierte Registerkarten mit benutzerdefinierten Inhalten zu Produkten hinzuzufügen.

Haftungsausschluss: Es gibt eine WooCommerce-Erweiterung namens WooCommerce Tab Manager, die diese Funktion bietet. Es ist jedoch nicht kostenlos. Ich habe es nicht selbst getestet, aber soweit ich sehen kann, unterstützt es nur einen WYSIWYG-Editor (what you see is what you get) für den Inhalt der Registerkarten. Dieser Beitrag ist für Sie, die mehr Feinabstimmung der Tab-Inhalte wünschen oder den Code selbst schreiben möchten, ohne für ein weiteres Plugin zu bezahlen.

Wir werden das Plugin Advanced Custom Fields (ACF) verwenden, um den Prozess zu vereinfachen. Aber Sie sollten in der Lage sein, den Teil von ACF ganz einfach durch Ihren eigenen benutzerdefinierten Code zu ersetzen, wenn Sie das Plugin nicht verwenden möchten. ACF gibt es in einer kostenlosen Version und einer Pro-Version. In ACF Pro gibt es einen raffinierten Feldtyp: den Repeater, der perfekt für diese Art von Verwendung ist. Wenn Sie jedoch keine Pro-Lizenz haben oder erwerben möchten, machen Sie sich keine Sorgen. Das folgende Code-Tutorial zeigt Ihnen, wie Sie Felder sowohl mit der kostenlosen Version als auch mit dem Repeater in der Pro-Version hinzufügen.

Wenn Sie noch nicht mit ACF vertraut sind, hilft uns ACF bei der einfachen Einrichtung von Post-Meta-Feldern – aller Art. Sie können ganz einfach einen Editor, eine Dateiauswahl, eine Datums- oder Farbauswahl, eine Beitrags- oder Kategorieauswahl mit Unterstützung für Mehrfachauswahl und Neuordnung und mehr hinzufügen. Wir können dasselbe ohne ACF erreichen, aber dann müssten wir die Anzeige und das Speichern von Metabox-Inhalten selbst codieren.

Was wir machen werden

Um es einfach auszudrücken, wir möchten das Hinzufügen benutzerdefinierter Registerkarten zur Produktansicht ermöglichen. Jede Registerkarte unterstützt einen Titel, der als Registerkartenbezeichnung angezeigt wird, und den Inhalt, der angezeigt wird, wenn Sie auf die Registerkarte klicken. Die benutzerdefinierten Registerkarten hängen wirklich von der Art des Projekts oder Ihren Anforderungen ab. Vielleicht benötigen Sie Registerkarten für technische Daten, eine Registerkarte mit Dateien (z. B. Benutzerhandbücher und dergleichen), zusätzliche Informationen oder eine benutzerdefinierte Abfrage, die verwandte Produkte anzeigt.

In diesem Tutorial halten wir es einfach, indem wir einen WYSIWYG-Editor für die Registerkarteninhalte hinzufügen. Wie oben erwähnt, ist es einfach, andere Feldtypen (z. B. Dateien oder eine Post-Abfrage) zu implementieren, es ist nur ein Unterschied im Code, den Sie schreiben, um den Tab-Inhalt anzuzeigen – was nichts mit diesem Tutorial zu tun hat.

Wenn Sie ACF Pro haben und den Repeater zum einfachen Hinzufügen mehrerer Registerkarten verwenden möchten; überspringen Sie den nächsten Abschnitt. Wenn Sie nur die kostenlose Version von ACF haben, fahren Sie fort. Das Fehlen des Repeater-Felds hat den Nachteil, dass Sie eine feste Anzahl von Registerkarten definieren müssen. Der Autor kann also keine unbegrenzte Anzahl von Registerkarten erstellen, wie dies mit dem Repeater möglich ist. Diese kostenlose Lösung funktioniert jedoch problemlos in Webshops, in denen Sie nur bestimmte (Anzahl von) benutzerdefinierten Registerkarten wünschen.

Tutorial für die kostenlose ACF-Version

Hinzufügen der ACF-Felder

Das Hinzufügen einer neuen Metabox mit Feldern ist mit ACF wirklich einfach. Sie haben zwei Möglichkeiten; Verwenden Sie die Benutzeroberfläche von ACF, um alles einzurichten, oder fügen Sie die Felder per Code hinzu. Normalerweise ist das Einrichten der Felder in Admin der richtige Weg. Aber wenn Sie sicherstellen müssen, dass die Felder auf mehreren WordPress-Sites vorhanden sind (z. B. Localhost-Entwicklung, Testserver und Live-Server), könnten Sie davon profitieren, die Felder per Code in Ihrem Design oder Plugin hinzuzufügen.

Sie müssen Folgendes einrichten:

• Eine Gruppe, die angezeigt wird, wenn der Beitragstyp WooCommerce-Produkten entspricht
• Eine Texteingabe für den Tab-Titel
• Welche Felder Sie für den Registerkarteninhalt wünschen. Als Beispiel fügen wir einen WYSIWYG-Editor hinzu.
• (Optional) Zusätzliche Registerkartentitel und Registerkarteninhalte für so viele Registerkarten, wie wir unterstützen möchten.

Bitte merken Sie sich die Feldnamen, da Sie später darauf zurückgreifen müssen. Ich habe den Registerkartentitel als tab_titleund das WYSIWYG-Feld als definiert tab_contents.

Wenn Sie die Felder lieber per Code hinzufügen möchten, finden Sie hier ein Beispiel. Fügen Sie dies in die Datei Ihres Designs functions.phpoder Plugins ein:

Wenn Sie mehr als nur eine Registerkarte wünschen, fügen Sie einfach einen weiteren Satz von Registerkartentiteln und Registerkarteninhalten nach hinzu line #19. nameDenken Sie nur daran, einzigartig zu bleiben .

Wenn wir ein Produkt bearbeiten, sollte diese Metabox erscheinen:

Ausgabe Ihrer benutzerdefinierten Registerkarten

WooCommerce ermöglicht es uns, woocommerce_product_tabsnach manipulierenden Registerkarten zu filtern. Als Argument für diesen Filter erhalten Sie ein Array für alle Tabs. Das Array besteht aus Arrays für jede Registerkarte mit eindeutigen Schlüsseln. Das Array für jede Registerkarte enthält jedoch nicht die tatsächliche Ausgabe der Registerkarteninhalte. Stattdessen erwartet es einen Callback – einen Namen einer Funktion, die WooCommerce zur Ausgabe der Tab-Inhalte ausführen wird.

Sobald Sie sich in der Funktion befinden, können Sie verwenden global $post, um Zugriff auf das aktuelle Beitragsobjekt zu erhalten, oder wenn Sie möchten, dass das Produktobjekt von WooCommerce generiert wird, tun Sie einfach global $product. Wir benötigen die Post-ID, um den Wert unserer benutzerdefinierten Felder mit der Funktion von ACF abzurufen [get_field](https://www.advancedcustomfields.com/resources/get_field/)(). Im folgenden Codebeispiel holen wir nur den Tab-Titel und prüfen, ob dieser leer ist oder nicht. Wenn dies nicht der Fall ist, wird dem Array eine neue Registerkarte hinzugefügt. Es ist sinnvoll, keine Registerkarten hinzuzufügen, bei denen der Registerkartentitel leer ist.

Beachten Sie, dass Sie ‘ priority‘ verwenden können, um die Position des Tabulators zu steuern. Wenn Sie es beispielsweise auf 1 setzen, wird Ihre Registerkarte zuerst angezeigt, vor allen Registerkarten von WooCommerce. Definieren Sie einen Funktionsnamen für das callbackElement „ “. Im Anschluss #17definieren wir die Funktion, die WooCommerce zur Ausgabe des Tab-Inhalts ausführen soll.

Diese Tab-Callback-Funktionen erhalten zwei Parameter; der Schlüssel und das Array-Element aller Werte für die aktuelle Registerkarte. Innerhalb unserer Callback-Funktion geben wir den Tab-Titel erneut aus, indem wir auf das bereitgestellte $tabArray verweisen. WooCommerce gibt ihre Tab-Titel in a wieder h2, also machen wir dasselbe. Und dann verwenden wir get_field(), um den Wert des Registerkarteninhalts abzurufen und den Wert einfach wiederzugeben. Passen Sie die Zeile #23an die Art von Feldtypen an, die Sie hinzugefügt haben (z. B. Post-Objektauswahl, Bilder oder etwas anderes).

Beachten Sie, dass ich alles in eine if-Prüfung verpackt habe, die prüft, ob sowohl WooCommerce als auch ACF aktiviert sind oder nicht. Dies ist eine gute Vorgehensweise, um zu verhindern, dass Ihre Website beschädigt wird.

Und das ist es! Sie haben jetzt erfolgreich Code erstellt, um benutzerdefinierte WooCommerce-Registerkarten hinzuzufügen!

Wenn Sie dies mit dem Repeater-Feld von ACF Pro tun möchten, um eine unbegrenzte Anzahl von Registerkarten zu unterstützen, lesen Sie weiter.

Tutorial für ACF Pro und Repeater

Hinzufügen der ACF-Felder

Fügen Sie Ihre Gruppe entweder über die Admin-Benutzeroberfläche von ACF hinzu oder fügen Sie sie per Code in Ihren Design- oder Plugin-Dateien hinzu. Folgendes müssen wir einrichten:

• Eine Gruppe, die angezeigt wird, wenn der Beitragstyp dem WooCommerce-Produkt entspricht
• Ein Repeater mit folgenden Unterfeldern:
  • Eine Texteingabe für den Tab-Titel
  • Welche Felder Sie für den Registerkarteninhalt wünschen.

So würden Sie es mit ACF admin einrichten:

Oder Sie können die Gruppe nach Code wie folgt hinzufügen:

In jedem Fall sollten Sie bei der Bearbeitung von Produkten mit dieser Metabox enden:

Ausgabe Ihrer benutzerdefinierten Registerkarten

Das Ausgeben Ihrer benutzerdefinierten Registerkarten ist dem, was wir oben in der kostenlosen Version getan haben, sehr ähnlich. Wir filtern woocommerce_product_tabs, aber hier durchlaufen wir jedes wiederholte Element vom Repeater. Wir brauchen eine Möglichkeit, jedes Element im Repeater mit Schlüsseln zu identifizieren, also generieren wir selbst einen Schlüssel, indem wir die Schleifenposition und eine Slug-Version des Tab-Titels verwenden. In der Callback-Funktion extrahieren wir die Schleifenposition aus der Taste und verwenden diese, um auf das Array für unseren Repeater zu verweisen.

Innerhalb unserer Filterfunktion holen wir den Wert des Repeaters und prüfen, ob er nicht leer ist. Dann definieren wir eine Zählervariable, beginnend bei 0 (Arrays beginnen immer mit Position 0), die wir für jedes Element innerhalb der Schleife (in Zeile #18) um 1 erhöhen. In der Schleife für jedes Repeater-Element weisen wir sie alle derselben Callback-Funktion zu. Wir verwenden die WordPress-Funktion [sanitize_title](https://developer.wordpress.org/reference/functions/sanitize_title/)(), um den Tab-Titel in eine Slug-Version davon zu konvertieren und an den Schlüssel anzuhängen.

In unserer Callback-Funktion at line #31 - 32führen wir einige einfache String-Manipulationen durch, um den Zählerwert zu extrahieren (der bei 0 beginnt und für jedes Element um 1 erhöht wird). Wir verwenden dies dann einfach als Index für das Repeater-Array, um das richtige Tab-Inhaltsfeld abzurufen.

Und das ist es! Sie haben jetzt eine unbegrenzte Anzahl von benutzerdefinierten Registerkarten in WooCommerce implementiert!

Denken Sie daran, dass Sie WYSIWYG durch jede Art von Feld ersetzen können. Sie müssen nur ändern, wie Sie das Feld in Zeile ausgeben #23.

Fazit

Das Schreiben Ihres eigenen Codes zum Hinzufügen benutzerdefinierter WooCommerce-Registerkarten ist wirklich einfach, wenn Sie das grundlegende Konzept verstanden haben, wie WooCommerce dies tut. Es erfordert nicht einmal viel Code. Dies ist eine perfekte Lösung für Sie, die nicht in Erweiterungslizenzen investieren möchten oder können oder einfach nur eine einfache Lösung für Ihren Webshop benötigen.