So passen Sie WooCommerce-Vorlagen an

Suchen Sie nach Möglichkeiten, Ihre Vorlagen zu bearbeiten? In diesem Leitfaden zeigen wir Ihnen zwei verschiedene Methoden zum Anpassen von WooCommerce-Vorlagen für Ihre Website mit und ohne Plugins.

WooCommerce ist eine großartige Plattform, um E-Commerce-Shops zu erstellen. Es ist sehr einfach zu bedienen, hat viele Funktionen und viele Anpassungsoptionen, um Funktionen hinzuzufügen und das Design Ihrer Website zu ändern. Neben dem Ändern der Shop- oder Produktseite können Sie auch die Vorlagen bearbeiten, die WooCommerce standardmäßig enthält.

Warum WooCommerce-Vorlagen anpassen?

WooCommerce hat viele anpassbare Funktionen. Sie können praktisch jede Seite personalisieren, von der Kasse über die Shop-Seite bis hin zu den Kategorieseiten, Dankesseiten und mehr. All dies trägt dazu bei, Ihrem Geschäft einen einzigartigen Stil zu verleihen, den die Kunden wiedererkennen, aber um sich von der Masse abzuheben, müssen Sie möglicherweise auch Ihre WooCommerce-Vorlagen anpassen.

Indem Sie die Standardseiten auf Ihrer Website bearbeiten, stellen Sie sicher, dass sie sich von denen Ihrer Konkurrenz unterscheiden und einen Stil haben, der zum Erscheinungsbild Ihres Shops passt. Wenn Sie sie jedoch anpassen möchten, um einen erheblichen Wettbewerbsvorteil zu erzielen , ist es möglicherweise eine gute Idee, auch die Standardvorlagen zu bearbeiten.

Indem Sie Ihre Vorlagen anpassen, können Sie weitere Details und Funktionen hinzufügen, um Ihren Online-Shop auf die nächste Stufe zu heben. Diese Funktionen können Ihnen helfen, ein besseres Kundenerlebnis zu bieten , das Käufer zu schätzen wissen. Aus diesem Grund sollten Sie lernen, wie Sie Ihre WooCommerce-Vorlagen bearbeiten und Ihr E-Commerce-Shop-Spiel aktualisieren.

Dinge, die Sie vor dem Bearbeiten von Vorlagen beachten sollten

Bevor Sie mit dem Anpassen Ihrer Vorlagen beginnen, sollten Sie Folgendes beachten.

1. WooCommerce-Themen

Sie werden viele Elemente Ihrer Website in Bezug auf WooCommerce durch die Vorlagen ändern. Stellen Sie sicher, dass das von Ihnen verwendete Thema vollständig mit WooCommerce kompatibel ist. Wenn Sie noch keins haben oder darüber nachdenken, es zu ändern, sehen Sie sich unsere Liste der besten WooCommerce-Themen an.

2. Installieren Sie WooCommerce richtig

Bevor Sie Änderungen an den WooCommerce-Vorlagen vornehmen, müssen Sie WooCommerce auf Ihrer Website ordnungsgemäß einrichten. Wir empfehlen Ihnen, während des Einrichtungsvorgangs keinen Schritt auszulassen oder zu überspringen. Wenn Sie sich diesbezüglich nicht sicher sind, hilft Ihnen unser Leitfaden zur Einrichtung von WooCommerce, zu überprüfen, ob alles korrekt ist.

3. Verwenden Sie ein untergeordnetes Thema und sichern Sie Ihre Website

Um die WooCommerce-Vorlagen zu bearbeiten, ändern Sie sensible Daten aus Ihren Vorlagendateien. Das bedeutet, dass Ihre Website ernsthaften Problemen ausgesetzt sein kann, wenn Sie versehentlich einen Fehler machen. Die gute Nachricht ist, dass Sie dies verhindern können, indem Sie ein untergeordnetes Thema verwenden und die Änderungen daran vornehmen, anstatt Ihre übergeordneten Themendateien direkt zu bearbeiten.

