Login/Registration form that will show before checkout

Requiring customers to login or register before checking out may sound counter-intuitive; but in some cases this can have a positive effect on the user experience and also conversion rates. Besides that it can prevent fraud orders *to some degree*.

The web-giant Amazon is a example that requires having a account to continue ordering your products. If you’ve never ordered there before and simply want to get the products in your cart the quickest way it may be a small annoyance, but having an account to track and review past orders definitely is useful in the future. Not to mention that making future purchases a lot easier.

This also does not mean you cannot offer a guest checkout at all, it all depends on what you think is best for your webshop. In this post I’ll show you how you can create a login or registration page that will appear as a step between the cart and checkout if the user is not logged in.

Creating a Login/Registration Page

The first thing you’d to do is create the login/registration page. You can also decide to use the existing ‘My Account’ login page as that is very close to what we’re looking for. I however created a sub-page to the checkout so that the page is available under the domain.com/checkout/login URL.

On this page you could include the [woocommerce_my_account]shortcode, this is again something that is very close to what we’re after, since we’ll only go there when logged out it will not show the actual my-account page details when logged in.
However this is limiting what you can do a bit (changing text/adding additional formatting), so I’ll also show how you can create your own shortcode for a login/registration form.

With the code snippet below we’ll be able to use a [wc_login_register]shortcode on the page to display (and customize) our own login/registration forms.

It is quite a large code snippet as it contains 2 fully functioning forms that are close-to but not exactly the same as other login/registration forms within WooCommerce. Luckily this does give us the freedom to modify texts easily to fit the use.

This is how the login/registration page should approximately look like now;

Forcing the Login Page Before Checkout

Now the actual code that comes in and make sure the login page is showed before the checkout page is available. You’ll need to know the page ID of the page you’d like to show, this can be found in the URL when editing the page.
(2555 is my page ID, thats what you’d need to change)

This code ensures the login page is shown before being able to go to the checkout for guest users, but also ensures a redirect to the checkout for logged in customers who enter the page URL directly in the address bar.

About the author: Jeroen Sormani is actively building WordPress, WooCommerce and Easy Digital Downloads plugins. Slightly obsessed by writing high quality code.
Follow Jeroen on Twitter

One comment

  1. Hey Jeroen,

    Great Job! The only thing now is that customers can’t neither logout or access to “my account” section. Every time they click in logout it keeps redirecting them to the checkout page.

    How can we fix that?

Leave a Reply

Your email address will not be published. Required fields are marked *