Load error wc_print_notices to correct woocommerce login or registration form

Question

I have coded the woocommerce login and register forms in a popup element. I have also called the <?php wc_print_notices(); ?> <?php wc_print_notices(); ?> into the popup so error messages are given when applicable. The challenge I face is to show the correct form with the related log in or registration error after submission.

This the php form I use within the popup. The popup shows one form, depending if the user selected to sign in or register in the header. This all works.

function separate_registration_form() {
if ( is_admin() ) return;
ob_start();
if ( is_user_logged_in() ) {
    wc_print_notices();
    } else {
        ?>
          <?php wc_print_notices(); ?>
          <form id="woo-register-form" method="post">...etc...</form>
          <form id="woo-login-form" method="post">...etc...</form>
       <?php
    }
    return ob_get_clean();
}

My current solution is to add a JS trigger when the class .woocommerce-error is in the DOM in order to show the popup. But in this case it shows both forms, and I am looking how to call the right form related to the linked error. So when someone enters an incorrect login password, after page load it shows the popup with login form for example. Can this be done with JS or PHP? Or a combination?

Answer 1

After some digging into the functionallity of the forms, I came with the following solution.

The Forms need to have an action attribute. So this action attribute will be in the address-bar after submitting the form. Then you could add JS to define if the action name is in the address path and if .woocommerce-error is in the DOM to trigger the popup.

So like this:

function separate_registration_form() {
if ( is_admin() ) return;
ob_start();
if ( is_user_logged_in() ) {
    wc_print_notices();
    } else {
        ?>
          <?php wc_print_notices(); ?>
          <form id="woo-register-form" action="#register" method="post">...etc...</form>
          <form id="woo-login-form" action="#login" method="post">...etc...</form>
       <?php
    }
    return ob_get_clean();
}

Let's assume that login-trigger and register-trigger are the buttons to show the forms. Important is to add these actions after page load. The JS will be:

$(window).on('load', function(){
    /*check if #register is in url*/
    if(location.href.indexOf("/#register") > -1){
        /*check if error is in the DOM*/
        if( $('.woocommerce-error').length){
            /*all good, fire off the popup*/
            $('.register-trigger').trigger('click'); 
        }
    }
    /*same for login*/
    if(location.href.indexOf("/#login") > -1){
        if( $('.woocommerce-error').length){
            $('.login-trigger').trigger('click');
        }
    }
});