Wir empfehlen Ihnen außerdem, Ihre Website zu sichern, bevor Sie diesen Vorgang starten. Wenn Sie dabei Hilfe benötigen, lesen Sie unsere vollständige Anleitung zum Sichern einer WordPress-Website. Ebenso finden Sie weitere Informationen zum Erstellen eines untergeordneten Themas in WordPress und zu untergeordneten Themen-Plugins.

4. Programmierkenntnisse

Um die WooCommerce-Vorlagen anzupassen, verwenden wir Code-Snippets. Unabhängig davon, ob Sie dies programmgesteuert oder mit einem Plugin tun, empfehlen wir Ihnen, über grundlegende Programmierkenntnisse zu verfügen. Für einige Anpassungen verwenden wir Hooks. Wenn Sie mit Hooks nicht vertraut sind, werfen Sie einen Blick auf diese Anleitung zu WooCommerce-Hooks.

Wenn Sie keine Programmierkenntnisse haben und sich beim Bearbeiten von Core-Dateien nicht wohlfühlen, empfehlen wir Ihnen, einen Entwickler um Unterstützung zu bitten.

5. Themen- und Vorlagendateien

Die Design- und Vorlagendateien variieren je nach Design, das Sie für Ihren WooCommerce-Shop verwenden. Für diese Demonstration verwenden wir das Divi-Design, daher können einige der Design- und Vorlagendateien auf Ihrer Website anders sein, wenn Sie ein anderes Design verwenden. Sie sollten dem Tutorial jedoch unabhängig vom verwendeten Thema problemlos folgen können.

So bearbeiten Sie WooCommerce-Vorlagen

Es gibt zwei Möglichkeiten, die WooCommerce-Vorlagen anzupassen:

1. Programmatisch
2. Verwenden eines Plugins

Im nächsten Abschnitt sehen wir uns jede Methode an, damit Sie diejenige verwenden können, mit der Sie sich am wohlsten fühlen.

1. Passen Sie WooCommerce-Vorlagen programmgesteuert an

Auch wenn WordPress ohne Programmierkenntnisse einfach zu bedienen ist, ist es auch entwicklerfreundlich. Tatsächlich können Sie praktisch alles auf Ihrer Website sowohl mit Plugins als auch mit Code-Snippets bearbeiten. In diesem Abschnitt zeigen wir Ihnen, wie Sie Vorlagen programmgesteuert in WooCommerce bearbeiten.

Es gibt zwei Ansätze, um Vorlagen programmgesteuert anzupassen:

• Vorlagen überschreiben
• Mit Haken

Beide Ansätze werden die Arbeit erledigen, also wählen Sie den für Sie bequemeren. Werfen wir einen kurzen Blick auf die Unterschiede zwischen diesen beiden Methoden, damit Sie ein grundlegendes Verständnis dafür haben, was die beiden Methoden tun und wann sie verwendet werden.

Hooks vs. Vorlagen überschreiben

Hooks werden im Allgemeinen für einfache Änderungen mit Aktionen und Filtern verwendet. Andererseits können Sie Vorlagen für komplexere Anpassungen überschreiben , indem Sie die eigentlichen Vorlagendateien ändern.

Denken Sie auch daran, dass Sie die Vorlagendatei nicht überschreiben sollten, wenn Sie einen Hook für eine bestimmte Vorlagendatei verwenden. Dies liegt daran, dass beim Überschreiben der Vorlage die in dieser Datei verwendeten Hooks ersetzt werden und nicht mehr funktionieren.

Stellen Sie sicher, dass Sie Ihre Anforderungen kennen, bevor Sie fortfahren, und wählen Sie die Methode aus, die Ihren Anforderungen entspricht. Wenn Sie sich immer noch unsicher sind, empfehlen wir Ihnen, sich von einem WordPress-Entwickler helfen zu lassen.

1.1. Vorlagen überschreiben, um WooCommerce-Vorlagen zu bearbeiten

Sie sollten Ihre Vorlagen überschreiben, wenn Sie komplexe Anpassungen vornehmen möchten, da Sie dadurch flexibler sind als Hooks.

