So bearbeiten Sie die WooCommerce-Seite „Mein Konto“ programmgesteuert

Veröffentlicht: 2020-12-22

Möchten Sie die Seite „Mein Konto“ in Ihrem Shop anpassen? Sie sind an der richtigen Stelle. In diesem Leitfaden zeigen wir Ihnen, wie Sie die WooCommerce-Seite „Mein Konto“ programmgesteuert bearbeiten , um Ihr Kundenerlebnis zu verbessern.

Was ist die Seite „Mein Konto“?

Standardmäßig enthalten WooCommerce-Shops eine Seite „Mein Konto“, auf der Benutzer ihre Bestellungen einsehen können und auf der Sie Informationen zu den persönlichen Daten, Rechnungs- und Lieferadressen Ihrer Kunden speichern. Die Standardseite Mein Konto ist eine WordPress-Seite, die einen WooCommerce-Shortcode enthält.

[ woocommerce_my_account ]

Auch wenn diese sofort einsatzbereite Seite alle grundlegenden Informationen enthält, die Ihre Benutzer benötigen, um ihre Bestellungen und Einstellungen zu verwalten, kann Ihnen die Bearbeitung der Seite „Mein Konto“ dabei helfen, sich von Ihren Mitbewerbern abzuheben und ein besseres Benutzererlebnis zu bieten.

Warum die Seite „Mein Konto“ in WooCommerce anpassen?

Es ist kein Geheimnis, dass die Bereitstellung einer großartigen UX der Schlüssel zum Erfolg eines jeden E-Commerce-Shops ist. Benutzer kaufen online, weil es schnell und bequem ist, also sollten Sie sicherstellen, dass Ihr Geschäft ihnen die Tools zur Verfügung stellt, die sie benötigen, um ein erstaunliches Erlebnis zu haben.

Die meisten Ladenbesitzer konzentrieren sich auf das Anpassen der Produktseite und des Bezahlvorgangs, vergessen aber die Seite „Mein Konto“. Da dies eine Seite ist, die für Ihre registrierten Benutzer konzipiert ist, können Sie durch Anpassen der Seite deren Erfahrung auf Ihrer Website verbessern . Darüber hinaus kann es Ihnen helfen, sie dazu zu bringen, in Ihr Geschäft zurückzukehren, und Ihren Umsatz steigern . Sie könnten beispielsweise einen speziellen Bereich erstellen, in dem Sie ihnen personalisierte Angebote und Werbeaktionen zeigen.

Wir haben bereits die besten Plugins zum Anpassen der Seite „Mein Konto“ analysiert. Wenn Sie jedoch keine Tools von Drittanbietern installieren möchten und über Programmierkenntnisse verfügen, haben wir etwas für Sie. In dieser Anleitung zeigen wir Ihnen, wie Sie die WooCommerce-Seite „Mein Konto“ programmgesteuert bearbeiten .

So bearbeiten Sie die WooCommerce-Seite „Mein Konto“ programmgesteuert

Es gibt zwei verschiedene Techniken, um die Seite „Mein Konto“ in WooCommerce zu bearbeiten:

Sie können die standardmäßigen WooCommerce-Vorlagendateien überschreiben
Verwenden Sie einige WooCommerce-Hooks

Welche Methode ist besser? Jede dieser Optionen ist für verschiedene Fälle besser geeignet. Als allgemeine Regel sollten Sie versuchen, Hooks zu verwenden, anstatt die Vorlagendateien zu überschreiben, wo dies möglich ist. Dies ist eine der Best Practices, die WordPress beim Anpassen Ihrer Website empfiehlt.

Wenn Sie jedoch komplexere Aufgaben ausführen möchten, die Funktionen oder Objekte umfassen, müssen Sie möglicherweise die Vorlagendateien bearbeiten. In diesem Leitfaden erfahren Sie, wie Sie die WooCommerce-Seite „Mein Konto“ programmgesteuert mit beiden Methoden bearbeiten . Wie Sie sich vorstellen können, birgt das Bearbeiten von Vorlagendateien mehr Risiken als die Verwendung von Hooks. Denken Sie also daran, bevor Sie die gewünschte Option auswählen.

1) Passen Sie Meine Kontoseite an, indem Sie Vorlagendateien überschreiben

HINWEIS : Da diese Methode das Überschreiben von Vorlagendateien beinhaltet, empfehlen wir Ihnen, eine vollständige Sicherung Ihrer Website zu erstellen, bevor Sie beginnen. Wenn Sie nicht wissen, wie das geht, sehen Sie sich diese Anleitung an. Ausführlichere Informationen zum Anpassen von WooCommerce-Vorlagen finden Sie in diesem Beitrag.

