Kodierung für WooCommerce: Eine Einführung

Dies ist eine Einführung für Anfänger in das Plugin WordPress WooCommerce. In diesem Beitrag sehen wir uns die Grundlagen der Funktionsweise von WooCommerce an und wie wir es in unserem Design oder Plugin mithilfe von Hooks und Vorlagen anpassen können.

Zunächst einmal bietet WooCommerce eine große Flexibilität für Theme- und Plugin-Entwickler, um seine Funktionalität anzupassen. Für einfache Modifikationen haben Sie normalerweise mindestens zwei Alternativen, um dies zu tun. Die Wahl, wie Sie Änderungen vornehmen, hängt davon ab, wie Sie arbeiten möchten, wie flexibel und lesbar Ihr Code sein sollte und wie Sie es vorziehen, zukünftige Wartungsarbeiten an Ihrer Website durchzuführen, wenn es um Plugin- (und WordPress-) Updates geht.

Bevor Sie damit beginnen, die Funktionalität von WooCommerce per Code zu modifizieren, sollten Sie prüfen, ob das, was Sie erreichen möchten, durch eine Änderung der Einstellungen möglich ist. WooCommerce wird mit einer riesigen Einstellungsseite geliefert, auf der Sie einiges ändern können. In neueren Versionen hat WooCommerce auch zusätzliche Einstellungen zum WordPress Customizer hinzugefügt und verschoben. Hier können Sie beispielsweise die Anzahl der Spalten anpassen und einige der Checkout-Felder anpassen.

WooCommerce-Vorlagen

WooCommerce bietet eine große Auswahl an Vorlagendateien, die Sie als Theme-Entwickler überschreiben können. Dazu erstellen Sie eine Kopie der ursprünglichen WooCommerce-Vorlage in Ihrem Themenordner. Und dann nehmen Sie Ihre Änderungen an der Datei in Ihrem Design vor.

Navigieren Sie zu Ihrem WooCommerce-Plugin-Ordner in /wp-content/plugins/woocommerce/. Hier finden Sie den Unterordner templates. Der gesamte Inhalt von Dateien (es gibt eine Menge!) /wp-content/plugins/woocommerce/templates/einschließlich ihrer Unterordner sind alles Vorlagendateien, die Sie in Ihrem Design überschreiben können.

Damit WooCommerce Ihre geänderten Vorlagen finden kann, benötigen Sie einen Unterordner in Ihrem Theme-Root-Verzeichnis mit dem Namen woocommerce. Wenn der Slug Ihres Themas „awhitepixel” ist, sollte sich Ihr Ordner unter befinden /wp-content/themes/awhitepixel/woocommerce/. In diesem Ordner können Sie Ihre modifizierten Kopien der Vorlagendateien von WooCommerce ablegen. Denken Sie daran, dass Vorlagendateien, die sich in Unterordnern befinden, in entsprechenden Unterordnern in Ihrem Woocommerce-Ordner abgelegt werden müssen. Zum Beispiel; Um WooCommerce zu überschreiben, /templates/single-product/add-to-cart/simple.phpmüssen Sie Ihre Kopie von simple.phpin /woocommerce/single-product/add-to-cart/Ihrem Designordner ablegen.

Vielleicht ist Ihnen auch aufgefallen, dass es in den Vorlagen viele Aktionen und Filter gibt. Die meisten von ihnen sind mit do_action()s gefüllt. Für eine optimale Nutzung von WooCommerce solltest du keinen der Haken in den Templates entfernen. In den meisten Fällen sollten Sie die Funktionalität ändern, indem Sie Aktionen und Filter verwenden, anstatt Vorlagen zu überschreiben. Lassen Sie mich erklären, warum!

Wichtiger Hinweis zum Überschreiben von Vorlagen und Plugin-Updates

Für einen Anfänger mag das Überschreiben einer Vorlage die einfachste und intuitivste Lösung sein. Warum sich mit Hooks herumschlagen, wenn Sie direkt die Vorlage ändern können, die das ausgibt, was Sie ändern möchten? Antwort: Weil diese Strategie mehr Arbeit für die Aufrechterhaltung der Wartung Ihres Webshops erzeugt.

WooCommerce wird häufig aktualisiert, und manchmal aktualisieren sie eine Vorlagendatei. Um Ihren Webshop auf dem neuesten Stand zu halten, müssten Sie auch die überschriebenen Vorlagendateien in Ihrem Design aktualisieren. Normalerweise müssen Sie die gesamte Vorlagendatei durch die neueste aktualisierte Datei ersetzen und dann Ihre Änderungen erneut hinzufügen. Das wird schnell viel schwieriger, wenn Sie sich nicht an alle vorgenommenen Änderungen erinnern. Glauben Sie mir, der jahrelange Erfahrung darin hat, die WooCommerce-Vorlagendateien anderer Entwickler während Plugin-Updates zu reparieren. Vertrauen Sie mir, es ist kein Spaß Job zu tun!

