So fügen Sie benutzerdefinierten Code zu WooCommerce hinzu

Das Einrichten von Code-Snippets und das Konfigurieren von WooCommerce-Dateien kann für Anfänger verwirrend sein. Darüber hinaus können Fehler mit diesen Dateien schreckliche Folgen haben und sogar Ihre Website zum Absturz bringen. Aus diesem Grund zeigen wir Ihnen in diesem Leitfaden verschiedene Methoden zum Hinzufügen von benutzerdefiniertem Code zu WooCommerce .

Wir haben bereits gesehen, wie Sie Ihren Shop manuell anpassen können. Egal, ob es sich um Ihre Shop-Seite, Mein Konto-Seite, Warenkorb-Seite oder Produktseiten handelt, Sie können sie manuell anpassen, indem Sie benutzerdefinierten Code hinzufügen. Sie können auch Code verwenden, um verschiedene Elemente von WooCommerce zu konfigurieren, um das Einkaufserlebnis zu personalisieren und sich von Ihren Mitbewerbern abzuheben. All dies erfordert das Hinzufügen von Code-Snippets zu Ihrer Website.

Bevor wir uns die verschiedenen Methoden dazu ansehen, sehen wir uns einige der Hauptvorteile an, wenn Sie lernen, wie Sie benutzerdefinierten Code hinzufügen.

Warum Code in WooCommerce hinzufügen und anpassen?

Eines der Hauptmerkmale von WooCommerce ist seine Anpassbarkeit. Mit seinen bereits vielfältigen und flexiblen Optionen sowie verschiedenen verfügbaren Plugins und Add-Ons zeichnet sich WooCommerce als eine der am besten anpassbaren E-Commerce-Plattformen aus. Es gibt jedoch mehrere Anforderungen, die Sie befolgen müssen, um benutzerdefinierten Code hinzuzufügen.

Unabhängig davon, ob Sie den Text „Zur Kasse gehen“ ändern, die Schaltfläche „ Zum Warenkorb hinzufügen“ entfernen oder das Erscheinungsbild Ihrer Website ändern möchten, Sie müssen benutzerdefinierte Funktionen verwenden und WooCommerce-Hooks verwenden. Entwickler und alle, die mit Programmierkenntnissen vertraut sind, wissen, wie wichtig es ist, Snippets auf die richtige Weise hinzufügen zu können. Auf diese Weise können Sie Ihren Shop nicht nur bearbeiten, sondern ihm auch Funktionen hinzufügen. Die gute Nachricht ist, dass die Open-Source-Natur von WooCommerce und WordPress es zu einem viel zugänglicheren Prozess macht.

WooCommerce unterstützt seine Benutzer voll und ganz darin, seinen Code anzupassen, obwohl dieser Prozess das Bearbeiten von Kerndateien beinhaltet, was einige Risiken birgt.

Wir haben bereits viele Anleitungen zum Konfigurieren verschiedener Elemente und Dateien mit Code-Snippets gesehen. Dieses Mal konzentrieren wir uns auf den ersten Teil dieses Prozesses und sehen verschiedene Methoden, um benutzerdefinierten Code richtig zu WooCommerce hinzuzufügen .

So fügen Sie benutzerdefinierten Code zu WooCommerce hinzu

Es gibt verschiedene Möglichkeiten, Code-Snippets zu WooCommerce hinzuzufügen :

1. Mit dem eingebauten WordPress-Theme-Editor
2. Verwendung eines speziellen Plugins
3. Verwendung von FTP für den Zugriff auf Designdateien
4. Durch Konfigurieren von WooCommerce-Vorlagendateien
5. Indem Sie ein neues benutzerdefiniertes Plugin erstellen

Sehen wir uns die einzelnen Methoden Schritt für Schritt an.

HINWEIS : Alle diese Methoden erfordern die Bearbeitung von Core-Dateien, was einige Risiken birgt. Aus diesem Grund ist es eine gute Idee, Ihre Website zu sichern, bevor Sie beginnen.

