Kevin Muldoon

Giving You the Tools to Make Money Online

  • Home
    • Detailed Guides & Tutorials
    • Reviews
    • Internet Marketing
    • Archives
  • YouTube
  • WordPress
  • Hosting
    • Shared Hosting
    • VPS Hosting
    • Dedicated Hosting
    • Cloud Hosting
    • Managed WordPress Hosting
    • Web Hosting Deals
  • Webmaster Resources
  • Contact
    • Services
    • Advertising
    • Support
  • About
    • Books
    • Subscribe
    • Amazon Reviews
Home » WordPress » WordPress Tutorials » How to Create a Beautiful WooCommerce Login Pop-up for Your Store

How to Create a Beautiful WooCommerce Login Pop-up for Your Store

October 25, 2017 By Bernadette Lee 2 Comments


  • Facebook
  • Twitter
  • Google+
  • LinkedIn
  • Reddit

Give your store a distinct look from page to page. Not only you should create attractive product pages, but you should also make a beautiful WooCommerce login. Excite customers with elegant login and registration pages.

These will sure add to their pleasant experience in your store. Moreover, create login and registration pages that pop up, so they stay on the page while logging in and can quickly carry on shopping right after. In addition, you can show off your branding when customizing your login and registration pages.

Creating Beautiful Woocommerce Login and Registration Pages

This article will show you exactly how to easily create a beautiful woocommerce login and registration page using the plugin, WooCommerce Login Popup and Shortcodes. This plugin lets you create a pop-up login area. No need for customers to navigate to a new page, thus reducing their wait time to get signed in.

With WooCommerce Login Popup and Shortcodes you can opt for a registration page that pops-up, too. Aside from making your sign-up page eye-candy, you let your customers register more quickly. They sure don’t want to wait too long to go shopping.

Customers prefer quick-and-easy login, and when they forget their passwords, they feel like being punished for taking extra steps to regain access to their accounts. With WooCommerce Login Popup and Shortcodes, you can let them regenerate their own password quickly and easily with the ”forgot password” popup feature.

WooCommerce Login Popup and Shortcodes completes your customers’ shopping experience with a navigation dashboard which shows up when they’re logged in to their accounts.

Step by Step Guide

Create Popup Login Page

Step 1

From your WordPress dashboard, go to “Plugins > Add New”. In the “Add Plugins” page, type “WooCommerce Login Popup and Shortcodes” into the Keyword Search field. Next, click “Install Now”. Finally, click the “Activate” button after the download is complete.

Add New Plugin

Step 2

Go to WooCommerce > Login Popup. Next, on the settings page, enable popup.

Select Background Image

Then, click the “Select or Upload Image” button. Select or upload your login page image, and click the “Use as Background” to exit back to the settings page.

Use as Background

Your chosen image must now be visible. Don’t forget to save changes.

Background Image Selected

Step 3

Copy the CSS code found on the “Enable Popup” area.

Copy Shortcode

After that, go to Appearance > Menus. On the “Pages” list, click “Custom Links”. On the URL field, type in #; then, on the Link Text, type in “Login”. Finally, click the “Add to Menu” button. You will notice that “Login” is added among the items listed in the Menu Structure.

Add to Menu

Step 4

Click the “Screen Options” tab found on the upper-right hand corner of the Menus page to reveal the advanced menu properties; then, tick “CSS Classes”.

CSS Classes

After that, under the Menu Structure, click “Login”; then, paste the code you copied earlier into the “CSS Classes” field. Lastly, click the “Save Menu” button.

Optional CSS Classes

You should be able to find the “Login” link at the front end. Next, click it to see that it pops up.
On the page you will find the registration and forgot password links, but you want to add a registration link to the menu. Go through the steps below.

Add “Register” Link to the Menu

Step 1

Go to “Appearance > Menus”. On the Pages list, click “Custom Links”. On the URL field, type in #; then, on the Link Text, type in “Register”. Click the “Add to Menu” button.

Add Register Link

Step 2

Then, under the Menu Structure, click “Register” and paste the code you copied earlier into the “CSS Classes” field; then, click the “Save Menu” button.

Paste CSS Classes Code

Step 3

Go to WooCommerce > Login Popup. On the Helpful Guides section, copy the register URL.

Helpful Guides

Step 4

Go back to Appearance > Menus. Under the Menu Structure, click “Register” again, but this time, paste the link into the URL field. Click “Save Menu” to finish; then, go to the front end and find that the Register link is added to the menu.

Paste CSS Classes Code

Now that you have both the Login and Register links in place, what you want to do next is to be able to access the login box anywhere you want. Follow these simple steps:

Create a Login/Register Page Link You Can Share Anywhere

Step 1

Click WooCommerce > Login Popup and then copy the shortcode.

Copy the Shortcode

Step 2

Go to Pages > Add New. On the Title field, type in “Login”; then, paste the shortcode into the Text field. Click the “Publish” button.

Paste Shortcode

Once it’s published, the “View page” link appears. Right-click on it to copy link address.

Pull up a new browser window and open the page. Your login page appears complete with “register” and “forgot password” links.

Login Form

When logged in, navigation links will be shown to the user.

Navigation Links

That’s all there is to it.

All you need to do is download WooCommerce Login Popup and Shortcodes from your WordPress admin area or from WordPress.org. You can then start creating a beautiful login and registration popup form for your store.

  • Facebook
  • Twitter
  • Google+
  • LinkedIn
  • Reddit

Related

About Bernadette Lee

Bernadette is the Content Marketer for PHPBITS Creative Studio, the creator of Widget Options plugin for better WordPress widgets management. She’s a food enthusiast and a big fan of American bluegrass music.

Comments

  1. Saipriya Thirvakadu says

    February 19, 2018 at

    How to make it run automatically as soon as the page loads?

    Reply
    • kelechizuvaa says

      April 23, 2018 at

      i have the same question

      Reply

Leave a Reply Cancel reply

Kevin Muldoon
I am an experienced blogger and internet marketer who loves working with WordPress. I make money on the internet through blogs, content websites and forums.Read More

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 4,297 other subscribers

Categories

Featured Articles

  • How to Earn Up to $7,500 for One Referral with WP Engine
  • 15 Great FeedBurner Alternatives
  • 101 Fantastic WordPress Themes for SEO Companies & Digital Agencies
  • 21 Versatile Non-Profit WordPress Themes
  • How to Make Money with an Online Arcade
  • 11 Reasons I Love The Genesis Framework
  • Case Study: The Relaunch of Martial Arts Videos
  • A History of the World’s Tallest Structures
  • Eleven Reasons Affiliate Marketing Sucks
  • MemberPress Review: A Powerful Membership Plugin for WordPress

Recent Posts

  • Check for Plagiarised Content with PlagiarismCheck.org
  • Hosting24 – Shared Hosting & VPS Hosting at a Great Price
  • 5 WordPress Plugins That Can Help You Increase Your Startup Sales
  • Cryptocurrency Trading Isn’t for Everyone
  • Small YouTube Channels are Now Demonetised
  • The Best Cryptocurrency Investment Strategy
  • The Media are the Puppets of Banks and Corporations

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 4,297 other subscribers

Rise Forums - Internet Marketing ForumsAre you looking for help with your website?

Do you want to learn more about SEO, website development, and making money online?

If so, I encourage you to join us on Rise Forums and become a part of the fastest growing internet marketing community on the internet.

Copyright © 2018 Kevin Muldoon