How to add passwordless login to WooCommerce checkout alongside CheckoutWC

CheckoutWC’s enhanced login already eliminates most password friction:

• New customers: Accounts are created automatically without requiring a password. Customers checkout, and an account is generated for them behind the scenes.
• Returning customers: When someone enters an email that matches an existing account, CheckoutWC opens a login modal with a built-in “Lost your password?” link.

For most stores, this covers the common scenarios. The password reset flow is quick: enter email, receive link, set new password, done. That said, some stores prefer a fully passwordless experience where returning customers receive a one-time login link instead of resetting their password. If that’s you, this guide covers how to add passwordless login plugins like Magic Login Pro, Passwordless WP, or similar alongside CheckoutWC.

How it works

You’ll add your passwordless login form to the checkout page using a CheckoutWC action hook. Customers can then choose between:

1. Entering their password (if they remember it)
2. Using the “Lost your password?” link
3. Requesting a magic login link via your passwordless plugin

Both systems work together. CheckoutWC handles the standard flow; your passwordless plugin handles the magic link option.

Adding a passwordless login option

Option A: Add to the login modal

This keeps CheckoutWC’s existing login modal and adds your passwordless option inside it:

/**
 * Add passwordless login option to CheckoutWC login modal
 */
add_action( 'woocommerce_login_form_end', 'add_passwordless_to_checkout_modal' );
function add_passwordless_to_checkout_modal() {
    echo '<div class="passwordless-login-option" style="margin-top: 1em; padding-top: 1em; border-top: 1px solid #eee;">';
    echo '<p style="margin-bottom: 0.5em;"><strong>Prefer a login link?</strong></p>';
    echo do_shortcode( '[magic_login_form]' ); // Replace with your plugin's shortcode
    echo '</div>';
}

Replace [magic_login_form] with the shortcode from your passwordless plugin:

• Magic Login Pro: [magic_login_form]
• Passwordless WP: [passwordless_login_form]
• Other plugins: Check your plugin’s documentation for the correct shortcode

Option B: Add outside the modal

If you want the passwordless option visible on the checkout page itself (not inside the modal), use this hook instead:

/**
 * Add passwordless login option to checkout page
 */
add_action( 'cfw_after_enhanced_login_prompt', 'add_passwordless_to_checkout_page' );
function add_passwordless_to_checkout_page() {
    if ( is_user_logged_in() ) {
        return;
    }
    
    echo '<div class="passwordless-login-checkout" style="margin: 1em 0; padding: 1em; background: #f9f9f9; border-radius: 4px;">';
    echo '<p style="margin-bottom: 0.5em;"><strong>Returning customer?</strong> Get a login link sent to your email:</p>';
    echo do_shortcode( '[magic_login_form]' );
    echo '</div>';
}

Styling your passwordless form

Add custom CSS to match your checkout design. Go to CheckoutWC > Appearance > Custom CSS:

/* Style the passwordless login container */
.passwordless-login-option,
.passwordless-login-checkout {
    margin-top: 1em;
}

/* Style the submit button to match CheckoutWC */
.passwordless-login-option input[type="submit"],
.passwordless-login-checkout input[type="submit"] {
    background-color: var(--cfw-button-color);
    color: var(--cfw-button-text-color);
    border: none;
    padding: 0.75em 1.5em;
    cursor: pointer;
}

Related documentation

• Checkout settings (Registration Style options)
• Pages settings (Disable Automatic Login Modal option)
• WooCommerce Social Login integration