Der Prozess ist dem Bearbeiten der Datei functions.php sehr ähnlich. In diesem Fall bearbeiten Sie die Hauptvorlagendateien von WooCommerce, anstatt die Designdateien anzupassen.

Um auf die Vorlagendateien zuzugreifen, gehen Sie in Ihrem Dashboard zu Plugins > Plugin-Editor , wählen Sie WooCommerce aus der Dropdown-Liste aus und navigieren Sie dann zu den Vorlagendateien auf der Registerkarte Vorlagen .

Hier finden Sie alle wichtigen Dateien, die Sie bearbeiten möchten, wie z. B. archive-product.php , content-product-cat.php , content-product.php und so weiter. Ebenso können Sie auch die Vorlagendateien im Warenkorb, an der Kasse, per E-Mail und vielem mehr bearbeiten.

Wie Sie sich vorstellen können, gibt es viele WooCommerce-Vorlagendateien, die Sie bearbeiten können. Sie können die Unterverzeichnisse sowie die Ordner dieser Dateien anpassen. Weitere Informationen darüber, welche Dateien Sie personalisieren können, finden Sie in der vollständigen Liste der Vorlagendateien, die Sie hier bearbeiten können.

Sehen wir uns nun einige Beispiele an, wie Sie die WooCommerce-Vorlagen anpassen können .

1.1.1. Shortcode zu den WooCommerce-Vorlagen hinzufügen

Eine der häufigsten Praktiken beim Anpassen von Code in WooCommerce ist die Verwendung von Shortcodes. Es gibt viele offizielle Shortcodes, die von WooCommerce und WordPress bereitgestellt werden und die Sie zum Bearbeiten von Vorlagen verwenden können.

Das folgende Skript zeigt das WooCommerce Mein Konto-Dashboard auf allen einzelnen Produktseiten an. Fügen Sie es einfach in die single-product.php- Datei ein und aktualisieren Sie es.

 <?php
if ( ! definiert( 'ABSPATH' ) ) {
   Ausfahrt; // Beenden bei direktem Zugriff
}
get_header( 'shop' );
   while (have_posts()) : 
   die Post();
   wc_get_template_part( 'content', 'single-product' );
   am Ende; // Ende der Schleife.
do_action( 'woocommerce_sidebar' );
   $t= '<div><h4>Mein Konto</h4>';
   $t.= do_shortcode(" [ woocommerce_my_account ] "); $t.="</div>"; echo $t; get_footer( 'shop' );

Sehen Sie sich danach eine Vorschau der Produktseiten an und Sie können das Konto-Dashboard sehen.

Weitere Informationen zum programmatischen Bearbeiten der Produktseiten finden Sie in dieser Schritt-für-Schritt-Anleitung.

1.1.2. Erinnern Sie den Kunden daran, dass er das Produkt schon einmal gekauft hat

Sie können WooCommerce-Vorlagen auch anpassen, um Ihren treuen Käufern einen Rabattcode zu geben, wenn sie zuvor ein Produkt gekauft haben. Auch hier müssen Sie den folgenden Code in die Datei single-product.php einfügen und aktualisieren.

 get_header( 'shop' );
   while (have_posts()) : 
    die Post(); 
    wc_get_template_part( 'content', 'single-product' );
   am Ende; // Ende der Schleife.
$aktueller_Benutzer = wp_get_aktueller_Benutzer();
if ( wc_customer_bought_product( $aktueller_Benutzer->Benutzer-E-Mail, $aktueller_Benutzer->ID, $Produkt->get_id() ) ):
echo '<div class="user-bought">&hearts; Hallo ' . $aktueller_Benutzer->Vorname . ', Sie haben dies schon einmal gekauft. Mit diesem Gutschein erneut kaufen: <b>PURCHASE_AGAIN_21</b></div>';
endif;
get_footer( 'shop' );

Sobald Ihre Kunden nun ein Produkt ansehen, das sie bereits gekauft haben, erscheint die folgende Meldung.

