Site icon Hip-Hop Website Design and Development

Problems with WooCommerce Register’s form style [closed]

I’m new to web development using WordPress, and I have come up with an issue I’m struggling to figure out how to solve. I’m using WooCommerce, and I wanted to split the My account page into Login and Registration. For this purpose, I added to the functions.php of my active theme the following piece of code:

add_shortcode( 'wc_reg_form', 'separate_registration_form' );

function separate_registration_form() {
    if ( is_admin() ) return;
    if ( is_user_logged_in() ){ header( "Location: /mi-cuenta" ); die; }
    ob_start();


    do_action( 'woocommerce_before_customer_login_form' );

    ?>

  <div class="woocommerce"> <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' ); ?> <span class="required">*</span></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"><?php esc_html_e( 'Email address', 'woocommerce' ); ?> <span class="required">*</span></label>
      <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'] ) ) : ''; ?>" /><?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"><?php esc_html_e( 'Password', 'woocommerce' ); ?> <span class="required">*</span></label>
           <input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" id="reg_password" autocomplete="new-password" />
        </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-FormRow 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( 'Register', 'woocommerce' ); ?>"><?php esc_html_e( 'Register', 'woocommerce' ); ?></button>
     </p>

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

  </form></div>

  <?php
 
  return ob_get_clean();
}

Then I added the new shortcut to my registration page. Everything worked fine, but there’s something strange with my WooCommerce registration form:

It seems to have a different style with respect to the login form:

Does anyone have an idea on how can I solve this problem?

Thank you very much!