Nun, da wir wissen, dass Hooks eine bessere Strategie sind, schauen wir uns an, wie man das anstellt.

WooCommerce-Hooks

WooCommerce bietet eine riesige Menge an Hooks, sowohl Aktionen als auch Filter. Die Verwendung von Haken ist eigentlich ganz einfach!

Mit Hooks können Sie auch so viel mehr verändern als nur die Ausgabe der Vorlagen. Sie können Produktpreise und Checkout-Felder anpassen oder Ihren Webshop dazu bringen, etwas zu tun, wenn ein Produkt in den Warenkorb gelegt wird.

Wenn Sie ein Plugin entwickeln, sind Hooks auch der einzige Weg. Sie können Vorlagen nur in einem Design überschreiben, nicht in einem Plugin. (Okay, es gibt Möglichkeiten, dies zu überwinden, aber es ist sehr ungewöhnlich und wird nicht empfohlen).

Wenn Sie sich einige der WooCommerce-Vorlagendateien angesehen haben, sollten Sie viele do_action(). Dies sind Haken; Prüfpunkte, in die Sie sich einklinken und Ihren Code hinzufügen oder eine Variable ändern können. Wenn Sie sich nicht sicher sind, wie Hooks funktionieren, habe ich einen Beitrag, der dies ausführlich erklärt.

Wenn Sie etwas ausgeben möchten, zB einen Text oder ähnliches, suchen Sie nach Aktionen (do_action()). Wenn Sie beispielsweise etwas in der Warenkorbvorlage ausgeben, haben Sie die Wahl, sich an woocommerce_before_cart, woocommerce_before_cart_table, woocommerce_before_cart_contents, woocommerce_cart_contents, woocommerce_cart_actions, woocommerce_after_cart_contents, woocommerce_after_cart_table, woocommerce_cart_collaterals, oder anzuhängen woocommerce_after_cart. Wählen Sie einfach diejenige aus, die dort positioniert ist, wo Sie Ihre Ausgabe haben möchten. Dies ist ein Beispiel für die Anzeige eines Textes vor der Tabelle und dem Formular auf der Warenkorbseite:

add_action('woocommerce_before_cart', function() {
    _e('Here are the products you have added in the cart so far', 'textdomain');
});

Filter (suchen Sie nach apply_filters()) dienen zum Ändern einer Ausgabe oder einer Variablen. Eine häufige Verwendung von Filtern in WooCommerce ist das Ändern des Textes „In den Warenkorb” auf den Kaufschaltflächen. WooCommerce bietet dafür mehrere Filter, mit denen Sie den Text auf verschiedenen Seiten steuern können. Sie können beispielsweise den Text in der Shop-Schleife oder anpassen in der Einzelproduktansicht. Filter liefern oft mehrere Argumente zur weiteren Steuerung, zum Beispiel das Produktobjekt. Hier ist ein einfaches Beispiel, wie Sie die „In den Warenkorb”-Texte in der Einzelproduktansicht ändern können:

add_filter('woocommerce_product_single_add_to_cart_text', function($original_text, $product) {
    return __('Buy this', 'textdomain');
}, 10, 2);

Mit etwas Wissen darüber, wie Hooks funktionieren, und wenn Sie einfach in die Vorlagendateien schauen, finden Sie eine Menge leicht änderbarer Funktionen. Offensichtlich bietet WooCommerce viel fortgeschrittenere Modifikationen, Preisänderungen, Zahlungsmethoden, Produktmodifikationen oder Importe, die alle mit der Verwendung von Hooks möglich sind.

Fazit

Der Zweck dieses Beitrags ist es, dem Anfänger die Grundlagen zu vermitteln, wie man Änderungen an WooCommerce vornimmt, und die Konsequenzen, wie man die Änderungen vornimmt. Ich empfehle immer, Hooks zu verwenden, um Vorlagendateien zu überschreiben, es sei denn, es ist absolut notwendig.

Der nächste Schritt ist das Eintauchen in fortgeschrittene Modifikationen, indem Sie die Hooks, Prozesse und Objekte in WooCommerce kennenlernen. Da WooCommerce die beliebteste E-Commerce-Plattform ist, gibt es im Internet viele Ressourcen und Codebeispiele. Schauen Sie sich auch die Kategorie Woocommerce hier auf dieser Seite an, um mehr zu erfahren.