Dies sind einige der Möglichkeiten, wie Sie WooCommerce-Vorlagen bearbeiten können, indem Sie die Vorlagen überschreiben. Wenn Sie weitere Referenzen und Beispiele wünschen, lesen Sie unsere ausführliche Anleitung zum programmgesteuerten Anpassen von WooCommerce-Vorlagen.

1.2. Verwenden von Hooks zum Bearbeiten von WooCommerce-Vorlagen

Sie können auch Hooks verwenden, um WooCommerce-Vorlagen anzupassen, wenn Sie mit dem Überschreiben der Vorlagendateien nicht ganz vertraut sind. Hooks sind Funktionen, die Sie als Aktion oder Filter hinzufügen können und die Ihnen helfen können, die Funktionalität Ihrer Website schnell zu erweitern und einfache Änderungen vorzunehmen .

Ebenso können Sie auch WooCommerce-Hooks verwenden, um die Vorlagen Ihres Shops zu bearbeiten. Wir empfehlen diesen Ansatz nur, wenn Sie einfache Anpassungen vornehmen möchten. Bei komplexen Änderungen ist das Überschreiben von Vorlagen eine geeignetere Methode.

Um Hooks zu Ihrem Online-Shop hinzuzufügen, müssen Sie nur zu Appearance > Theme Editor gehen, die Datei functions.php öffnen und Code-Snippets mit den Aktions- oder Filter-Hooks hinzufügen.

Hier sind einige Beispiel-Snippets, die Sie verwenden können, um die WooCommerce-Vorlagen mithilfe von Hooks zu bearbeiten.

1.2.1. Fügen Sie Informationen über dem Bild in einem einzelnen Produkt hinzu

Wenn Sie zusätzliche Informationen zu den Produkten über dem Produktbild einfügen möchten, fügen Sie einfach das folgende Skript in die Datei functions.php ein.

 // Benutzerdefinierte Funktion hinzufügen
Funktion quadlayers_before_single_product() {
echo '<h2>Diese Woche gibt es 25 % Rabatt auf alles!</h2>';
}

// Aktion hinzufügen
add_action( 'woocommerce_before_single_product', 'quadlayers_before_single_product', 11 );

Dadurch wird die Nachricht über den Produktbildern auf den einzelnen Produktseiten angezeigt.

1.2.2. Fügen Sie eine Shop-Beschreibung unter dem Shop-Titel auf der Shop-Seite hinzu

Sie können das folgende Code-Snippet verwenden, um die Shop-Beschreibung auf der Shop-Seite anzuzeigen. Die Beschreibung wird direkt unter dem Shop-Titel angezeigt.

 // Benutzerdefinierte Funktion hinzufügen
Funktion quadlayers_custom_archive_description() {
$new_description = '<p>Das ist unser Shop. Viel Spaß beim Einkaufen!</p>';
Rückgabe $neue_Beschreibung;
}

// Aktion hinzufügen
add_action('woocommerce_archive_description', 'quadlayers_custom_archive_description');

Nachdem Sie die Änderungen gespeichert haben, können Sie die Shop-Beschreibung auf der WooCommerce-Shop-Seite sehen.

Weitere Informationen zum Bearbeiten der Vorlagen mithilfe von Hooks finden Sie in unserem Tutorial zum programmgesteuerten Anpassen von WooCommerce-Vorlagen.

2. Passen Sie WooCommerce-Vorlagen mit einem Plugin an

Wenn Sie keine Programmierkenntnisse haben, gibt es eine andere Lösung für Sie. Sie können WooCommerce-Vorlagen mithilfe von Plugins bearbeiten.

Es gibt mehrere Plugins, um Ihre Vorlagen anzupassen. Für dieses Tutorial verwenden wir Edit WooCommerce Templates . Es ist ein unkompliziertes kostenloses Plugin, mit dem Sie die Vorlagen Ihres Themas personalisieren können. Sie können Ihre Vorlagen jederzeit mit wenigen Klicks ändern und auf die Standardeinstellungen zurücksetzen.

