WooCommerce anpassen: Hinzufügen benutzerdefinierter Felder zu Ihren einfachen Produkten

Vielleicht erstellen Sie Ihre E-Commerce-Website von Grund auf neu und möchten verschiedene Produkte verkaufen. Vielleicht betreiben Sie bereits seit einigen Jahren einen Onlineshop und möchten Ihren Horizont erweitern und neue Produkte anbieten. Was auch immer Sie zu diesem Tutorial geführt hat: Fakt ist: Sie müssen WooCommerce anpassen. Und alles, was Sie dazu wissen müssen, finden Sie bei Bright Vessel!

WooCommerce ist am beliebtesten WordPress-Plugin für E-Commerce und die bevorzugte Lösung vieler Verkäufer. Warum? Es ist kostenlos und zudem äußerst vielseitig, da WooCommerce sich mühelos an Ihre Bedürfnisse anpassen lässt. Das Plugin bietet zwar eine Reihe von festen Optionen, aber auch im Hintergrund können Sie vieles tun.

Viele unserer Kunden bei Bright Vessel suchen nach einer einzigartigen E-Commerce-Lösung, die die Besonderheiten ihres spezifischen Geschäfts berücksichtigt. Dank unserer langjährigen Erfahrung mit WooCommerce unterstützen wir Sie bei der Einrichtung Ihres E-Stores nach Ihren Bedürfnissen. In diesem Sinne: Los geht‘s!

Was Sie brauchen WooCommerce anpassen

Nachfolgend finden Sie die grundlegenden Einstellungen, die Sie zum Anpassen von WooCommerce benötigen:

• Ihr bevorzugtes Desktop-Betriebssystem, sei es MacOS, Microsoft Windows, Linux-Distributionen usw.
• Hypertext Preprocessor (PHP) mindestens 5.6.25.
• HTTP-Server Apache oder Nginx.
• MySQL 5.6.33.
• Ein aktualisiertes WordPress oder zumindest Version 4.7.
• Das WooCommerce-Plugin liegt mindestens in der Version 3.9 vor.
• Die integrierte Entwicklungsumgebung (IDE) Ihrer Wahl.

Passen Sie WooCommerce an, um personalisierte Felder hinzuzufügen

Allerdings unterscheiden sich benutzerdefinierte Felder in WooCommerce etwas von denen in WordPress. Anstatt mit Metadaten in Beiträgen zu arbeiten, wie WordPress dies definiert, bezeichnen wir „benutzerdefinierte Felder“ als echte Textfelder. Gehen Sie im WooCommerce-Menü zum Reiter „Verknüpfte Produkte“ des Typs „Einfache Produkte“.

WooCommerce API - Hooks

Es gibt ein wichtiges WordPress-Konzept, das wir aus dem Weg räumen müssen, bevor wir uns mit der Anpassung von WooCommerce befassen: Hooks. Laut WPBeginner Hooks sind „Funktionen, die auf eine Aktion oder einen Filter in WordPress anwendbar sind. Aktionen und Filter in WordPress sind Funktionen, die von Theme- und Plugin-Entwicklern geändert werden können, um die Standardfunktionalität von WordPress zu ändern.“

WooCommerce bietet eine API, die es Benutzern ermöglicht, sich in die Lebenszyklen ihrer Seiten einzuklinken. Die WooCommerce-API unterscheidet sich jedoch etwas von der WordPress-Metadaten-API. Es gibt zwei Hauptanbindungen, die Sie kennen sollten:

• Woocommerce_product_options_grouping. Dieser Hook dient dazu, eine Beschreibung sowie eine Texteingabe zu erstellen, die unsere Werte akzeptiert.
• woocommerce_process_product_meta. Diese Funktion dient zum Verarbeiten, Bereinigen und Speichern des Werts der Texteingabe.

Um diese Hooks zu verwenden, müssen Sie sie definieren und ihre Funktionalität anpassen.

Anpassen der Funktionalität

• Definieren Sie eine Klasse mit einer Variable „seit“ als Instanzdaten. Diese Variable stellt die ID des Eingabefelds dar, wie sie dem Benutzer angezeigt wird:

Sie können jetzt die oben genannten Hooks verwenden, indem Sie eine Initialisierungsfunktion hinzufügen, die zwei benutzerdefinierte Funktionen am Hook registriert.

Texteingabefeld

Um ein Text-Eingabefeld hinzuzufügen, sollten Sie zuerst eine Funktion hinzufügen, die an woocommerce_product_options_grouping angehängt ist:

Um die Funktion zu implementieren, sollten Sie:

• Erstellen Sie eine eindeutige ID zur Identifizierung des Textfelds. Verwenden Sie die Instanzdaten im Konstruktor.
• Verwenden Sie ein Label, um dem Eingabefeld eine Beschreibung hinzuzufügen.
• Wenn Sie möchten, können Sie einen Platzhalter angeben.
• Wenn es die Sache komfortabler macht, können Sie einen Tooltip anzeigen, wenn der Benutzer mit der Maus über ein Symbol fährt.
• Um dem Tooltip Text hinzuzufügen, können Sie die Option für eine Beschreibung verwenden.

Die oben genannten Informationen werden in einem zugehörigen Array gespeichert und erreichen dann woocommerce_wp_text_input. Diese API-Funktion zum Anpassen von WooCommerce gibt ein Textelement mit den von Ihnen bereitgestellten Informationen aus.

Informationen speichern

Um die oben genannten Änderungen zu speichern, müssen Sie:

• Fügen Sie in der Init-Methode diesen Code hinzu:
• Überprüfen Sie, ob mehrere Nonce-Werte vorhanden sind. Andernfalls sollten Sie aus Sicherheitsgründen „false“ zurückgeben. Sie können Nonce-Werte erkennen, indem Sie sich ansehen, was WooCommerce speziell im Quellcode bereitstellt.
• Bereinigen Sie die Daten in der $_POST-Sammlung, die der Benutzereingabe entspricht.
• Speichern Sie die zuvor aufgezeichneten Informationen in der Metadatentabelle des Beitrags.

Rendern von Informationen im Front-End

Um Informationen im Front-End darzustellen, müssen Sie eine neue Klasse erstellen. Sie benötigen insbesondere:

Eine Textfeld-ID und deren Initialisierung im Konstruktor.

• Eine Initialisierungsfunktion zum Anbinden des Frontends an den zuvor erstellten Code.
• Um den wahren Wert wiederzugeben.

Starten des Plugins

Sie sind mit diesem Tutorial zur Anpassung von WooCommerce fast fertig! Der letzte Schritt ist das Einrichten einer Bootstrap-Datei, um das Plugin mit allen aktuellen Änderungen zu starten. Hier ist der Code zum Starten:

Ein paar zusätzliche Anmerkungen:

• Hier fügen Sie die Abhängigkeiten ein.
• Sobald die Funktion funktioniert, prüfen Sie, ob das Dashboard angezeigt wird. Ist dies der Fall, wird der richtige Teil des Plugins korrekt geladen; andernfalls wird die Standardanzeige angezeigt.

Abschließend

Jetzt, da Sie wissen, wie Sie WooCommerce anpassen, um Ihre Felder zu einfachen Produkten hinzuzufügen, sind Sie auf dem besten Weg, genau die Dienste anzubieten, die Sie anbieten möchten. Weitere Informationen finden Sie WooCommerce-Tutorials auf unserem Blog. Wenn Sie Experten suchen, die wissen, wie man mit diesem beliebten E-Commerce-Plugin umgeht, Kontakt für weitere Informationen!