在 WooCommerce 登录页面重新定位自定义注册链接

Question

I have a WooCOmmerce Login Page which I am customizing at the moment, by default the login and registration page are in one page. I had seperated the login and registration pages into 2 seperate forms right now. Currently I would like to put a link for the seperated registration page right below the "Forgot Password" link.

But my output is as follows:

I would like for it to appear as follows:

Below is the action hook I am using for my login page.

add_action( 'woocommerce_after_customer_login_form', 'register_link' );
function register_link() {

    ?>
        <div class="woocommerce-register-link">
            <p><?php _e( '<a href="Registration page Link/">Register a new account here</a>' ); ?></p>
        </div>
    <?php
    
}

Any help would be much appreciated.

Answer 1

This can be done in multiple ways:

1. You can edit the template myaccount/form-login.php to insert your code in the right location.

2. you can use Javascript/jQuery to insert your code in the right location, without editing any template:

// The jQuery Ajax request
add_action( 'wp_footer', 'wc_separated_login_form_js' );
function wc_separated_login_form_js() {
    // Only my account for unlogged users
    if( ! is_user_logged_in() && is_account_page() &&
    'yes' === get_option('woocommerce_enable_myaccount_registration') ):

    // Your button html to insert
    $html = sprintf(
        '<p class="woocommerce-Registerlink register-link"><a href="%s">%s</a></p>',
        home_url('/registration/'), // <== Here set your registration link
        __( 'Register a new account here')
    );

    // jQuery
    ?>
    <script type="text/javascript">
    jQuery( function($){
        $('p.lost_password').after('<?php echo $html; ?>');
    });
    </script>
    <?php
    endif;
}

Code goes in functions.php file of your active child theme (or active theme). Tested and works.