Pro Login Popup

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):

Frontend view of the Login link for logged-out users, added with the Login Popup module

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:

The Login Popup in expanded state, screenshot

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.:

Frontend view of the Login Popup dropdown menu when it's shown to logged-in users

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:

Location of the Login Popup module on the Merchant dashboard of the WordPress admin area

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:

  1. 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.
  2. 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.
Settings of Merchant Pro's Login Popup module

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:

Location of the Enable button on the Login Popup module's Settings page, annotated screenshot

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:

WordPress block editor with a Shortcode block and the merchant_login_popup screenshot, annotated screenshot

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:

Location of the Shortcode component in Botiga Pro's header builder before its added to the page

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:

Location of the Shortcode component and its settings in Botiga Pro's header builder after its added to the page