Woocommerce - Registration page no response on form submit

Question

I'm trying to create a separate registration page for new customers, I successfully created one for the login page by creating a copy of the original file of form-login.php and access it using the following code in functions.php

//create a new shortcode for login PHP and input the shortcode on the created page.
function custom_sign_in( $atts ) {
  return woocommerce_get_template( "myaccount/form-login-custom.php" );
}
add_shortcode('custom_sign_in', 'custom_sign_in');

I just created a new page then used the shortcode for login php.

then the code of login PHP is from the original file of woocommerce/my-account/form-login.php, I just added some class to the elements and hide the registration form via CSS.

Now, with the registration page, I do the same. Unfortunately, it doesn't work. When I tried to click the submit button, nothing works, even hitting enter from the keyboard is not working not even reloading the page. I think I'm missing something but I can't figure out what it is.

here's the code for the registration PHP, I just added some class to the elements to hide the login form, this is also from the original file of form-login.php, I did not delete anything, just added some CSS to hide the unnecessary elements.

<?php

if ( !defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

do_action( 'woocommerce_before_customer_login_form' );
?>

<?php if ( 'yes' === get_option( 'woocommerce_enable_myaccount_registration' ) ) : ?>

<div class="u-columns col2-set customer_registration" id="customer_login">

    <div class="u-column1 col-1">

        <?php endif; ?>

        <h2>
            <?php esc_html_e( 'Login', 'woocommerce' ); ?>
        </h2>

        <form class="woocommerce-form woocommerce-form-login login" method="post">

            <?php do_action( 'woocommerce_login_form_start' ); ?>

            <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
                <label for="username">
                    <?php esc_html_e( 'Username or email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span>
                </label>
                <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>"/>
                <?php // @codingStandardsIgnoreLine ?>
            </p>
            <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
                <label for="password">
                    <?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span>
                </label>
                <input class="woocommerce-Input woocommerce-Input--text input-text" type="password" name="password" id="password" autocomplete="current-password"/>
            </p>

            <?php do_action( 'woocommerce_login_form' ); ?>

            <p class="form-row">
                <label class="woocommerce-form__label woocommerce-form__label-for-checkbox woocommerce-form-login__rememberme">
                    <input class="woocommerce-form__input woocommerce-form__input-checkbox" name="rememberme" type="checkbox" id="rememberme" value="forever" /> <span><?php esc_html_e( 'Remember me', 'woocommerce' ); ?></span>
                </label>
            
                <?php wp_nonce_field( 'woocommerce-login', 'woocommerce-login-nonce' ); ?>
                <button type="submit" class="woocommerce-button button woocommerce-form-login__submit" name="login" value="<?php esc_attr_e( 'Log in', 'woocommerce' ); ?>">
                    <?php esc_html_e( 'Log in', 'woocommerce' ); ?>
                </button>
            </p>
            <p class="woocommerce-LostPassword lost_password">
                <a href="<?php echo esc_url( wp_lostpassword_url() ); ?>">
                    <?php esc_html_e( 'Lost your password?', 'woocommerce' ); ?>
                </a>
            </p>

            <?php do_action( 'woocommerce_login_form_end' ); ?>

        </form>

        <?php if ( 'yes' === get_option( 'woocommerce_enable_myaccount_registration' ) ) : ?>

    </div>

    <div class="u-column2 col-2">

        <h2>
            <?php esc_html_e( 'Register', 'woocommerce' ); ?>
        </h2>

        <form method="post" class="woocommerce-form woocommerce-form-register register" <?php do_action( 'woocommerce_register_form_tag' ); ?> >

            <?php do_action( 'woocommerce_register_form_start' ); ?>

            <?php if ( 'no' === get_option( 'woocommerce_registration_generate_username' ) ) : ?>

            <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
                <label for="reg_username">
                    <?php esc_html_e( 'Username', 'woocommerce' ); ?>
                </label>
                <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="reg_username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>"/>
                <?php // @codingStandardsIgnoreLine ?>
            </p>

            <?php endif; ?>

            <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
                <label for="reg_email" class="csx-custom-label">
                    <?php esc_html_e( 'E-Mail Address', 'woocommerce' ); ?>
                </label>
                <div class="csx-custom-input"><i class="fas fa-at csx-custom-form-icon"></i><input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="email" id="reg_email" autocomplete="email" value="<?php echo ( ! empty( $_POST['email'] ) ) ? esc_attr( wp_unslash( $_POST['email'] ) ) : ''; ?>"/>
                </div>
                <?php // @codingStandardsIgnoreLine ?>
            </p>

            <?php if ( 'no' === get_option( 'woocommerce_registration_generate_password' ) ) : ?>

            <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
                <label for="reg_password" class="csx-custom-label">
                    <?php esc_html_e( 'Password', 'woocommerce' ); ?>
                </label>
                <div class="csx-custom-input"><i class="fas fa-key csx-custom-form-icon"></i><input type="password" class="woocommerce-Input woocommerce-Input--text input-text csx-password" name="password" id="reg_password" autocomplete="new-password"/><a href="#" class="btn-eye-show-password"><i class="fas fa-eye-slash"></i></a>
                </div>
            </p>

            <?php else : ?>

            <p>
                <?php esc_html_e( 'A password will be sent to your email address.', 'woocommerce' ); ?>
            </p>

            <?php endif; ?>

            <?php do_action( 'woocommerce_register_form' ); ?>

            <p class="woocommerce-form-row form-row">
                <?php wp_nonce_field( 'woocommerce-register', 'woocommerce-register-nonce' ); ?>
                <button type="submit" class="woocommerce-Button woocommerce-button button woocommerce-form-register__submit" name="register" value="<?php esc_attr_e( 'Continue', 'woocommerce' ); ?>">
                    <?php esc_html_e( 'Continue', 'woocommerce' ); ?>
                </button>
            </p>

            <?php do_action( 'woocommerce_register_form_end' ); ?>

        </form>

    </div>

</div>
<?php endif; ?>

<?php do_action( 'woocommerce_after_customer_login_form' ); ?>

Anyway, I'm using Dokan plugin too. And this solution doesn't work for me, just in case you think it is duplicate.

Answer 1

This is something related to Dokan. What happened is your default registration form will override by Dokan. To retain the original functionality of the default registration form, you need to remove the dokan vendor registration on it.

Add the below hook in your functions.php.

remove_action( 'woocommerce_register_form', 'dokan_seller_reg_form_fields' );