1) Fügen Sie Benutzerdefiniert mit dem integrierten WordPress-Editor hinzu

Die Standardmethode zum Hinzufügen von benutzerdefiniertem Code zu WooCommerce ist die Verwendung des integrierten Design-Editors. Sie können auf die functions.php zugreifen und direkt PHP-Code hinzufügen. Wenn sich jedoch Fehler im Code befinden oder Sie Teile des Codes löschen, kann Ihre Website ernsthaft beeinträchtigt werden. Aus diesem Grund empfehlen wir die Verwendung eines untergeordneten Themas und das Hinzufügen einer zusätzlichen Sicherheitsebene.

Um die Datei functions.php in Ihrem Design-Editor zu öffnen, gehen Sie in Ihrem Dashboard zu Darstellung > Design -Editor . Klicken Sie dann rechts in der Seitenleiste der Designdateien auf functions.php .

Hinzufügen von benutzerdefiniertem Code zur Datei functions.php

Jetzt können Sie aus dem Design-Editor benutzerdefinierten Code zu WooCommerce hinzufügen. Für diese Demo ändern wir den Standardtext „Keine Produkte im Warenkorb“ in „Ihr Warenkorb ist derzeit leer, wir empfehlen Ihnen, sich unsere vorgestellten Produkte anzusehen!“:

 remove_action( 'woocommerce_cart_is_empty', 'wc_empty_cart_message', 10 );
add_action( 'woocommerce_cart_is_empty', 'quadlayers_empty_cart_message', 10 );

Funktion quadlayers_empty_cart_message() {
$html = '<div class="col-12 offset-md-1 col-md-10"><p class="cart-empty">';
$html .= wp_kses_post( apply_filters( 'wc_empty_cart_message', __( 'Ihr Warenkorb ist derzeit leer, wir empfehlen Ihnen, sich unsere vorgestellten Produkte anzusehen!', 'woocommerce' ) ) );
echo $html . '</p></div>';
}

Fügen Sie dieses Skript einfach in Ihren Design-Editor ein und aktualisieren Sie die Datei , um die Änderungen zu übernehmen.

Schauen Sie sich das Frontend an und Sie sollten so etwas sehen:

Das Hinzufügen des Codes ist eine Sache, aber es ist auch wichtig zu verstehen, wie der Code funktioniert.

Der obige Code fügt einen benutzerdefinierten WooCommerce-Hook hinzu, der eine bestimmte Aktion anwendet, um die Standardnachricht „Leerer Warenkorb“ durch eine benutzerdefinierte Nachricht zu ersetzen, die wir dem Code hinzugefügt haben. Um den Text zu ändern, ersetzen Sie einfach die Textnachricht in dieser Zeile:

 $html .= wp_kses_post( apply_filters( 'wc_empty_cart_message', __( 'Ihr Warenkorb ist derzeit leer, wir empfehlen Ihnen, sich unsere vorgestellten Produkte anzusehen!', 'woocommerce' ) ) );

Wenn Sie mehr über das Anpassen Ihrer Nachricht „ Keine Produkte im Warenkorb “ erfahren und das Beste daraus machen möchten, lesen Sie diese vollständige Anleitung.

Wie bereits erwähnt, ist das Hinzufügen von Code auf diese Weise schnell und einfach, birgt jedoch eine ganze Reihe von Risiken. Beispielsweise kann die Verwendung des falschen Codes Ihre Website beschädigen oder zum Absturz bringen. Darüber hinaus können Kompatibilitätsprobleme mit Ihrem benutzerdefinierten Code auftreten, die sich auf einige Funktionen, Plugins oder Designs auswirken können. Wenn Sie außerdem Ihren Code zur function.php des übergeordneten Designs hinzufügen und dann Ihr Design ändern oder aktualisieren, können Sie den von Ihnen hinzugefügten benutzerdefinierten Code verlieren.

