The Login Popup module allows you to add an elegant and user-friendly login modal to your pages so that your users can log into your site without having to navigate to a separate login page.
This module provides you with a handy shortcode that you can add to any of your pages.
In the screenshot below, you can see the Login popup in a closed state. If the user clicks the Login link, a stylish login popup will appear on the screen (the theme we used for the screenshot is our free Botiga WooCommerce theme — the Login link is added with Merchant Pro):
Here’s what the login popup looks like when it’s expanded — without Merchant Pro, users should navigate to the default WordPress login page to log into your site:
For logged-in users, the module shows a stylish dropdown menu that includes the most important admin pages such as Orders, Downloads, Addresses, Account Details, etc.:
Now let’s see how to configure and enable Merchant Pro’s Login Popup module on your WordPress site.
1. Open the Login Popup Module
First, open your Merchant dashboard by clicking the Merchant menu in the left sidebar of your WordPress admin area.
Find the Improve Experience section, and click the Login Popup module to open its settings page:
2. Configure the Settings
On the admin page of the Login Popup module, you’ll find two groups of settings — we recommend that you review and configure each option before activating the module:
- Settings – This group of options allows you to customize the login link for both logged-in and logged-out users, including the login link text, welcome message, colors, and more.
- Popup Settings – Here, you can change the design of the login modal, including the popup width and the colors of the title, text, icons, links, and buttons.
Once you’ve configured all the settings, click the Save button in the top-right corner of the page.
3. Enable the Login Popup Module
To activate the module, click the Enable button at the top of the page:
4. Add the Login Popup Shortcode to Your Pages
Once the module is enabled, you can use the [merchant_login_popup] shortcode to add the login popup to any of your pages.
How to Add the Login Popup Shortcode to Individual Pages?
You can use the Shortcode block of the WordPress block editor to insert Merchant Pro’s Login Popup shortcode into a post, page, or custom post type:
How to Add the Login Popup Shortcode to a Menu?
If you want to add the login popup link to the menu, you’ll need a theme or plugin that enables you to add shortcodes to your menus — as neither WordPress nor WooCommerce provides this feature by default.
Below, we’ll see how you can add the login popup shortcode to your top menu using the enhanced header builder feature of our Botiga Pro theme (note that Botiga Pro is, in fact, a companion plugin that extends our free Botiga WooCommerce theme with advanced functionality).
After you installed and activated both Botiga and Botiga Pro, open the Customizer using the Appearance > Customize menu in your WordPress admin area.
Once the Customizer opens, click the Navigation > Header menu, then find the Shortcode component among the available components at the bottom of the Customizer panel:
Then, simply drag it to the location in the header builder where you want it to appear on your site.
Once the Shortcode component is added to your header, click the little gear icon inside the component to open its settings.
Insert the [merchant_login_popup] into the input field, review and configure the design settings of the component (e.g. alignment, visibility, colors, padding, etc.), then click the Publish button to make the changes live:
