WooCommerce: login e registrazione separati con shortcode personalizzati
20/06/25
8 minuti

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

  1. Crea una nuova pagina in WordPress (es. “Login”).
  2. Inserisci lo shortcode: [wc_login_form]
  3. 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:

  1. Crea una nuova pagina (es. “Registrati”)
  2. Inserisci lo shortcode: [wc_register_form]
  3. 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:


Hai bisogno di un E-Commerce che funziona davvero?
Contattami Ora!