Aus diesem Grund empfehlen wir Anfängern, die zweite Methode auszuprobieren und Plugins zu verwenden, um benutzerdefinierten Code zu WooCommerce hinzuzufügen.

2) Code mit Plugins hinzufügen

Die Verwendung eines Plugins ist anfängerfreundlicher, wenn es um das Hinzufügen von Snippets geht. Sie können einfach steuern, welche Code-Bits Sie auf Ihrer Website aktivieren, und jeder Code, den Sie hinzufügen, wird gespeichert, selbst wenn Sie Ihr Design ändern. Außerdem können Sie jeden Code jederzeit aktivieren oder deaktivieren.

Für unsere Demo verwenden wir das Code Snippets-Plugin. Es ist eines der beliebtesten Plugins, um jeder Website benutzerdefinierten Code hinzuzufügen.

Installieren Sie zuerst das Plugin, indem Sie Ihr WP Admin Dashboard öffnen und zu Plugins > Add New gehen. Verwenden Sie die Suchleiste oben rechts und suchen Sie nach Code Snippets . Klicken Sie dann auf Installieren und aktivieren Sie schließlich das Plugin.

Nach der Aktivierung können Sie Code hinzufügen und Ihren WooCommerce-Shop anpassen. Gehen Sie zu Snippets > Neu hinzufügen, um neuen Code hinzuzufügen.

Benennen Sie Ihr Code-Snippet und fügen Sie Ihren Code dem Abschnitt „ Code “ hinzu. Für die Demo verwenden wir den folgenden Code, um die Schaltfläche „Zum Warenkorb hinzufügen“ auszublenden.

 remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 ); 

Danach können Sie entscheiden, ob Sie den Code auf Ihrer gesamten Website ausführen möchten oder ob Sie ihn nur im Backend oder nur im Frontend ausführen möchten. Alternativ können Sie diesen Code nur einmal ausführen.

Ebenso können Sie auch eine Priorität für Ihren Code festlegen und eine Snippet-Beschreibung sowie Tags hinzufügen.

Nachdem Sie alle Details eingerichtet haben, klicken Sie auf Änderungen speichern oder Änderungen speichern und aktivieren , um Ihren neuen Code hinzuzufügen.

Wenn Sie Ihren Code einzeln deaktivieren oder aktivieren möchten, gehen Sie zu Snippets > Alle Snippets und Sie können jedes Ihrer Snippets einzeln deaktivieren oder aktivieren.

3) Fügen Sie benutzerdefinierten Code mit einem FTP-Client hinzu

Wenn Ihnen nicht alle diese Optionen zur Verfügung stehen und Sie benutzerdefinierten Code manuell zu Ihrem WooCommerce-Shop hinzufügen müssen, müssen Sie dazu möglicherweise einen FTP-Client verwenden . Es gibt mehrere Tools, aber für dieses Tutorial verwenden wir FileZilla.

HINWEIS : Wir empfehlen diese Methode NICHT, wenn Sie es nicht gewohnt sind, einen FTP-Client zu verwenden oder Ihren Server und seine Dateien zu konfigurieren. Darüber hinaus kann dies den Zugriff auf Ihr cPanel und FTP erfordern. Das Durcheinander dieser Dateien kann schwerwiegende Auswirkungen auf Ihre Website haben, daher empfehlen wir Ihnen dringend, sich an die oben genannten Methoden zu halten, wenn Sie weniger Risiko beim Hinzufügen von benutzerdefiniertem Code zu Ihrer Website eingehen möchten.

Öffnen Sie zunächst FileZilla oder Ihren bevorzugten FTP-Client und verbinden Sie ihn mit Ihrer Website. Suchen Sie dann Ihre Designdateien im Verzeichnis Ihrer Website. Diese befinden sich normalerweise im Verzeichnis /wp-content/themes auf deinem Server. Klicken Sie auf den Ordner Ihres aktuellen Designs oder des untergeordneten Designs, das Sie möglicherweise konfigurieren.

