Come personalizzare e separare le pagine di accesso e registrazione in WooCommerce

Che tu usi o meno WooCommerce, potresti già essere consapevole che è una delle soluzioni di eCommerce open source più popolari oggi disponibili. Come con qualsiasi software, tuttavia, presenta alcune limitazioni e svantaggi. In questo articolo affronteremo uno di questi... l'impossibilità di personalizzare completamente e/o separare le pagine di login e di registrazione.

Una delle richieste più comuni degli utenti di WooCommerce è quella di poter aggiornare e personalizzare sia la pagina di login che quella di registrazione. Idealmente, molti utenti vorrebbero anche poter separare queste pagine piuttosto che averle come una pagina "tutto in uno". In questo articolo vedremo come puoi ottenere entrambe queste cose... una pagina di accesso/registrazione completamente personalizzata E separata per il tuo sito WooCommerce.

Iniziamo!

Utilizzo di un plug-in

Forse non sorprende che il modo più semplice per risolvere il dilemma di personalizzazione della pagina di accesso/registrazione sia utilizzare un plug-in. Abbiamo selezionato alcuni dei migliori che potresti prendere in considerazione di utilizzare. Diamo un'occhiata a loro.

Accedi a Woocommerce / Iscriviti Lite

Vai al menu di amministrazione di WordPress e nell'area "Plugin -> Aggiungi nuovo", installa e attiva il plug-in.

Il plug-in Woocommerce Login / Signup Lite è un plug-in gratuito che offre anche una versione premium. Per le nostre esigenze però la versione gratuita dovrebbe andare più che bene. È abbastanza facile da usare. Una volta installato, sarai in grado di creare codici brevi che corrispondono al tipo di modulo richiesto (ad esempio un modulo di accesso o registrazione). Puoi quindi incollare questo shortcode su qualsiasi pagina desideri. Gli shortcode includono:

• Lo [lsphe-login-form] per creare un modulo di accesso.
• Lo [lsphe-signup-form] per creare un modulo di registrazione.
• Lo [lsphe-header] per creare un modulo che includa sia i moduli di accesso che quelli di registrazione.

Puoi vedere gli Shortcode disponibili nell'area di amministrazione del plugin.

Un'altra grande caratteristica che offre questo plugin è la possibilità di creare una finestra popup di accesso/registrazione da una voce di menu. Sembra abbastanza pulito e offre ulteriore flessibilità quando si tratta di offrire opzioni di accesso ai tuoi clienti. Per creare uno di questi segui questi passaggi:

• Fare clic su Aspetto > Menu per accedere alla schermata di amministrazione del menu.
• Usa la freccia in alto a destra per aprire le opzioni dello schermo e abilitare le "Classi CSS" in "Mostra proprietà menu avanzato".

• Crea una voce di menu Collegamento personalizzato e fornisci un URL "#". Assegna un nome all'elemento come preferisci e aggiungilo al menu.
• Una volta che appare nell'elenco dei menu, apri la sua sezione fisarmonica e, nella classe CSS, aggiungi quanto segue: phoen-login-popup-open

Per fare lo stesso per un popup di registrazione, segui gli stessi passaggi e usa la phoen-signup-popup-open e per visualizzare entrambi i moduli usa la phoen-login-signup-popup-open .

Registrazione Utente

Il plug-in per la registrazione dell'utente consente di creare moduli frontend utilizzando i campi di trascinamento della selezione che consentono una facile progettazione e riordino dei moduli.

Dopo aver installato il plug-in, vai alla "Registrazione utente" dove puoi iniziare a creare il tuo modulo di registrazione su misura per il tuo negozio WooCommerce. Noterai che c'è un modulo pre-costruito che ha uno shortcode che puoi copiare e incollare nel tuo sito web in una posizione a tua scelta. Il modulo sarà simile a questo:

Ovviamente puoi modificare il modulo o crearne uno nuovo molto facilmente. Segui semplicemente le istruzioni all'interno del plug-in e sarai subito operativo con un modulo a tua scelta.

Accesso/registrazione popup

