Creating a User-friendly Login and Register Popup
Configure General Settings
To configure the behavior of login and registration popups on your WooCommerce store, navigate to WooCommerce > Easy Login and Register Popup > General tab. In this section, you can customize various options, including:
Enable: Enable or disable the login and registration popup feature
Enable: Activate this to show the login and registration popup on the checkout page
Popup size: Specify the popup size in pixels. Default value is 500
Close popup by clicking on the background: When enabled, this option allows users to close the popup by clicking on the overlay background
Blur background: Enable this to blur the page background when the popup is opened
Popup animation: Apply animation effects to the popup. Default values are fade-in and fade-out
- Entrance animation: Choose the entrance animation effects for the popup. You can choose from the following types of animations:
- Fading entrances
- Bouncing entrances
- Flippers
- Sliding entrances
- Zoom entrances
- Exit animation: Choose the exit animation effects for the popup You can choose from the following types of animations:
- Fading exits
- Bouncing exits
- Flippers
- Sliding exits
- Zoom exits
Close popup Icon: Set a custom icon for the Close button in the popup (Default = X icon)
- Upload image: Upload a custom image
- Remove image: Remove the custom image
Color:
Popup Background Color: Specify the background color of the popup.
Popup Header Background Color: Set the background color for the popup’s header.
Popup Text Color: Choose the color for the text within the popup.
Popup Link Colors: Customize the colors for links within the popup.
- Background Color: Define the background color for links.
- Hover Color: Set the color that links change to when hovered over.
Button Colors: Configure the colors for buttons within the popup.
- Background Color: Set the background color for buttons.
- Hover Color: Define the color that buttons change to when hovered over.
Button Border Colors: Customize the border colors for buttons.
- Background Color: Specify the background color for button borders.
- Hover Color: Define the color that button borders change to when hovered over.
Button Text Colors: Configure the text colors for buttons.
- Background Color: Set the background color for button text.
- Hover Color: Define the color that button text changes to when hovered over.
Overlay background color: Specify the background color of the overlay behind the popup
Click “Save Changes” after adjusting all these settings to your preferences.
Customize First Step Options:
Go to the First Step Options tab to configure the following
Popup Header Text: define the text that will appear in the header of the popup (example: Proceed to Login)
Popup Title: Set a title for the popup
Custom Text before the form: Enter the custom text that will be displayed before the login and registration form
User Input Label: Define the text that will appear as a label or placeholder within the email or username input field
Button Text: Enter the text for the button that will redirect user to the next step
Click “Save Changes” to save the changes you have made.
Set Login Options
For configuring login settings, go to WooCommerce > Easy Login and Register Popup > Login Options tab. Here, you can customize login popup options, including:
Popup Header Text: Define the text that will appear in the header of the login popup
Popup Title: Set a title for the login popup
Custom Text before the Password Form: Include custom text that will be displayed before the password input form in the login popup
Password Input Label: Define the label or placeholder text for the password input field
Button Text: Specify the text that will be displayed on the login button within the popup
Don’t forget to click “Save changes” to apply your custom login settings.
Adjust Register Options
The Register Options tab lets you configure the settings related to registration:
1. Register Options
Popup Header Text: Define the text that will appear in the header of the registration popup
Popup Title: Set a title for the registration popup
Custom Text before the form: Add custom text that will be displayed before the registration form
Password Input Label: Define the label for the password input field
Password Strenght Check: Enable this option to add an additional password strength check
Privacy Policy Checkbox: Enabling this option will add a Privacy Policy checkbox to the registration form
- Privacy Policy Text: Enter the privacy policy text. Use [terms] as placeholder for the Terms and Conditions page and [privacy_policy] as a placeholder for the Privacy Policy page
- Check Privacy Policy by Default: If enabled, the Privacy Policy option will be pre-checked by default
Button Text: Specify the text that will be displayed on the registration button within the popup
2. Google ReCaptcha
Enable Google Recaptcha: Enable this to add reCaptcha (v2) verification to register form
- Google reCaptcha Public Key: This is your Google reCaptcha site key, which you can obtain from Google
- Google reCaptcha Secret Key: This is your Google reCaptcha secret key
After configuring these registration options, click “Save Changes” to apply your custom settings for the registration popup in the WooCommerce Easy Login Popup plugin.
Modify Lost Password Options
To customize the lost password popup, allowing users to recover their password, go to WooCommerce > Easy Login and Register Popup > Lost Password Options. You can configure:
1. Lost Password Options
Popup Header Text: Define the text that will appear in the header of the lost password popup
Popup Title: Set a title for the lost password popup
Enter the Text before the Email Form: Add custom text that will be displayed before the email input form in the lost password popup
User input Label: Define the label or placeholder text for the email input field
Button Text: Specify the text that will be displayed on the button within the lost password popup
2. Recover Password Options
Recover Password Type: Choose the recovery password type:
- Classic: Users will receive a link by email to reset the password
- With Code: Users will receive a code by email to set a new password without leaving the checkout process
Popup Title: Set a title for the email options popup that appears when users request to recover their password
Custom Text: Add custom text that will be displayed before the email form in the email options popup
Resend Email Label: Enter the label text for the option to resend the recovery email
After configuring these options, make sure to save your changes to apply them to the lost password popup.
Create Additional Popup
Use the login and registration popup outside the checkout process by specifying CSS selectors. Navigate to WooCommerce Easy Login and Register Popup > Additional Popup.
Enable: Enable this option to use the login and registration popup in locations other than the checkout process
Enter the ID or Class of the element that will open the popup: Specify the CSS selector (either ID or CLASS) of the element on your website that will trigger the login and registration popup
Popup title: Set a title for the additional popup
Register Button Text: Specify the text that will be displayed on the registration button
Don’t forget to click “Save changes” to apply your settings for the additional popup functionality.
Generate Popup Shortcode
Go to Popup Shortcode tab to manage the settings related to the integration of login and registration popups using shortcodes. You can configure the following options in this tab.
Shortcode for Popup: This is the shortcode you can use to insert the popup
Popup Label: Set the popup shortcode label
Click “Save changes” to apply the new settings.