Der Vorgang zum Überschreiben von WooCommerce-Vorlagendateien ähnelt dem Überschreiben jeder anderen Datei in Ihrem untergeordneten Design. Wie Sie wissen, können Sie mit untergeordneten Designs Ihr Design bearbeiten, ohne dass die Anpassungen verloren gehen, wenn Sie das Design aktualisieren. Dasselbe gilt für WooCommerce-Plugins. Wenn Sie also kein untergeordnetes Thema haben, können Sie eines erstellen oder eines dieser Plugins verwenden.

Gehen Sie zunächst in Ihrem WordPress-Admin-Dashboard zu Plugins > Editor . Gehen Sie dann zum Plugins-Ordner, öffnen Sie WooCommerce und suchen Sie die Vorlagendateien. Dazu können Sie den Dateieditor des WordPress-Plugins oder einen beliebigen Code-Editor Ihrer Wahl verwenden. Öffnen Sie im WooCommerce -Verzeichnis die Vorlagendatei und suchen Sie nach dem Ordner myaccount .

plugins/woocommerce/templates/myaccount

So bearbeiten Sie die WooCommerce-Seite „Mein Konto“ programmgesteuert – Vorlagendateien

Öffnen Sie den Ordner /myaccount und Sie finden alle Vorlagendateien, die die Seite „Mein Konto“ verwendet. WooCommerce-Vorlagendateien für mein Konto

Dies sind die Standarddateien, die derzeit auf Ihrer Website funktionieren. Um diese Dateien zu überschreiben, müssen Sie in Ihrem Child-Theme eine neue Datei mit demselben Namen erstellen . Wenn Sie jedoch eine leere Datei erstellen, deaktivieren Sie alle Funktionen der Originaldatei. Um Probleme auf Ihrer Website zu vermeiden, müssen Sie also die Standarddatei kopieren und in Ihren Designordner einfügen.

Angenommen, Sie möchten die Datei dashboard.php aus der WooCommerce-Installation kopieren. Bevor Sie es in Ihr Child-Theme einfügen, müssen Sie zwei verschachtelte Unterverzeichnisse erstellen und diese /woocommerce und /myaccount nennen . Fügen Sie danach die Datei dashboard.php darin ein: child_theme/woocommerce/myaccount/dashboard.php Bearbeiten Sie die WooCommerce-Seite „Mein Konto“ programmgesteuert – Vorlagendatei wird überschrieben

Öffnen Sie nun die Datei dashboard.php und nehmen Sie einige kleine Änderungen vor, um sicherzustellen, dass sie ordnungsgemäß funktioniert. Das ist es! Sie haben gerade gelernt, wie Sie eine WooCommerce-Vorlagendatei überschreiben. Das ist der erste Schritt. Lassen Sie uns nun noch einen Schritt weiter gehen und sehen, wie Sie die Seite „Mein Konto“ anpassen können.

Passen Sie das Dashboard der Seite „Mein Konto“ an

Nachdem Sie nun wissen, wie Vorlagendateien überschrieben werden, sehen wir uns an, wie Sie die WooCommerce-Seite „Mein Konto“ programmgesteuert bearbeiten. In diesem Abschnitt zeigen wir Ihnen, wie Sie das Haupt-Dashboard der Seite „Mein Konto“ anpassen. Am Ende dieses Vorgangs sieht Ihre Seite „Mein Konto“ folgendermaßen aus:

Passen Sie die Woocommerce-Dashboard-Vorlage für mein Konto an Wir haben ein Überschriftenbild und etwas Text darunter hinzugefügt. Darüber hinaus haben wir eine Liste mit Links zu den Abschnitten erstellt, die Benutzer häufiger besuchen, eine Fußzeile und einige Bildlinks, damit Kunden Sie einfach kontaktieren können.

Vollständiges Skript

Dies ist die letzte dashboard.php -Datei, die den obigen Screenshot erstellt.

 if ( ! definiert( 'ABSPATH' ) ) {
Ausfahrt; // Beenden bei direktem Zugriff.
}
$allowed_html = array(
'a' => array('href' => array(),)
);
?>
<h2>
<?php
printf(
/* Übersetzer: 1: Anzeigename des Benutzers 2: Abmelde-URL */
wp_kses( __( 'Hey %1$s, du bist zurück! ', 'woocommerce' ), $allowed_html ),
'<strong>' . esc_html( $aktueller_Benutzer->Anzeigename ) . '</strong>',
esc_url( wc_logout_url() )
);
?>
</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSBg81lLt4o-uEuBTgrMCwhDhX1HJKLCPTSxA&usqp=CAU"/>
<h3>
<?php
/* Übersetzer: 1: Bestell-URL 2: Adress-URL 3: Konto-URL. */
$dashboard_desc = __( 'Dies ist das Haupt-Dashboard Ihres Kontos: ', 'woocommerce' );
wenn (wc_shipping_enabled()) {
/* Übersetzer: 1: Bestell-URL 2: Adressen-URL 3: Konto-URL. */
$dashboard_desc = __( 'Dies ist das Haupt-Dashboard Ihres Kontos:', 'woocommerce' );
}
printf(
wp_kses( $dashboard_desc,$allowed_html),
esc_url( wc_get_endpoint_url( 'orders' ) ),
esc_url( wc_get_endpoint_url( 'edit-address' ) ),
esc_url( wc_get_endpoint_url( 'edit-account' ) )
);
$ul_list = __('<ul>
<li>Sehen Sie sich Ihre <a href="%1$s">letzten Bestellungen</a></li> an
<li>Verwalten Sie Ihre <a href="%2$s">Liefer- und Rechnungsadresse</a></li>
<li><a href="%3$s">Passwort und Kontodetails bearbeiten</a></li>
</ul>');
$div_contact = __('
<div class="acc_contact">
<span class="acc_images" >
<a href="#link to send whatsapp message"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/whatsapp-icon.png"/></a>
<a href="#Link zum Facebook-Profil"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/fcbk-icon.png"/></a>
<a href="#link to twitter profile"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/twitter-icon.png"/></a>
<a href="#link to send email"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/email-icon2.png"/></a>
</span>
</div>');
$div_footer=__('
<div>
<h4><i>Mit Liebe gebaut!</i></h4>
<img src="http://localhost/Sampler/wp-content/uploads/2020/08/ql-logo-300x65.png"/>
</div>');
?>
</h3>
<p>Verwalten Sie hier Ihr Profil und Ihre persönlichen Daten. Füllen Sie alle Felder aus, damit wir Sie kennenlernen können. Alle Ausgaben, die in Ihrem Konto vorgenommen werden, werden sofort auf der Website angezeigt, sodass andere Benutzer ohne Verzögerung von Ihnen und Ihren aktuellen Anforderungen erfahren können</p>
<?php
echo $ul_list.$div_footer.$div_contact;

Wenn Sie sich den Code ansehen, sehen Sie, dass der gesamte Originalcode, den wir aus der Standardvorlage kopiert haben, noch vorhanden ist. Wir haben gerade einige Zeichenfolgen geändert und Links als Liste neu geordnet. Darüber hinaus haben wir zusätzliche Skripte verwendet, um der Registerkarte weitere Inhalte hinzuzufügen. Um die von uns vorgenommenen Änderungen besser zu verstehen, können Sie die Standard dashboard.php überprüfen.

Bilder hinzufügen

Um Bilder auf der Seite Mein Konto anzuzeigen, müssen Sie die URLs der Bilder ersetzen. Gleiches gilt für die Social Icons Bildlinks.

CSS-Anpassungen

Eine andere Möglichkeit, die Seite „Mein Konto“ – und jede andere Seite – anzupassen, ist die Verwendung von CSS-Skripten. Dies ist das CSS-Skript, das wir zum Gestalten unserer benutzerdefinierten Dashboard.php -Datei verwendet haben:

 .woocommerce-MyAccount-Inhalt > h2:nth-child(2),
.woocommerce-MyAccount-Inhalt > h3:nth-child(4){
Textausrichtung: Mitte;
}
.acc_contact{
Polsterung oben: 20px;
Textausrichtung: Mitte;
}
.acc_contact > h3{
Schwimmer: links;
}
.acc_images{
Rand:auto;
Breite: 50 %;
Bildschirmsperre;
}
#willkommen{
Rand:auto;
}
.acc_images img {
Rand links: 4px;
Rand rechts: 4px;
display:inline-block;
Breite: 55px;
}
#acc_footer{
Rand oben: 15px;
Hintergrundfarbe: #202020;
Textausrichtung: Mitte;
Randradius: 15px;
}
#acc_footer > h4{
Polsterung oben: 20px;
Farbe: RGB (235, 228, 228);
Schriftdicke: fett;
}
#acc_footer >img{
Rand:auto;
Polsterung unten: 20px;
}