Öffnen Sie den Ordner Ihres Designs, klicken Sie mit der rechten Maustaste auf die darin enthaltene Datei functions.php und drücken Sie dann Anzeigen/Bearbeiten.

Hier können Sie mit dem Dateieditor den Code am Ende der Datei einfügen und speichern. Dazu verwenden wir denselben Code wie oben, um die Schaltfläche „In den Warenkorb“ auszublenden:

 remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart'); 

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 ); 

Eine weitere interessante Alternative zum Hinzufügen von Code ist das Anpassen von WooCommerce-Vorlagendateien.

4) Fügen Sie Code hinzu, indem Sie die WooCommerce-Vorlagendateien anpassen

Das Bearbeiten von Vorlagen ist eine der schnellsten Möglichkeiten, alle Elemente Ihres WooCommerce-Shops und alle seine Seiten zu konfigurieren. Dazu gehören Ihre Checkout-Seite, Produktseite, Shop-Seite und viele andere.

Die gute Nachricht ist, dass Sie die WooCommerce-Vorlagendateien ähnlich wie oben bearbeiten können, indem Sie den integrierten WordPress-Plugin-Editor verwenden. Um darauf zuzugreifen, gehen Sie in Ihrem Admin-Dashboard zu Plugins > Plugin-Editor .

Verwenden Sie dann das Dropdown- Menü Select Plugins oben rechts, wählen Sie WooCommerce und klicken Sie auf Select.

Dadurch wird die Liste der Plugin-Dateien unten aktualisiert, die Sie zum Konfigurieren von WooCommerce-Dateien und -Vorlagen verwenden können. Für unsere Demo bearbeiten wir die Danke-Seite der Kasse . Wählen Sie also in der Liste der Plugin-Dateien die Option Checkout > thankyou.php aus .

Scrollen Sie dann nach unten und ändern Sie den Text „ Bestellung erhalten “, indem Sie den Text in dieser Zeile ersetzen:

 <p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Danke. Ihre Bestellung ist eingegangen.', 'woocommerce' ), Null ); // phpcs: WordPress.Security.EscapeOutput.OutputNotEscaped ignorieren ?></p>

Ändern Sie beispielsweise die Nachricht „ Bestellung erhalten “ in etwas wie „Danke, dass Sie bei uns gekauft haben. Sie erhalten in Kürze die E-Mail mit den Anweisungen.”, fügen Sie diesen Code ein:

 <p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Danke, dass Sie bei uns gekauft haben. Sie erhalten in Kürze eine E-Mail bzgl die Anleitung..', 'woocommerce' ), null ); // phpcs: WordPress.Security.EscapeOutput.OutputNotEscaped ignorieren ?></p> 

Hier haben wir nur den Hook-Text aktualisiert, damit er unseren Bedürfnissen besser entspricht. Wenn Sie mit den Änderungen zufrieden sind, klicken Sie auf Datei aktualisieren .

Wenn Sie mehr über das Konfigurieren von Vorlagendateien erfahren möchten, lesen Sie unseren Leitfaden zum Anpassen von WooCommerce-Vorlagendateien.

5) Fügen Sie Code hinzu, indem Sie ein neues benutzerdefiniertes Plugin erstellen

Das Erstellen eines völlig neuen Plugins ist auch eine Option, wenn es darum geht, benutzerdefinierte Codes zu WooCommerce hinzuzufügen. Dies ist eine etwas fortgeschrittenere Benutzeroption und wir empfehlen Ihnen, diese Methode nur zu verwenden, wenn Sie eine bestimmte Funktion an ein eigenständiges Plugin anhängen möchten. Auf diese Weise können Sie das Plugin immer dann aktivieren/deaktivieren , wenn eine bestimmte Funktion benötigt oder nicht benötigt wird.

Darüber hinaus kann dies eine großartige Lösung sein, wenn Sie auch mehrere Websites verwalten müssen. Sie können den Websites mit dem Plugin einfach eine Funktion hinzufügen, anstatt den Code manuell hinzuzufügen.

Darüber hinaus macht es WordPress selbst recht einfach, neue Plugins zu erstellen und zu verwenden. Alles, was Sie tun müssen, ist einfach einen neuen Plugin-Ordner im Verzeichnis Ihrer Website zu erstellen und ein paar Codes zu seiner PHP-Datei hinzuzufügen. Zunächst müssen Sie sich zuerst über FTP mit Ihrer Website verbinden. Wir werden Filezilla für unseren Leitfaden verwenden, aber der Prozess sollte für jeden anderen FTP-Client ähnlich sein.

Bevor Sie beginnen, empfehlen wir Ihnen jedoch dringend, Ihre Website zu sichern.

Erstellen eines neuen Plugin-Ordners zum Hinzufügen von benutzerdefiniertem Code zu WooCommerce

Nachdem Sie Ihre Website mit dem FTP verbunden haben, öffnen Sie den Director Ihrer Website. Navigieren Sie dann zu Ihrem Ordner /wp-content/plugins .

Erstellen Sie nun ein neues Verzeichnis im Plugins-Ordner und benennen Sie es gemäß Ihrem Code und erweitern Sie es. Für unsere Demo nennen wir es Remove-Add-To-Cart .

Klicken Sie dann mit der rechten Maustaste auf den Ordner, um auf Neue Datei erstellen zu klicken. Hier müssen Sie eine .php-Datei mit demselben Namen wie Ihr Ordner erstellen. Also nennen wir unsere Datei Remove-Add-to-Cart.php.

Sobald die Datei erstellt ist, fahren Sie fort und öffnen Sie sie, indem Sie mit der rechten Maustaste darauf klicken und auf Anzeigen/Bearbeiten klicken.

Als Nächstes fügen wir ein paar Codezeilen hinzu, um den Plugin-Namen, die Beschreibung und den Namen des Autors hinzuzufügen:

 <?php
/**
* Plugin-Name: In den Warenkorb entfernen
* Beschreibung: Hinzufügen eines Plugins zum Entfernen und Hinzufügen zum Einkaufswagen
* Autor: Sijal Shrestha
* Version: 1.0
*/

/* Fügen Sie Ihre Schnipsel hier unten ein. */
/* Fügen Sie Ihre Schnipsel hier oben ein. */
?> 

Hinzufügen von benutzerdefiniertem Code zum neuen Plugin

Jetzt können Sie damit beginnen, Ihren benutzerdefinierten Code zum Plugin hinzuzufügen. Sie müssen Ihren benutzerdefinierten Code zwischen dem Abschnitt /*Put your snippets here */ einfügen. Zur Erinnerung: Diese Zeilen sind einfach Kommentare, sodass sie Ihren Code nicht beeinflussen und Sie sie entfernen können, wenn Sie möchten.

 <?php
/**
* Plugin-Name: In den Warenkorb entfernen
* Beschreibung: Hinzufügen eines Plugins zum Entfernen und Hinzufügen zum Einkaufswagen
* Autor: Sijal Shrestha
* Version: 1.0
*/

/* Fügen Sie Ihre Schnipsel hier unten ein. */

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
/* Fügen Sie Ihre Schnipsel hier oben ein. */
?> 

Speichern Sie als Nächstes Ihre Datei und Sie sollten sehen, dass das Plugin in Ihrem WP Admin Dashboard unter der Plugins -Seite aufgeführt ist.

Aktivieren Sie das Plugin und Ihr benutzerdefinierter Code sollte perfekt laufen. Sie können den Plugin-Ordner auch zippen, wenn Sie möchten, und ihn verwenden, um ihn auf verschiedenen Websites zu installieren. Laden Sie den Ordner einfach von Ihrem FTP-Client herunter und komprimieren Sie den Ordner.