Im Gegensatz zu den programmatischen Ansätzen können Sie mit diesem Plugin die Vorlagen, die Sie bearbeiten möchten, direkt auswählen, anstatt sie in den Themen- und WooCommerce-Dateien zu suchen. Sobald Sie die gewünschte Vorlage gefunden haben, müssen Sie nur noch die Code-Snippets hinzufügen, um die Vorlage zu überschreiben und die Änderungen zu speichern. Auf diese Weise können Sie viel Zeit sparen, da Sie nicht jede Vorlagendatei, die Sie bearbeiten möchten, suchen und öffnen müssen.

Lassen Sie uns dies besser mit einigen Beispielen erklären.

2.1. Installieren und aktivieren Sie das Plugin

Um das Plugin verwenden zu können, müssen Sie es zuerst installieren und aktivieren. Gehen Sie in Ihrem WordPress-Dashboard zu Plugins > Neu hinzufügen und suchen Sie nach WooCommerce-Vorlagen bearbeiten . Klicken Sie auf Jetzt installieren und aktivieren Sie es dann.

Alternativ können Sie das Plugin herunterladen und manuell installieren. Wenn Sie weitere Informationen zu diesem Vorgang wünschen, lesen Sie unsere Anleitung zur manuellen Installation von WordPress-Plugins.

2.2. Bearbeiten Sie die Vorlagen

Nachdem Sie das Plugin aktiviert haben, können Sie mit der Anpassung der WooCommerce-Vorlagen beginnen. Gehen Sie in Ihrem Dashboard zu WooCommerce > Designvorlagen und Sie können alle Vorlagen sehen, die Sie in Ihrem aktuellen Design ändern können. Für jede Vorlage sehen Sie den Titel, den Pfad und den Status, ob sie im aktuellen Thema geändert wurde.

Um Vorlagendateien zu bearbeiten, müssen Sie nur auf der gewünschten Vorlage auf Bearbeiten klicken. Wenn Sie die Vorlage, die Sie bearbeiten möchten, nicht sehen können, können Sie auch über die Suchleiste danach suchen.

Danach werden Sie zum Vorlagen-Editor weitergeleitet, wo Sie Ihre Code-Snippets hinzufügen müssen. Dazu können Sie eines der oben im Programmbereich erwähnten Snippets verwenden. Natürlich können Sie sie auch als Basis nehmen und sie anpassen, um Ihre eigene benutzerdefinierte Lösung zu erstellen.

Nachdem Sie das Code-Snippet zum Editor hinzugefügt haben, klicken Sie auf Vorlage im Design speichern .

Wenn Sie später Ihre Meinung ändern und alle an der Vorlage vorgenommenen Änderungen zurücksetzen möchten, klicken Sie einfach auf Zurücksetzen , um die Änderungen rückgängig zu machen.

Nachdem Sie Ihre Anpassung gespeichert haben, werden die Änderungen auf die Vorlage Ihres aktuellen Designs angewendet. Um zu überprüfen, ob die Änderungen korrekt gespeichert wurden oder nicht, gehen Sie zu WooCommerce > Designvorlagen und der Status unter der Spalte „Geändert im aktuellen Design“ sollte sich zu Ja ändern.

Das ist es! Auf diese Weise können Sie jede WooCommerce-Vorlage anpassen und sich von Ihren Mitbewerbern abheben.

Bonus: So bearbeiten Sie WooCommerce-E-Mail-Vorlagen

Wir haben Ihnen bereits verschiedene Möglichkeiten gezeigt, WooCommerce-Vorlagen anzupassen. Eine der ersten Vorlagen, deren Änderung wir empfehlen, ist die E-Mail-Vorlage. Sie senden Ihren Kunden wahrscheinlich mehrere automatische E-Mails bezüglich ihrer Bestellungen, daher sind E-Mail-Vorlagen ein guter Anfang.

Als Online-Shop möchten Sie die korrekten Kontaktinformationen Ihrer Käufer haben. Die Standard-E-Mail-Vorlage von WooCommerce bietet jedoch möglicherweise nicht in jedem Szenario alles, was Sie benötigen.