Sie können diesen Code als Basis nehmen, ihn in die style.css -Datei Ihres Child-Themes einfügen und an das Erscheinungsbild Ihrer Website anpassen.

2. Bearbeiten Sie die WooCommerce-Mein-Konto-Seite mit Haken

Die zweite Methode zum programmatischen Bearbeiten der Seite „Mein Konto“ ist die Verwendung einiger WooCommerce-Hooks. Dazu müssen Sie ein grundlegendes Verständnis dafür haben, wie Hooks in WooCommerce funktionieren. Wenn Sie mit Hooks nicht vertraut sind, empfehlen wir Ihnen, sich diese Anleitung anzusehen.

A) Registerkarten umbenennen

Dieses Skript benennt die Registerkarte Adresse in Ihre Adressen um.

 add_filter( 'woocommerce_account_menu_items', 'QuadLayers_rename_acc_adress_tab', 9999 );
Funktion QuadLayers_rename_acc_adress_tab( $items ) {
$items['edit-address'] = 'Ihre Adressen';
gib $items zurück;
}

B) Registerkarten entfernen

Um einen beliebigen Tab vollständig zu entfernen, verwenden Sie die Funktion unset() wie folgt:

 add_filter( 'woocommerce_account_menu_items', 'QuadLayers_remove_acc_address', 9999 );
Funktion QuadLayers_remove_acc_address( $items ) {
unset( $items['downloads'] );
gib $items zurück;
}

Im obigen Skript haben wir die Registerkarte „ Downloads “ entfernt. Sie finden die vollständige Liste der Registerkarten im $items- Array, sodass Sie die gewünschte auswählen können.

 $Artikel = Array(
'Dashboard' => __( 'Dashboard', 'Woocommerce' ),
'Bestellungen' => __( 'Bestellungen', 'woocommerce' ),
'downloads' => __( 'Downloads', 'woocommerce' ),
'edit-address' => _n( 'Adressen', 'Adresse', (int) wc_shipping_enabled(), 'woocommerce' ),
'Zahlungsmethoden' => __( 'Zahlungsmethoden', 'woocommerce' ),
'edit-account' => __( 'Kontodetails', 'woocommerce' ),
'Kunden-Logout' => __( 'Logout', 'woocommerce' ),
);

C) Registerkarten und Inhalt zusammenführen

Eine weitere Option zum Anpassen der Seite „Mein Konto“ ist das Zusammenführen von Registerkarten . Sehen wir uns beispielsweise an, wie Sie die Registerkarte " Adressen " entfernen und ihren Inhalt auf die Registerkarte " Konto " verschieben.

 // -----------------------------
// 1. Entfernen Sie die Registerkarte Adressen
add_filter( 'woocommerce_account_menu_items', 'QuadLayers_remove_acc_tab', 999 );
Funktion QuadLayers_remove_acc_tab( $items ) {
unset($items['edit-address']);
gib $items zurück;
}
// -------------------------------
// 2. Fügen Sie den Inhalt der Registerkarte Adressen in eine vorhandene Registerkarte ein (in diesem Fall das Bearbeitungskonto)
add_action( 'woocommerce_account_edit-account_endpoint', 'woocommerce_account_edit_address' );

Jetzt sieht die Registerkarte Konto so aus: Inhalte der WooCommerce-Registerkarte meines Kontos zusammenführen

D) Fügen Sie eine neue Registerkarte mit benutzerdefinierten Inhalten hinzu

Sehen wir uns nun an, wie Inhalte zur Seite „Mein Konto“ hinzugefügt werden . In diesem Beispiel fügen wir eine neue Registerkarte namens Support hinzu, auf der Benutzer ihre Support-Tickets ganz einfach einsehen können. Wir verwenden zwei Shortcodes, die von einem Drittanbieter-Plugin bereitgestellt werden, um einige interessante Inhalte anzuzeigen, aber Sie sollten in der Lage sein, jeden gewünschten Shortcode in Ihrem neuen Tab zu verwenden.

Beachten Sie jedoch, dass einige Shortcodes aufgrund von Inkompatibilitäten mit WooCommerce möglicherweise nicht funktionieren. Um eine Registerkarte „Support“ mit benutzerdefinierten Inhalten zur Seite „Mein Konto“ von WooCommerce hinzuzufügen, fügen Sie den folgenden Code in die Datei functions.php Ihres untergeordneten Designs ein.

 // 1. Neuen Endpunkt registrieren