Dann können Sie diese ZIP-Datei verwenden, um Ihr Plugin auf jeder Website zu installieren. Wenn Sie weitere Hilfe benötigen, haben wir auch eine detaillierte Anleitung zur manuellen Installation eines WordPress-Plugins.

Welche Methode sollten Sie verwenden, um benutzerdefinierten Code hinzuzufügen?

Wir haben verschiedene Methoden gesehen, aber welche ist die beste, um Snippets hinzuzufügen? Während die Verwendung eines FTP-Clients und der manuelle Zugriff auf Ihre Dateien recht schnell und einfach sein können, kann das Hinzufügen von benutzerdefinierten Codes auf diese Weise erhebliche Risiken mit sich bringen. Um Risiken zu minimieren, empfehlen wir daher, stattdessen ein dediziertes Plug-in für benutzerdefinierten Code zu verwenden, insbesondere wenn Sie nicht über fortgeschrittene Programmierkenntnisse verfügen.

Diese Methode ist viel weniger riskant und kann zusätzliche Vorteile haben, wie zum Beispiel:

• In der Lage sein, verschiedene Codes zu verfolgen und sie zu aktivieren/deaktivieren, wann immer Sie möchten
• Fügen Sie widersprüchlichen Code hinzu und aktivieren/deaktivieren Sie ihn bei Bedarf alternativ
• Prüfung auf Kompatibilität mit dem Thema/den Installationen
• Einfacheres Debuggen und Beheben von Problemen

Die Verwendung eines speziellen Plugins zum Hinzufügen von benutzerdefiniertem Code zu WooCommerce bietet Ihnen eine einfache Möglichkeit, Ihre Hooks zu konfigurieren und gleichzeitig mögliche Probleme zu minimieren. Wenn Sie jedoch sicherstellen möchten, dass Ihr neu hinzugefügter Code keine Probleme verursacht oder Ihre Website zum Absturz bringt, empfehlen wir Ihnen, sich die folgenden Tipps anzusehen.

Best Practices beim Hinzufügen von benutzerdefiniertem Code zu WooCommerce

1) Untergeordnete Themen verwenden

Die Verwendung eines untergeordneten Designs ist eines der ersten Dinge, die wir empfehlen, wenn Sie benutzerdefinierten Code zu Ihrer Datei functions.php hinzufügen möchten. Unabhängig davon, welchen Code Sie bearbeiten oder hinzufügen, stellen Sie mit einem untergeordneten Design sicher, dass Sie alle Änderungen jederzeit rückgängig machen können, ohne Ihre zentralen Designdateien zu ändern .

Darüber hinaus ist es wichtig, bei Codeänderungen und dem Modifizieren von Stylesheets zu beachten, dass Sie alle Änderungen verlieren könnten , wenn Sie Ihr WordPress-Theme aktualisieren würden. Dies liegt daran, dass Ihre funcitons.php -Datei mit einem Design-Update überschrieben wird und Ihren gesamten benutzerdefinierten Code entfernt. Aus diesem Grund wird das Hinzufügen von Code zum übergeordneten Design nicht empfohlen.

Mit einem Child-Theme stellst du sicher, dass du deine Anpassung auch nach der Aktualisierung deines Parent-Themes nicht verlierst. Wenn Ihr Design kaputt geht, können Sie Ihre Änderungen jederzeit rückgängig machen und von vorne beginnen.

Sie können entweder programmgesteuert ein untergeordnetes Thema erstellen oder ein dediziertes Plugin verwenden. In diesem Abschnitt zeigen wir Ihnen, wie Sie ein untergeordnetes Thema mit einem Plugin erstellen, da dies ein einfacherer Prozess ist.

Erstellen eines Child-Themes mit einem Plugin

Das Erstellen eines untergeordneten Designs mit einem Plugin ist ein unkomplizierter und anfängerfreundlicher Prozess. Es gibt viele Plugins, die Sie verwenden können. Für diese Demo verwenden wir den Child Theme Wizard .

Öffnen Sie zuerst Ihr WP Admin Dashboard und gehen Sie zu Plugins > Add new . Verwenden Sie dann das Suchmenü oben rechts, um nach Child Theme Wizard zu suchen. Klicken Sie auf Installieren und dann auf Aktivieren , sobald die Schaltfläche wechselt.

Sie können dann auf die Funktionen des Plugins zugreifen, indem Sie auf Tools > Child Theme Wizard klicken.

Um ein neues Child-Theme zu erstellen, verwenden Sie das Parent-Theme-Feld , um das Theme auszuwählen, für das Sie ein Child-Theme erstellen möchten. Für unsere Demo verwenden wir das Storefront -Design.

Fügen Sie dann Details wie Titel, Beschreibung, URL und mehr hinzu. Wenn Sie fertig sind, klicken Sie auf Untergeordnetes Thema erstellen und Sie sollten fertig sein.

Wechseln Sie nun zu Ihrem untergeordneten Design, indem Sie in Ihrer Seitenleiste zu Darstellung > Designs navigieren und bei Ihrem neu erstellten untergeordneten Design auf Aktivieren klicken.

Das ist es! Jetzt können Sie Ihren benutzerdefinierten Code frei zu Ihrer function.php -Datei unter dem neu erstellten Child-Theme hinzufügen.

2) Verwenden von WordPress Backup-Plugins und Einrichten von Backups

Eines der wichtigsten Dinge, die Sie tun müssen, wenn Sie eine WordPress/WooCommerce-Datei ändern oder eine der Dateien in Ihrer Installation ändern, ist das Einrichten von Backups. Obwohl WooCommerce recht flexibel ist, kann inkompatibler oder fehlerhafter Code schwerwiegende Probleme verursachen.

In einigen Fällen kann es zum Absturz oder sogar zum Ausfall Ihrer Website kommen und Ausfallzeiten für Ihr WooCommerce-Geschäft verursachen. Aus diesem Grund empfehlen wir dringend, regelmäßige Backups zu erstellen. Denken Sie also daran, vor dem Hinzufügen von benutzerdefiniertem Code zu Ihrer Website ein Backup zu erstellen, auf das Sie zurückgreifen können, falls etwas schief geht.

Weitere Informationen dazu finden Sie in unserem speziellen Leitfaden zum Erstellen von Backups in WordPress.

3) Lernen, wie der Code funktioniert und wie WooCommerce-Hooks und -Funktionen verwendet werden

Der Großteil des benutzerdefinierten Codes für WooComerce verwendet Hooks , um bestimmte Aktionen auszuführen oder bestimmte Elemente zu ändern. Aus diesem Grund ist es eine gute Idee, sich vor dem benutzerdefinierten Code mit der Funktionsweise dieser Filter und ihrer Anwendung auf Ihrer Website vertraut zu machen. Dies verhindert nicht nur, dass Sie einen unvollständigen oder fehlerhaften Code verwenden, sondern stellt auch sicher, dass Sie ihn anpassen können, damit er besser für Ihre Bedürfnisse funktioniert.

Schauen wir uns zum Beispiel dieses Snippet an, das den Kauf deaktiviert, wenn Sie nicht eingeloggt sind:

 add_action( 'woocommerce_before_single_product', 'quadlayers_add_message');
add_filter( 'woocommerce_is_purchasable', 'quadlayers_block_admin_purchase' );
Funktion quadlayers_block_admin_purchase($block) {
Wenn ( is_user_logged_in() ): true zurückgeben;
sonst: false zurückgeben;
endif;
}

Funktion quadlayers_add_message( ){
if ( !is_user_logged_in() ):echo '<H2>BITTE ANMELDEN, UM DIESES PRODUKT ZU KAUFEN</h2>';
endif;
}