Die gute Nachricht ist, dass das Bearbeiten der WooCommerce-E-Mail-Vorlagen recht einfach ist und Sie die meisten Änderungen über das WordPress-Dashboard ohne Plugins oder Code-Snippets vornehmen können. Gehen Sie einfach zu WooCommerce > Einstellungen und öffnen Sie die Registerkarte E- Mails . Dort können Sie alle anpassbaren Optionen für den E-Mail-Absender und die E-Mail-Vorlagen sehen.

In den E- Mail-Absenderoptionen können Sie den „Von“-Namen und die Adresse bearbeiten. Dies ändert, wie der Name und die Adresse des Absenders in den E-Mails angezeigt werden, die Sie an Ihre Kunden senden.

In ähnlicher Weise können Sie auch das Kopfbild, den Fußzeilentext und den Text sowie die Text- und Hintergrundfarbe der E-Mail-Vorlagen ändern.

Nachdem Sie alle gewünschten Änderungen vorgenommen haben, können Sie eine Vorschau der E-Mail-Vorlage anzeigen, indem Sie auf den Link „ Klicken Sie hier, um eine Vorschau Ihrer E- Mail-Vorlage anzuzeigen“ klicken.

Wenn Sie mit der Vorschau zufrieden sind, speichern Sie einfach die Änderungen und das war's. Dies ist eine großartige und schnelle Möglichkeit, Ihr Geschäft anzupassen und einen Eindruck bei Ihren Käufern zu hinterlassen.

Dies ist nur ein Beispiel, aber es gibt noch mehr Möglichkeiten, die WooCommerce-E-Mail-Vorlagen zu ändern. Weitere Informationen dazu finden Sie in unserem Leitfaden zum Bearbeiten von WooCommerce-E-Mail-Vorlagen.

Fazit

Zusammenfassend lässt sich sagen, dass die Bearbeitung Ihrer Vorlagen eine hervorragende Möglichkeit ist, Ihren Kunden ein besseres Erlebnis zu bieten und sich von Ihren Mitbewerbern abzuheben.

In diesem Leitfaden haben wir zwei Hauptmöglichkeiten zum Anpassen der WooCommerce-Vorlagen gesehen:

• Programmatisch
• Verwenden eines Plugins

Wenn Sie wissen, wie man codiert, ist die erste Methode die richtige für Sie. Sie können Vorlagen bearbeiten, indem Sie entweder Hooks verwenden oder die Vorlagen überschreiben. Die Verwendung von Hooks wird empfohlen, wenn Sie einfache und kleine Änderungen anwenden möchten, während Sie bei komplexeren Anpassungen die Vorlagen überschreiben müssen.

Alternativ können Sie ein Plugin verwenden, um Ihre Vorlagen anzupassen, um Zeit zu sparen. Mit einem Plugin müssen Sie keine bestimmten Vorlagendateien auf Ihrer Website finden. Sie können einfach damit beginnen, die vom Plugin bereitgestellten Vorlagendateien anzupassen und sie direkt auf Ihrer Website zu bearbeiten.

Schließlich haben wir Ihnen auch gezeigt, wie Sie E-Mail-Vorlagen bearbeiten, damit Sie bei Ihren Käufern von dem Moment an, in dem sie bei Ihnen kaufen, Eindruck hinterlassen können.

Wir hoffen, dass Sie jetzt problemlos Änderungen an den WooCommerce-Vorlagen vornehmen können. Welche Methode hast du verwendet? Lass es uns in den Kommentaren unten wissen!

Wenn Sie diesen Leitfaden hilfreich fanden, finden Sie hier einige weitere Artikel, die Sie interessieren könnten:

• So testen Sie WooCommerce-E-Mail-Vorlagen: 3 einfache Wege!
• Beste WooCommerce-Plugins zum Anpassen der Seite „Mein Konto“.
• So passen Sie das WooCommerce-Registrierungsformular an