// Hinweis: Permalinks erneut speichern oder es wird ein 404-Fehler ausgegeben  
Funktion QuadLayers_add_support_endpoint() {
    add_rewrite_endpoint( 'support', EP_ROOT | EP_PAGES );
}  
add_action( 'init', 'QuadLayers_add_support_endpoint' );  
// ------------------
// 2. Neue Abfrage hinzufügen
Funktion QuadLayers_support_query_vars( $vars ) {
    $vars[] = 'Unterstützung';
    gib $vars zurück;
}  
add_filter( 'query_vars', 'QuadLayers_support_query_vars', 0 );  
// ------------------
// 3. Fügen Sie den neuen Endpunkt ein 
Funktion QuadLayers_add_support_link_my_account( $items ) {
    $items['support'] = 'Unterstützung';
    gib $items zurück;
}  
add_filter( 'woocommerce_account_menu_items', 'QuadLayers_add_support_link_my_account' );
// ------------------
// 4. Inhalt zum neuen Endpunkt hinzufügen  
Funktion QuadLayers_support_content() {
echo '<h3>Support</h3><p>Willkommen im Supportbereich. Als Premium-Kunde verwalten Sie Ihre Support-Tickets von hier aus. Sie können ein Ticket einreichen, wenn Sie Probleme mit Ihrer Website haben. Wir werden unser Bestes tun, um Ihnen eine schnelle und effiziente Lösung anzubieten</p>';
echo do_shortcode( '[tickets-shortcode]' );
echo do_shortcode( '[wpforms]' );
}  
add_action( 'woocommerce_account_support_endpoint', 'QuadLayers_support_content' );

Wenn Sie beim Klicken auf die neue Registerkarte einen 404-Seite nicht gefunden-Fehler erhalten, öffnen Sie die Permalink-Seite, indem Sie zum WordPress-Dashboard > Einstellungen > Permalinks gehen und unten auf die Schaltfläche Speichern klicken.

Beachten Sie, dass das Skript in vier Abschnitte unterteilt ist. Jeder von ihnen erfüllt eine andere Aufgabe, also verwenden Sie die Abschnitte, die Sie Ihrem Geschäft hinzufügen möchten. Denken Sie auch daran, dass Sie im letzten Abschnitt des Skripts (4) den Shortcode in der Funktion do_shortcode() ersetzen können. Dies ist das Endergebnis für die neue Registerkarte „Support“. benutzerdefinierte Registerkarte mein Konto woocommerce

Fazit

Alles in allem enthält die Standardseite Mein Konto die grundlegenden Informationen, die Benutzer benötigen, aber sie ist ziemlich einfach. Wenn Sie also die Benutzererfahrung in Ihrem Shop verbessern möchten, sollten Sie die Seite „Mein Konto“ anpassen. Dies wird Ihnen nicht nur dabei helfen, einen sehr wichtigen Bereich Ihres Geschäfts aufzuwerten, sondern auch Ihren Umsatz steigern.

Es gibt mehrere Plugins zum Anpassen der Seite „Mein Konto“. Wenn Sie jedoch keine weiteren Plugins installieren möchten und über Programmierkenntnisse verfügen, können Sie die Seite „Mein Konto“ von WooCommerce programmgesteuert bearbeiten. Dafür gibt es zwei Möglichkeiten:

Vorlagendateien überschreiben
Verwenden Sie WooCommerce-Hooks

Beide Methoden werden die Arbeit erledigen, aber als allgemeine Regel empfehlen wir Ihnen, wenn möglich Hooks zu verwenden. Es ist weniger riskant und eine der Best Practices, die WordPress empfiehlt. In diesem Handbuch haben wir mehrere Beispiele für Dinge gesehen, die Sie mit beiden Methoden tun können. Wir empfehlen Ihnen, diese Skripte als Leitfaden zu nehmen, sie zu verwenden, um Ideen zu sammeln, und herumzuspielen, um die Seite „Mein Konto“ in Ihrem Shop optimal zu nutzen.

Weitere Anleitungen zur optimalen Nutzung der Seite „Mein Konto“ finden Sie schließlich in diesen Anleitungen:

So passen Sie WooCommerce My Account mit und ohne Plugins an
Beste Plugins zum Anpassen der WooCommerce-Mein-Konto-Seite

Welche Änderungen haben Sie an Ihrer Seite „Mein Konto“ vorgenommen? Hatten Sie Probleme mit unserem Tutorial? Lassen Sie es uns im Kommentarbereich unten wissen!