So funktionieren die WooCommerce-Hooks hier:

• Der Action- Hook wird verwendet, um eine Nachricht mit der Funktion QuadLayers_add_message zu drucken, während der Filter-Hook die Funktion quadlayers_block_admin_purchase verwendet, um die Schaltfläche „Zum Warenkorb hinzufügen“ zu deaktivieren
• In beiden Funktionen wird eine IF- Anweisung verwendet, um zu prüfen, ob der Benutzer angemeldet ist oder nicht
• Der Hook woocommerce_is_purchasable wird angewendet, wenn die bedingte IF-Anweisung wahr zurückgibt
• Wir haben auch zusätzliches CSS angewendet, um den Textstil der Nachricht zu ändern und benutzerdefinierte Farben hinzuzufügen

Lassen Sie uns fortfahren und dies der function.php -Datei unseres untergeordneten Designs hinzufügen:

Dies gibt uns dieses Ergebnis am Frontend:

Wenn Sie erfahren möchten, wie benutzerdefinierter WooCommerce-Code funktioniert, lesen Sie unseren Leitfaden zur Verwendung von WC-Hooks.

Fazit

Zusammenfassend lässt sich sagen, dass das Erlernen des Hinzufügens von benutzerdefiniertem Code zu WooCommerce ein wesentlicher Bestandteil der Anpassung Ihres Shop-Erlebnisses sein kann. Je mehr Dinge Sie anpassen, desto mehr können Sie sich von Ihren Mitbewerbern abheben. Durch das Hinzufügen von Code-Snippets vermeiden Sie es, sich so sehr auf Plugins verlassen zu müssen, und haben mehr Flexibilität.

In diesem Leitfaden haben wir verschiedene Methoden zum Hinzufügen von Code-Snippets gesehen:

• Durch die Verwendung des integrierten Design-Editors zum Bearbeiten der Datei functions.php
• Mit einem speziellen WordPress-Plugin zum Hinzufügen benutzerdefinierter Code-Snippets
• Verwenden von FTP für den manuellen Zugriff auf die Datei function.php
• Verwenden des Plugin-Editors zum manuellen Bearbeiten von WooCommerce-Vorlagen
• Verwenden von FTP zum Erstellen eines neuen Plugins mit dem benutzerdefinierten Code.

Mit all diesen Methoden können Sie Ihre WooCommerce-Website einfach anpassen und konfigurieren. Alle diese Methoden erfordern ein grundlegendes Maß an Programmierkenntnissen, aber die Verwendung eines Plugins ist die anfängerfreundlichste Methode. Das Bearbeiten der Datei functions.php über den integrierten Editor ist einfach, birgt jedoch einige Risiken, die Sie beachten müssen. Gleiches gilt, wenn Sie die WooCommerce-Template-Dateien direkt anpassen möchten. Schließlich ist die Verwendung eines FTP-Clients eine etwas fortgeschrittenere Methode, da bestimmte Kenntnisse erforderlich sind, um Serverdateien zu konfigurieren.

Haben Sie Snippets zu Ihrem WooCommerce-Shop hinzugefügt? Welche Methode hast du verwendet? Kennen Sie andere Möglichkeiten, die wir hinzufügen sollten? Lassen Sie es uns im Kommentarbereich unten wissen!

Wenn Sie schließlich nach zusätzlichen Code-Snippets und Möglichkeiten zur programmgesteuerten Anpassung Ihres Shops suchen, haben wir etwas für Sie. Wenn Ihnen dieser Leitfaden gefallen hat, sehen Sie sich diese Artikel an, die Ihnen helfen werden, das Beste aus Ihrem WooCommerce-Shop zu machen:

• So bearbeiten Sie die WooCommerce-Produktseite programmgesteuert
• Bearbeiten Sie die WooCommerce-Seite „Mein Konto“ programmgesteuert
• So bearbeiten Sie die WooCommerce Shop-Seite programmgesteuert