So erstellen Sie eine benutzerdefinierte WooCommerce-Mein-Konto-Seite

Veröffentlicht: 2021-05-11

Benutzerdefinierte WooCommerce-Seite „Mein Konto“. Suchen Sie nach einer Möglichkeit, die WooCommerce-Seite „Mein Konto“ anzupassen? Die Bearbeitung der Kontoseite ist eine der wichtigsten Seiten in jedem WooCommerce-Shop. Diese Seite sollte ein beeindruckendes Design haben, da es für den reibungslosen Betrieb Ihres gesamten Online-Shops von entscheidender Bedeutung ist.

Es sollte so gestaltet sein, dass Benutzer das Beste aus der Kontoverwaltung herausholen, mehr Verkäufe tätigen und/oder Kunden zu einem wiederholten Kauf verleiten können.

Die Seite „Mein Konto“ und ihre Unterseiten können überall auf Ihrer Website mit einem Shortcode angezeigt werden. Shortcodes sind eine einfache Möglichkeit, dynamische Inhalte zu Ihren WordPress-Beiträgen, -Seiten und -Seitenleisten hinzuzufügen.

Benutzerdefinierte WooCommerce-Seite „Mein Konto“.

In diesem kurzen Tutorial zeigen wir Ihnen, wie Sie das Erscheinungsbild, Layout, den Inhalt und das Design der Seite „Mein Konto“ mithilfe von benutzerdefinierten PHP-Skripten anpassen. Das bedeutet, dass Sie einige Programmierkenntnisse benötigen, bevor Sie fortfahren.

Sie können in WooCommerce fast alles erreichen, wenn Sie mit der PHP-Anpassung vertraut sind. Das bedeutet, dass Sie eine benutzerdefinierte Registerkarte hinzufügen, eine Registerkarte umbenennen, eine Registerkarte entfernen oder Registerkarteninhalte zusammenführen können.

Lassen Sie uns einen Blick darauf werfen, wie Sie dies erreichen können.

Schritte zum Bearbeiten der Seite „Mein Konto“ mit PHP-Snippets

In diesem Abschnitt verwenden wir WooCommerce-Hooks. Dies liegt daran, dass dies eine der bewährten Methoden ist, die WordPress beim Anpassen Ihrer Website empfiehlt.

Wir werden eine benutzerdefinierte Registerkarte hinzufügen, eine Registerkarte umbenennen, eine Registerkarte entfernen und Registerkarteninhalte zusammenführen.

Hier sind die Schritte, die Sie befolgen müssen, um die Seite „Mein Konto“ programmgesteuert zu bearbeiten:

Melden Sie sich bei Ihrer WordPress-Site an und greifen Sie als Admin-Benutzer auf das Dashboard zu.
Klicken Sie im Dashboard-Menü auf Darstellungsmenü > Themen-Editor-Menü . Wenn die Seite „Design-Editor“ geöffnet wird, suchen Sie nach der Datei mit den Designfunktionen, in der wir die PHP-Code-Snippets hinzufügen.
Wenn Sie die Registerkarte Adresse in Lieferadresse umbenennen möchten, fügen Sie der PHP -Datei den folgenden Code hinzu . Sie können denselben Code verwenden, um jede Registerkarte umzubenennen.

add_filter( 'woocommerce_account_menu_items', 'njengah_rename_address_my_account', 9999 );

function njengah_rename_address_my_account( $items ) {

   $items['edit-address'] = 'Delivery Address';

     return $items;

}

Das ist das Ergebnis:
Wenn Sie die Registerkarte Adresse entfernen möchten, fügen Sie der PHP -Datei den folgenden Code hinzu :

add_filter( 'woocommerce_account_menu_items', 'njengah_remove_address_my_account', 9999 );

function njengah_remove_address_my_account( $items ) {

unset( $items['edit-address'] );

return $items;

}

Hier ist eine vollständige Liste der Registerkarten-Slugs im $items-Array, damit Sie denjenigen auswählen können, den Sie entfernen möchten:

$items = array(

'dashboard' => __( 'Dashboard', 'woocommerce' ),

'orders' => __( 'Orders', 'woocommerce' ),

'downloads' => __( 'Downloads', 'woocommerce' ),

'edit-address'; => _n( 'Addresses', 'Address', (int) wc_shipping_enabled(), 'woocommerce' ),

'payment-methods' => __( 'Payment methods', 'woocommerce' ),

'edit-account' => __( 'Account details', 'woocommerce' ),

'customer-logout' => __( 'Logout', 'woocommerce' ),

);

Auch das Zusammenführen von Tabs und Inhalten ist möglich. Beispielsweise können Sie die Registerkarte „Adressen“ entfernen und ihren Inhalt auf die Registerkarte „Konto“ verschieben. Sie können dies erreichen, indem Sie der PHP -Datei den folgenden Code hinzufügen :

// -----------------------------

// 1. Remove the Addresses tab

add_filter( 'woocommerce_account_menu_items', 'njengah_remove_acc_tab', 999 );

function njengah_remove_acc_tab( $items ) {

unset($items['edit-address']);

return $items;

}

// -------------------------------

// 2. Insert the content of the Addresses tab into an existing tab (edit-account in this case)

add_action( 'woocommerce_account_edit-account_endpoint', 'woocommerce_account_edit_address' );

Das ist das Ergebnis:
Sie können auf dieser Seite auch eine benutzerdefinierte Registerkarte erstellen. Sie können beispielsweise eine neue Registerkarte namens Support hinzufügen, auf der Benutzer ihre Support-Tickets ganz einfach einsehen können. Um dies zu erreichen, fügen Sie der PHP -Datei den folgenden Code hinzu :

/**
* Add New Tab on the My Account page
*/

// ------------------

// 1. Register new endpoint (URL) for My Account page

// Note: Re-save Permalinks or it will give 404 error

function njengah_add_premium_support_endpoint() {

add_rewrite_endpoint( 'premium-support', EP_ROOT | EP_PAGES );

}

add_action( 'init', 'njengah_add_premium_support_endpoint' );

// ------------------

// 2. Add new query var

function njengah_premium_support_query_vars( $vars ) {

$vars[] = 'premium-support';

return $vars;

}

add_filter( 'query_vars', 'njengah_premium_support_query_vars', 0 );

// ------------------

// 3. Insert the new endpoint into the My Account menu

function njengah_add_premium_support_link_my_account( $items ) {

$items['premium-support'] = 'Premium Support';

return $items;

}

add_filter( 'woocommerce_account_menu_items', 'njengah_add_premium_support_link_my_account' );

// ------------------

// 4. Add content to the new tab

function njengah_premium_support_content() {

echo 'Premium WooCommerce Support. Welcome to the WooCommerce support area. As a premium customer, you can submit a ticket should you have any WooCommerce issues with your website, snippets or customization. &amp;lt;i&amp;gt;Please contact your theme/plugin developer for theme/plugin-related support.&amp;lt;/i&amp;gt;&amp;lt;/p&amp;gt;';

echo do_shortcode( ' /* your shortcode here */ ' );

}

add_action( 'woocommerce_account_premium-support_endpoint', 'njengah_premium_support_content' );

// Note: add_action must follow 'woocommerce_account_{your-endpoint-slug}_endpoint' format

Sie können ein Drittanbieter-Plugin wie WPForms verwenden, um die Support-Seite zu erstellen. Danach können Sie den Shortcode in die letzte Zeile einfügen. Das ist das Ergebnis:

Fazit

Inzwischen sollten Sie in der Lage sein, die Kontoseite anzupassen. Wir empfehlen, ein Child-Theme zu erstellen, bevor Sie diese Seite bearbeiten. Dadurch wird sichergestellt, dass Ihre Änderungen bei einem Update nicht verloren gehen. Wir hoffen, dass dieses Tutorial Ihnen die beste Lösung bietet.

So erstellen Sie eine benutzerdefinierte WooCommerce-Mein-Konto-Seite

Benutzerdefinierte WooCommerce-Seite „Mein Konto“.

Schritte zum Bearbeiten der Seite „Mein Konto“ mit PHP-Snippets

Fazit

Ähnliche Artikel