Overriding the default WooCommerce Login Form

Here is our situtation. One of our website is using both WooCommerce and Ultimate Member.

We are using Ultimate Member to implement a more sophlicated member managment, including registration process, and persisting more membership related user data.

One of the problem is that, both plugins have there own login page. So we now have 3:

The default WordPress login page
WooCommerce login. When you go /my-account, you will be routed to that if you are not logged in.
The Ultimate Member login page

Obviously, this is confusing to everybody. So here we don’t want to use the WooCommerce login. In the site menu, we provide an menu item to /login, which is a page to the Ultimate Member login page.

We also have problem the /my-account link somewhere. This is necessary for customers to reach to the WooCommerce dashboard to check their order details. But it is default to WooCommerce’s login if user is not logged int yet.

What we need to do is that, when users reach to /my-account page before logging in, instead of being routed to the WooCommerce login page, we want to route them to the Ultimate Member /login page instead.

This seems not as straight forward as we thought! Let’s look at the WooCommerce source code:

if (isset($wp->query_vars['lost-password']) ) {
    self::lost_password();
} else {
    wc_get_template('myaccount/form-login.php');
}

We are here after the login form handling is done. The code is the form-login template to display the form directly. There is no obvious hooks to override the this behavior.

Finally, we found it. Looking into the form-login.php, there is a hook!

<?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' ); ?>

Solution

We can do a redirect right here!

add_action( 'woocommerce_before_customer_login_form', array( $this, 'redirect_login' ) );

/**
 * RedirectL Login.
 */
public function redirect_login() {
	wp_safe_redirect( get_site_url( null, '/login' ) );
	exit;
}

Here we use the WordPress recommended way to do redirect. See their official documentation here. And make sure you do exit after that.

Conclusion

That’s it! That’s the beauty of WordPress. Once you figure it out, just a small piece of code can get it done.

Overriding the default WooCommerce Login Form

Solution

Conclusion

Recent Comments