Un altro plug-in che vale la pena considerare è il popup di accesso/iscrizione (modulo in linea + Woocommerce). Piuttosto che moduli sulla pagina, il plug-in (come suggerisce il nome) ti aiuta a creare moduli di accesso popup che possono essere attivati ​​da un link o un pulsante sul tuo sito web. I popup possono essere fantastici e possono aiutare a risparmiare spazio sulla pagina, oltre a dare alle persone l'opportunità di accedere da qualsiasi punto del tuo sito senza essere reindirizzati a una pagina di accesso o registrazione specifica.

Come per tutti i plugin elencati, sei libero di personalizzare completamente il design dei moduli. Altre caratteristiche degne di nota includono cose come gli accessi "sociali" che consentono agli utenti di accedere utilizzando i propri accessi Google o Facebook. Questo viene fatto con un componente aggiuntivo del campo di registrazione personalizzato a pagamento.

Codifica le tue pagine di registrazione e accesso a WooCommerce

Se non vuoi utilizzare un plug-in per creare le tue pagine di accesso/registrazione a WooCommerce, allora perché non codificare la tua! Come sempre, la codifica offre il massimo controllo su caratteristiche, design e funzione e quindi è l'opzione perfetta se è necessario svolgere un'attività specifica o se si desidera evitare il potenziale rigonfiamento che viene fornito con un plug-in.

Per iniziare con questo tutorial, imposta prima una voce di menu che si collega alla pagina standard "Il mio account" di WooCommerce. Ora, se visiti questo collegamento di menu sul front-end del sito Web, vedrai il modulo di accesso o un layout a due colonne che contiene sia il modulo di registrazione che il modulo di accesso. Che dipenderà da ciò che hai impostato nell'opzione di creazione dell'account WooCommerce mostrata di seguito.

Utilizzando un client SFTP, accedi al tuo server web in modo da poter vedere le cartelle del tuo sito web. Sotto /wp-content/plugins/woocommerce/templates/myaccount/ troverai il file form-login.php . Apri quel file con il tuo editor preferito.

Il codice in questo file include sia il modulo di accesso che quello di registrazione. Puoi vedere il contenuto di questo file sulla pagina git ufficiale. Lì noterai che esiste una condizione if <?php if ( 'yes' === get_option( 'woocommerce_enable_myaccount_registration' ) ) : ?> che si riferisce all'opzione admin nello screenshot qui sopra.

Usando questo saremo in grado di separare le pagine di accesso e di registrazione, nonché personalizzare i moduli con poche modifiche.

Personalizza il modulo di accesso

Per iniziare, ti consigliamo di assicurarti che tutte le modifiche apportate al modulo di accesso/registrazione vengano eseguite in modo sicuro in modo che non possano essere ripristinate quando avranno luogo aggiornamenti futuri.

Ospita il tuo sito web con Pressidium

GARANZIA DI RIMBORSO DI 60 GIORNI

GUARDA I NOSTRI PIANI

Se hai già effettuato l'accesso tramite il tuo client SFTP, vai su wp-content/themes/__my__theme__ . e crea una cartella 'woocommerce'. All'interno di questa cartella, crea una copia dei modelli Woocommerce. È importante mantenere la struttura del file ma rimuovere la sottodirectory /templates/. Ad esempio, abbiamo installato il tema Twenty Twenty e il form-login.php si trova in plugins/woocommerce/templates/myaccount/ . Ciò significa che per sovrascrivere il modulo, dobbiamo creare una gerarchia come questa: /themes/twentytwenty/woocommerce/myaccount/ e inserire il file form-login.php .

Proviamolo. A questo punto vediamo questo output quando visitiamo la pagina Account sul front-end del nostro sito Web:

Ora, se proviamo a modificare qualcosa nel codice all'interno del duplicato form-login.php , noteremo che influenzerà il layout come previsto. Proviamo una piccola modifica solo per verificare che funzioni. Cambieremo il testo "Ricordami" in "Ricorda le mie credenziali" e voilà, se aggiorniamo la pagina front-end dovremmo vedere che l'aggiornamento ha avuto effetto.

Accesso/Registrazione separati

Ecco i passaggi che devi seguire per separare le pagine di accesso e di registrazione:

Per iniziare registreremo un nuovo modello personalizzato. Per fare ciò, crea un nuovo file chiamato register.php e mettilo nella cartella dei modelli. All'interno di questo file inseriremo il seguente codice:

 <?php /* * Template name: Registration Form */ ?> <?php if(is_user_logged_in()){ wp_redirect(get_permalink(get_option('woocommerce_myaccount_page_id'))); } ?> <?php get_header();?> <?php do_action( 'woocommerce_before_customer_login_form' ); ?> <div class="custom-registration"> <h2><?php esc_html_e( 'Register', 'woocommerce' ); ?></h2> <form method="post" class="woocommerce-form woocommerce-form-register register" <?php do_action( 'woocommerce_register_form_tag' ); ?> > <?php do_action( 'woocommerce_register_form_start' ); ?> <?php if ( 'no' === get_option( 'woocommerce_registration_generate_username' ) ) : ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_username"><?php esc_html_e( 'Username', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <?php endif; ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_email"><?php esc_html_e( 'Email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="email" autocomplete="email" value="<?php echo ( ! empty( $_POST['email'] ) ) ? esc_attr( wp_unslash( $_POST['email'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <?php if ( 'no' === get_option( 'woocommerce_registration_generate_password' ) ) : ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" autocomplete="new-password" /> </p> <?php else : ?> <p><?php esc_html_e( 'A password will be sent to your email address.', 'woocommerce' ); ?></p> <?php endif; ?> <?php do_action( 'woocommerce_register_form' ); ?> <p class="woocommerce-form-row form-row"> <?php wp_nonce_field( 'woocommerce-register', 'woocommerce-register-nonce' ); ?> <button type="submit" class="woocommerce-Button woocommerce-button button woocommerce-form-register__submit" name="register" value="<?php esc_attr_e( 'Register', 'woocommerce' ); ?>"><?php esc_html_e( 'Register', 'woocommerce' ); ?></button> </p> <?php do_action( 'woocommerce_register_form_end' ); ?> </form> </div> <?php do_action( 'woocommerce_after_customer_login_form' ); ?> <?php get_footer();?>

Ciò che abbiamo fatto inizialmente in questo codice è stato definito il nome del modello nel commento Template name: Registration Form . Quindi controlliamo se l'utente ha già effettuato l'accesso. Il resto del codice è essenzialmente una copia della parte del contenuto login-form.php relativa al modulo di registrazione racchiuso in un <div class="custom-registration"> elemento.

Successivamente, aggiungiamo una nuova Pagina nella schermata Pagine wp-admin e la denominiamo come ci piace. Forse avrebbe senso chiamarlo qualcosa come "Pagina di registrazione". Quindi, assicurati di selezionare il modello giusto (quello che abbiamo appena creato) utilizzando il selettore del modello nella barra laterale destra.

Ora tutto ciò che dobbiamo fare è fornire agli utenti un modo per accedere a questa pagina. Puoi creare una voce di menu 'Registrati' e collegarla alla Pagina di registrazione che hai appena creato oppure puoi modificare il form-login.php e sostituire il codice di registrazione con un solo collegamento alla Pagina di registrazione.

Se lo facessimo, modificheremmo il file form-login.php in themes/twentytwenty/woocommerce/myaccount/ modo che il contenuto assomigli a questo:

 <?php /** * Login Form * * This template can be overridden by copying it to yourtheme/woocommerce/myaccount/form-login.php. * * HOWEVER, on occasion WooCommerce will need to update template files and you * (the theme developer) will need to copy the new files to your theme to * maintain compatibility. We try to do this as little as possible, but it does * happen. When this occurs the version of the template file will be bumped and * the readme will list any important changes. * * @see https://docs.woocommerce.com/document/template-structure/ * @package WooCommerce\Templates * @version 4.1.0 */ if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly. } do_action( 'woocommerce_before_customer_login_form' ); ?> <h2><?php esc_html_e( 'Login', 'woocommerce' ); ?></h2> <form class="woocommerce-form woocommerce-form-login login" method="post"> <?php do_action( 'woocommerce_login_form_start' ); ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="username"><?php esc_html_e( 'Username or email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input class="woocommerce-Input woocommerce-Input--text input-text" type="password" name="password" autocomplete="current-password" /> </p> <?php do_action( 'woocommerce_login_form' ); ?> <p class="form-row"> <label class="woocommerce-form__label woocommerce-form__label-for-checkbox woocommerce-form-login__rememberme"> <input class="woocommerce-form__input woocommerce-form__input-checkbox" name="rememberme" type="checkbox" value="forever" /> <span><?php esc_html_e( 'Remember me', 'woocommerce' ); ?></span> </label> <?php wp_nonce_field( 'woocommerce-login', 'woocommerce-login-nonce' ); ?> <button type="submit" class="woocommerce-button button woocommerce-form-login__submit" name="login" value="<?php esc_attr_e( 'Log in', 'woocommerce' ); ?>"><?php esc_html_e( 'Log in', 'woocommerce' ); ?></button> </p> <p class="woocommerce-LostPassword lost_password"> <a href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php esc_html_e( 'Lost your password?', 'woocommerce' ); ?></a> </p> <?php do_action( 'woocommerce_login_form_end' ); ?> </form> <a href="/?p=202">Sign Up</a> <?php do_action( 'woocommerce_after_customer_login_form' ); ?>

Il numero 202 è l'id della pagina di registrazione personalizzata. Come rapido promemoria, puoi vedere l'ID della pagina nell'URL quando è aperto nell'editor di back-end.

Ora, se dai un'occhiata alla pagina dal front-end, dovresti vedere qualcosa di simile quando visiti la pagina dei dettagli dell'account:

Se fai clic sul link Iscriviti dovresti essere reindirizzato alla pagina di registrazione che abbiamo creato come quella mostrata di seguito:

Abbastanza facile non è vero?

Creazione di uno shortcode

La pagina dell'account WooCommerce contiene lo shortcode [woocommerce_my_account] che può essere utilizzato per generare i moduli utilizzando il file form-login.php . In questa sezione vedremo come creare i nostri codici brevi, uno per il modulo di accesso e uno per il modulo di registrazione che abbiamo creato sopra.

Shortcode per la registrazione di WooCommerce

Apri il file functions.php del tuo tema con il tuo editor e inserisci le seguenti righe:

 // REGISTRATION SHORTCODE function wc_registration_form_function() { if ( is_admin() ) return; if ( is_user_logged_in() ) return; // OUR REGISTRATION FORM CONTENT } add_shortcode( 'wc_registration_form', 'wc_registration_form_function' );

In questo modo evitiamo la necessità di utilizzare un modello personalizzato separato. Invece, includeremo il contenuto del modello che abbiamo creato in precedenza in questo modo:

 // REGISTRATION SHORTCODE function wc_registration_form_function() { if ( is_admin() ) return; if ( is_user_logged_in() ) return; ob_start(); do_action( 'woocommerce_before_customer_login_form' ); ?> <form method="post" class="woocommerce-form woocommerce-form-register register" <?php do_action( 'woocommerce_register_form_tag' ); ?> > <?php do_action( 'woocommerce_register_form_start' ); ?> <?php if ( 'no' === get_option( 'woocommerce_registration_generate_username' ) ) : ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_username"><?php esc_html_e( 'Username', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <?php endif; ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_email"><?php esc_html_e( 'Email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="email" autocomplete="email" value="<?php echo ( ! empty( $_POST['email'] ) ) ? esc_attr( wp_unslash( $_POST['email'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <?php if ( 'no' === get_option( 'woocommerce_registration_generate_password' ) ) : ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" autocomplete="new-password" /> </p> <?php else : ?> <p><?php esc_html_e( 'A password will be sent to your email address.', 'woocommerce' ); ?></p> <?php endif; ?> <?php do_action( 'woocommerce_register_form' ); ?> <p class="woocommerce-form-row form-row"> <?php wp_nonce_field( 'woocommerce-register', 'woocommerce-register-nonce' ); ?> <button type="submit" class="woocommerce-Button woocommerce-button button woocommerce-form-register__submit" name="register" value="<?php esc_attr_e( 'Register', 'woocommerce' ); ?>"><?php esc_html_e( 'Register', 'woocommerce' ); ?></button> </p> <?php do_action( 'woocommerce_register_form_end' ); ?> </form> <?php return ob_get_clean(); } add_shortcode( 'wc_registration_form', 'wc_registration_form_function' );

Come puoi vedere, abbiamo chiamato lo Shortcode [wc_registration_form] e abbiamo racchiuso il nostro HTML in una funzione ob_start(). In questo modo attiviamo il buffer di output in modo che l'HTML venga archiviato e restituito come stringa.

Ora siamo pronti per entrare nella nostra area di amministrazione e modificare la nostra pagina di registrazione. Quando hai aperto la pagina di registrazione, inserisci semplicemente lo shortcode [wc_registration_form]. In questo caso puoi utilizzare qualsiasi modello desideri in quanto non dipendiamo dal modello stesso per generare il modulo di registrazione.

Ora, quando apri la pagina di registrazione sul front-end dovresti vedere il modulo di registrazione.

L'uso degli shortcode ci offre una maggiore flessibilità rispetto all'utilizzo di una pagina basata su modelli poiché possiamo modificare il design della pagina complessiva al volo senza dover ricodificare il file modello. Questo di per sé spiega perché gli shortcode sono così popolari in WordPress.

Shortcode di accesso a WooCommerce

Ora abbiamo uno shortcode per il modulo di registrazione, possiamo procedere e crearne uno per il modulo di accesso. Ancora una volta, apri il file functions.php e inserisci il seguente codice:

 // LOGIN SHORTCODE function wc_login_form_function() { if ( is_admin() ) return; if ( is_user_logged_in() ) return; ob_start(); ?> <form class="woocommerce-form woocommerce-form-login login" method="post"> <?php do_action( 'woocommerce_login_form_start' ); ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="username"><?php esc_html_e( 'Username or email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input class="woocommerce-Input woocommerce-Input--text input-text" type="password" name="password" autocomplete="current-password" /> </p> <?php do_action( 'woocommerce_login_form' ); ?> <p class="form-row"> <label class="woocommerce-form__label woocommerce-form__label-for-checkbox woocommerce-form-login__rememberme"> <input class="woocommerce-form__input woocommerce-form__input-checkbox" name="rememberme" type="checkbox" value="forever" /> <span><?php esc_html_e( 'Remember me', 'woocommerce' ); ?></span> </label> <?php wp_nonce_field( 'woocommerce-login', 'woocommerce-login-nonce' ); ?> <button type="submit" class="woocommerce-button button woocommerce-form-login__submit" name="login" value="<?php esc_attr_e( 'Log in', 'woocommerce' ); ?>"><?php esc_html_e( 'Log in', 'woocommerce' ); ?></button> </p> <p class="woocommerce-LostPassword lost_password"> <a href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php esc_html_e( 'Lost your password?', 'woocommerce' ); ?></a> </p> <?php do_action( 'woocommerce_login_form_end' ); ?> </form> <?php return ob_get_clean(); } add_shortcode( 'wc_login_form', 'wc_login_form_function' );

Ora, come per la pagina di registrazione, puoi andare avanti e creare una pagina 'Login', inserire lo shortcode [wc_login_form] e sei a posto.

Se vuoi fare un ulteriore passo avanti e dettare la pagina a cui gli utenti sono indirizzati quando si disconnettono dal tuo sito, puoi usare un hook wp_logout come questo:

 add_action('wp_logout','my_redirect_after_logout'); function my_redirect_after_logout(){ wp_redirect( '/?p=207' ); exit(); }

L'URL /?p=207 utilizzato sopra fa riferimento all'ID della pagina a cui vogliamo indirizzare le persone al logout. Sostituisci questo con l'ID della pagina di logout scelta.

Una nota importante!

Vale la pena ricordare che chiunque può visitare le tue nuove pagine di accesso e/o registrazione… e per chiunque intendiamo anche i bot! È quindi molto importante proteggere il tuo sito Web da registrazioni false e accessi di forza bruta. Per ulteriori informazioni su come proteggere il tuo sito, ti consigliamo vivamente di dedicare del tempo a leggere la nostra guida su Come proteggere il tuo sito Web WordPress e anche Come gestire l'attività di spam sul tuo sito Web WordPress.

Speriamo che questo articolo ti abbia dato alcune idee su come puoi re-immaginare la tua registrazione a WooCommerce e le pagine di accesso e ti abbia fornito gli strumenti per apportare modifiche dove ritieni opportuno.