Using the latest version of WooCommerce, I’m trying to get the lost password form to show up on several different pages. The problem is, copying the default form from woocommerce > templates > myaccount > form-lost-password.php
and placing the code on another page would not work.
Here is the default code for the form:
<form method="post" class="lost_reset_password">
<?php if( 'lost_password' == $args['form'] ) : ?>
<p><?php echo apply_filters( 'woocommerce_lost_password_message', __( 'Lost your password? Please enter your username or email address. You will receive a link to create a new password via email.', 'woocommerce' ) ); ?></p>
<p class="form-row form-row-first"><label for="user_login"><?php _e( 'Username or email', 'woocommerce' ); ?></label> <input class="input-text" type="text" name="user_login" id="user_login" /></p>
<?php else : ?>
<p><?php echo apply_filters( 'woocommerce_reset_password_message', __( 'Enter a new password below.', 'woocommerce') ); ?></p>
<p class="form-row form-row-first">
<label for="password_1"><?php _e( 'New password', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="password" class="input-text" name="password_1" id="password_1" />
</p>
<p class="form-row form-row-last">
<label for="password_2"><?php _e( 'Re-enter new password', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="password" class="input-text" name="password_2" id="password_2" />
</p>
<input type="hidden" name="reset_key" value="<?php echo isset( $args['key'] ) ? $args['key'] : ''; ?>" />
<input type="hidden" name="reset_login" value="<?php echo isset( $args['login'] ) ? $args['login'] : ''; ?>" />
<?php endif; ?>
<div class="clear"></div>
<p class="form-row">
<input type="hidden" name="wc_reset_password" value="true" />
<input type="submit" class="button" value="<?php echo 'lost_password' == $args['form'] ? __( 'Reset Password', 'woocommerce' ) : __( 'Save', 'woocommerce' ); ?>" />
</p>
<?php wp_nonce_field( $args['form'] ); ?>
</form>
And here’s what I’m using:
<form method="post" class="lost_reset_password">
<h2 id="reset-h2">Recover your password</h2>
<p id="reset-p">Please enter your email address below to receive a link where you can create a new password</p>
<input class="input-text reset-email-password" type="text" name="user_login" id="user_login" placeholder="Enter your email"/>
<input type="hidden" name="wc_reset_password" value="true" />
<input type="submit" class="button submit-button custom-reset" value="<?php _e( 'Reset Password', 'woocommerce' ); ?>" />
<a href="#" id="reset-back">Back</a>
<?php wp_nonce_field( $args['form'] ); ?>
</form>
Notice that I stripped the else
part because I only want the form where the user submits to get an email with a link to reset their password (which evidently would take you to the code the I’ve removed).
The only thing that I can think of why this isn’t working is because I’m missing the actions like <?php do_action( 'woocommerce_login_form_end' ); ?>
but I wouldn’t know what the action I need for the lost password is.
Would love to get some help on this so let me know if I need to provide anything else, thanks!
Try inserting this line of code into the template file where you want the form to show up:
This maybe an old question, I run into the same problem but the accepted answer will just display the lost password form. After submitting your email address, it will go back to the default form which is located in
my-account/lost-password
.In my case, I want to remove the default
lost password
page or endpoint and use my custom page but I still want to use the default form.So, to completely show the
lost password form
,confirmation message
, andnew password form
in another page;1: Remove the endpoint for Lost Password.
Go to
WooCoommerce
>Settings
>Advanced
, then scroll toAccount endpoints
and you will see theLost password
. Just remove its value and save the settings.2: Change the URL of the default lost password to your new lost password page.
Add the below hook into your
functions.php
, notice the/password-recovery
, change it depending on the slug of your new lost password page..3: Set where to redirect the user after successfully change the password.
In my case, I wanted to redirect the user into
sign-in
page and add a notice message that he/she successfully change the password. Use the below hook to change it depending on your situation, but what ever url you set, make sure to add the query ofnew-password-created=true
at the end of the url just like what I did at"/sign-in/?new-password-created=true"
.4: Create a shortcode for Lost Password Form.
This is where the magic happened, use the below code to create the shortcode for
lost password form
. The default form of WooCoommerce still in used.You can now use the ShortCode
[lost_password_form]
, just put it into your page and the form should be shows up. Notice that you need to change the slug ofpassword-recovery
.5: Change the URL in the email message that send to users when they request for lost password.
Override the templates located at
woocommerce/templates/emails/customer-reset-password.php
andwoocommerce/templates/emails/plain/customer-reset-password.php
.Here’s an example for plain email message;
for non-plain email message;
Just change the url to your page. Note that you need to do it both in plain and non-plain email message.