Come creare una pagina del mio account personalizzata WooCommerce

Pubblicato: 2021-05-11

WooCommerce Pagina personalizzata del mio account Stai cercando un modo per personalizzare la pagina "Il mio account" di WooCommerce? La modifica della pagina dell'account è una delle pagine più importanti in qualsiasi negozio WooCommerce. Questa pagina dovrebbe avere un design straordinario perché è fondamentale per il buon funzionamento dell'intero negozio online.

Dovrebbe essere progettato in modo da consentire agli utenti di sfruttare appieno la maggior parte della gestione dell'account, convertire più vendite e/o invogliare i clienti a effettuare un acquisto ripetuto.

La pagina "il mio account" e le sue sottopagine possono essere visualizzate in qualsiasi punto del tuo sito utilizzando uno shortcode. Gli shortcode sono un modo semplice per aggiungere contenuti dinamici ai tuoi post, pagine e barre laterali di WordPress.

WooCommerce Pagina personalizzata del mio account

In questo breve tutorial, ti mostriamo come personalizzare l'aspetto, l'aspetto, il layout, il contenuto e il design della pagina "il mio account" utilizzando script PHP personalizzati. Ciò significa che è necessario disporre di alcune conoscenze di codifica prima di procedere.

Puoi ottenere quasi tutto in WooCommerce se hai familiarità con la personalizzazione di PHP. Ciò significa che puoi aggiungere una scheda personalizzata, rinominare una scheda, rimuovere una scheda o unire il contenuto della scheda.

Diamo un'occhiata a come puoi raggiungere questo obiettivo.

Passaggi per modificare la pagina Il mio account utilizzando frammenti di PHP

In questa sezione utilizzeremo gli hook di WooCommerce. Questo perché è una delle migliori pratiche che WordPress consiglia durante la personalizzazione del tuo sito.

Aggiungeremo una scheda personalizzata, rinomineremo una scheda, rimuoveremo una scheda e uniremo il contenuto della scheda.

Ecco i passaggi che devi seguire per modificare la pagina Il mio account in modo programmatico:

Accedi al tuo sito WordPress e accedi alla Dashboard come utente amministratore.
Dal menu Dashboard, fai clic su Menu Aspetto > Menu Editor temi . Quando viene aperta la pagina Editor del tema, cerca il file delle funzioni del tema in cui aggiungeremo i frammenti di codice PHP.
Se vuoi rinominare la scheda Indirizzo in Indirizzo di consegna, aggiungi il seguente codice al file php . Puoi utilizzare lo stesso codice per rinominare qualsiasi scheda.

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;

}

Questo è il risultato:
Se vuoi rimuovere la scheda Indirizzo, aggiungi il seguente codice al file php :

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;

}

Ecco un elenco completo delle schede slug nell'array $items, in modo che tu possa scegliere quella che desideri rimuovere:

$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' ),

);

È anche possibile unire schede e contenuto. Ad esempio, puoi rimuovere la scheda Indirizzi e spostarne il contenuto nella scheda Account. Puoi ottenere ciò aggiungendo il seguente codice al file php :

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

// 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' );

Questo è il risultato:
Puoi anche creare una scheda personalizzata in questa pagina. Ad esempio, puoi aggiungere una nuova scheda chiamata Supporto in cui gli utenti possono facilmente dare un'occhiata ai loro ticket di supporto. Per ottenere ciò, aggiungi il seguente codice al file php :

/**
* 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

Puoi utilizzare un plug-in di terze parti come WPForms per creare la pagina di supporto. Successivamente, puoi incollare lo shortcode nella riga finale. Questo è il risultato:

Conclusione

A questo punto dovresti essere in grado di personalizzare la pagina dell'account. Ti consigliamo di creare un tema figlio prima di modificare questa pagina. Ciò garantirà che le modifiche non vadano perse durante un aggiornamento. Ci auguriamo che questo tutorial ti abbia fornito la soluzione migliore.

Come creare una pagina del mio account personalizzata WooCommerce

WooCommerce Pagina personalizzata del mio account

Passaggi per modificare la pagina Il mio account utilizzando frammenti di PHP

Conclusione

Articoli simili