Hai bisogno di un E-Commerce che funziona davvero?
Contattami Ora!WooCommerce: login e registrazione separati con shortcode personalizzati
La pagina “Il mio account” di WooCommerce mostra login e registrazione nello stesso posto, usando il noto shortcode [woocommerce_my_account]
.
Sebbene comodo in alcuni casi, non è ideale per landing page, funnel di vendita o siti in cui serve separare chiaramente accesso e registrazione.
In questa guida vedremo come ottenere due moduli distinti, completamente integrati con WooCommerce, con il supporto per:
- Validazione email
- Reindirizzamento post-login
- Password strength meter
- Stili nativi WooCommerce
Tutto grazie a due shortcode personalizzati e un piccolo snippet PHP.
Shortcode per login WooCommerce personalizzato
Il primo passo è creare un form di login indipendente, utilizzabile su una qualsiasi pagina WordPress. Il modulo sarà compatibile con il sistema WooCommerce e manterrà le funzionalità native (es. redirect post-login, gestione errori, validazione).
Ecco lo shortcode per il login:
// Shortcode per solo il login WooCommerce
add_shortcode('wc_login_form', function () {
if (is_user_logged_in()) {
$logout_url = wp_logout_url(home_url()); // Oppure dove vuoi reindirizzare l'utente
ob_start();
?>
<p>Sei già loggato.</p>
<p><a href="<?php echo esc_url($logout_url); ?>" class="button woocommerce-Button">Logout</a></p>
<?php
return ob_get_clean();
}
ob_start();
woocommerce_login_form([
'redirect' => home_url(), // Cambia questo URL se vuoi reindirizzare altrove
'hidden' => false,
]);
return ob_get_clean();
});
Come usarlo
- Crea una nuova pagina in WordPress (es. “Login”).
- Inserisci lo shortcode:
[wc_login_form]
- Salva. Fatto: la pagina mostrerà solo il form di login, in stile WooCommerce.
Caratteristiche:
- Compatibile con tutti i temi WooCommerce
- Include reindirizzamento dopo il login (puoi personalizzarlo)
- Mostra un link “Logout” se l’utente è già autenticato
Shortcode per registrazione WooCommerce personalizzata
WooCommerce non fornisce uno shortcode nativo per mostrare solo il form di registrazione, ma grazie a questo snippet puoi ottenere una soluzione perfettamente integrata, compatibile con tutte le impostazioni di WooCommerce (username, password, validazioni, reCAPTCHA, ecc.).
Shortcode per la registrazione:
add_shortcode('wc_register_form', function () {
if (is_user_logged_in()) {
return '<p>Sei già registrato e loggato.</p>';
}
if ('yes' !== get_option('woocommerce_enable_myaccount_registration')) {
return '<p>La registrazione è disabilitata.</p>';
}
ob_start();
?>
<form method="post" class="woocommerce-form woocommerce-form-register register">
<?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' ); ?> <span class="required">*</span></label>
<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="reg_username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" />
</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' ); ?> <span class="required">*</span></label>
<input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="email" id="reg_email" autocomplete="email" value="<?php echo ( ! empty( $_POST['email'] ) ) ? esc_attr( wp_unslash( $_POST['email'] ) ) : ''; ?>" />
</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' ); ?> <span class="required">*</span></label>
<input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" id="reg_password" autocomplete="new-password" />
</p>
<?php else : ?>
<p><?php esc_html_e( 'A link to set a new password will be sent to your email address.', 'woocommerce' ); ?></p>
<?php endif; ?>
<?php do_action('woocommerce_register_form'); ?>
<p class="woocommerce-FormRow form-row">
<?php wp_nonce_field('woocommerce-register', 'woocommerce-register-nonce'); ?>
<button type="submit" class="woocommerce-Button button" 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();
});
Come usarlo:
- Crea una nuova pagina (es. “Registrati”)
- Inserisci lo shortcode:
[wc_register_form]
- Assicurati di avere attivata la registrazione clienti in:
WooCommerce → Impostazioni → Account e privacy → “Permetti ai clienti di creare un account…”
Sicurezza e compatibilità:
- Supporta nonce di sicurezza WooCommerce
- Compatibile con i campi extra tramite hook (
woocommerce_register_form
) - Funziona con qualsiasi stile del tuo tema grazie alle classi WooCommerce native
Caricare stili e script WooCommerce sulle pagine login/registrazione personalizzate
Se utilizzi shortcode personalizzati fuori dalla classica pagina “Il mio account”, WooCommerce non carica automaticamente i suoi stili e script.
Questo significa che moduli come il form di registrazione o il password strength meter potrebbero apparire non formattati o non funzionare correttamente.
Per risolvere questo problema, ecco un codice che forza WooCommerce a caricare tutti gli stili necessari, solo sulle pagine personalizzate che scegli tu (es. “login” e “registrazione”).
Snippet: carica stili e script WooCommerce su pagine custom
add_action('wp', function() {
// Slug delle pagine su cui caricare stili WooCommerce
$custom_pages = ['login', 'registrazione']; // personalizza se usi slug diversi
if ( is_page($custom_pages) ) {
// Aggiungi le classi body necessarie per lo stile WooCommerce
add_filter('body_class', function($classes) {
$classes[] = 'woocommerce';
$classes[] = 'woocommerce-page';
return $classes;
});
// Forza il caricamento degli stili e script WooCommerce
add_action('wp_enqueue_scripts', function() {
if (class_exists('WooCommerce')) {
wp_enqueue_style('woocommerce-general');
wp_enqueue_style('woocommerce-layout');
wp_enqueue_style('woocommerce-smallscreen');
wp_enqueue_style('woocommerce-inline');
wp_enqueue_script('wc-password-strength-meter');
wp_enqueue_script('wc-country-select');
wp_enqueue_script('woocommerce');
wp_enqueue_script('wc-cart-fragments');
}
}, 20);
}
});
Risultato
- I moduli di login e registrazione mantengono aspetto nativo WooCommerce
- Funziona anche con plugin di sicurezza o cache
- Performance-friendly: attivo solo sulle pagine indicate
Conclusione
Separare login e registrazione in WooCommerce è una scelta strategica che migliora l’esperienza utente, rende più efficaci le landing page e riduce la confusione durante l’onboarding.
Grazie agli shortcode personalizzati che ti ho mostrato, puoi ottenere moduli puliti, flessibili e completamente integrati con WooCommerce — il tutto senza dover installare plugin aggiuntivi.
In sintesi:
- Hai un form di login indipendente, personalizzabile e pronto per qualsiasi redirect
- Hai un form di registrazione separato, compatibile con i tuoi campi personalizzati
- I tuoi stili WooCommerce restano attivi, anche su pagine custom
- Puoi migliorare conversioni, usabilità e sicurezza
💡 Hai bisogno di aiuto per personalizzare WooCommerce?
Sono uno sviluppatore WordPress specializzato in eCommerce con WooCommerce. Se cerchi un professionista per:
- Creare un’esperienza utente su misura
- Personalizzare il checkout
- Ottimizzare il funnel di vendita
- Risolvere problemi tecnici
👉 Contattami oggi stesso per sviluppare il tuo sito WooCommerce su misura
📍 Servizio attivo a Genova e in tutta Italia
🔗 Scopri di più sul mio servizio di sviluppo e ottimizzazione di ecommerce con WooCommerce: