How to Create a WooCommerce Login Shortcode
You may already be aware that WooCommerce is one of the most popular open-source eCommerce systems available today, whether or not you use it. The ability to change and configure both the login and registration pages is one of the most common requests from WooCommerce users. Many users would prefer the ability to divide these pages rather than having them all on one page.
In this article, I will show you How to Create a WooCommerce Login shortcode to upgrade your online store ultimately!
Table of contents
- What is WooCommerce Login Shortcodes?
- How to create a WooCommerce login shortcode
- 3 Best WooCommerce Login Plugins
What is WooCommerce Login Shortcodes?
To access some material on your site, users must input a username (or email address) and password into a WooCommerce login shortcode.
You may use a login shortcode for your WooCommerce store in a variety of ways:
- Creating a clickable login button to avoid redirecting users to a new page
- Allowing the general public to enter your store but only allowing members to - proceed to the checkout
- Providing members with the option of logging onto your site as soon as they arrive
- Creating product pages or material that is exclusively available to members
- You can restrict access to your complete WooCommerce site to members exclusively.
How to create a WooCommerce login shortcode
Step 1: Make Use of a Plugin
Install and activate the plugin from the WordPress admin menu’s “Plugins -> Add New” section.
The Woocommerce Login / Signup Lite plugin is a free option with a premium version available. However, for our purposes, the free version should be enough. It’s quite simple to use. You’ll be able to develop shortcodes that correspond to the type of form you need after it’s installed (e.g. a login or registration form). After that, you may paste the shortcode onto any page you choose. The following are examples of shortcodes:
- To construct a login form, use the [lsphe-login-form] shortcode.
- To construct a registration form, use the [lsphe-signup-form] shortcode.
- To construct a form that includes both login and registration forms, use the [lsphe-header] shortcode.
In the plugin’s admin page, you can see all of the available Shortcodes.
The ability to create a popup login/registration window from a menu item is another wonderful feature of this plugin. This looks nice and gives you more alternatives when it comes to providing login options to your customers. Follow these steps to make one of these:
- To access the menu admin screen, go to Appearance > Menus.
- Open the screen options with the arrow in the upper right corner and check the box next to ‘CSS classes’ in the ‘Show Advanced Menu properties’.
- Create a “#” URL for a Custom link Menu item. Add the item to the menu and give it whatever name you wish.
- When it displays in the menu list, open the accordion section and add the following CSS class: phone-login-popup-open
Follow the same methods for a registration popup and use the [phoen-signup-popup-open] class, and the [phoen-login-signup-popup-open] class to display both forms.
Step 2: Create Your Own WooCommerce Sign-Up and Login Pages
As always, coding gives you complete control over features, design, and function, making it the ideal choice if you need to complete a specific task or avoid the bloat that comes with using a plugin.
To begin, create a menu item that links to the usual WooCommerce ‘My Account’ page. If you go to this menu link on the website’s front end, you will see either the login form or a two-column layout that includes the registration and login forms. This will be determined by the settings you choose in the WooCommerce Account creation option displayed below.
Log in to your web server with an SFTP client to see your website folders. The form-login.php file can be found in /wp-content/plugins/woocommerce/templates/myaccount/. Open the file with your preferred editor.
Both the login and registration forms are coded in this file. The contents of this file are available on the official git page. You will notice an if condition there: ?php if ( ‘yes’ === get option( ‘woocommerce enable myaccount registration’ ) ):?> In the screenshot above, this relates to the admin option.
With a few adjustments, we will be able to separate the login and signup sites, as well as modify the forms.
1. Make your own Login Form
To begin, make sure that any modifications you make to the login/registration form are made in a secure manner so that future updates cannot undo them.
Go to wp-content/themes/ my theme__. and create a WooCommerce folder if you’re already logged in via SFTP. Make a duplicate of the Woocommerce templates in this folder. The file structure must be preserved, however the /templates/ subdirectory must be removed.
When we go to the Account page on the front end of our website, we get the following output:
If we try to change anything in the code inside the form-login.php duplicate now, we will see that it has the desired effect on the layout. Let’s make a tiny adjustment to see whether it works. We will modify the content in the “Remember me” box to “Remember my Credentials,” and if we refresh the front end page, we should see the change.
2. Separate Login and registration
The following are the steps to separate the login and registration pages:
We will start by registering a new custom template. Create a new file called register.php in the templates folder to accomplish this.
The template name was defined in the Template name: Registration Form comment, which was the first thing we did in this code. After that, we look to see if the user is already logged in. The rest of the code is just a wrapper around the part of the login-form.php content that is connected to the registration form.
Then, on the wp-admin Pages screen, we create a new Page and name it whatever we want. It might be more appropriate to call it something like “Registration Page.” Then, using the template selector on the right sidebar, make sure you select the correct template (the one we just generated).
All that remains is to create a method for users to visit this page. You can either add a ‘Register’ menu item and link it to the Registration Page you just established, or change form-login.php and replace the registration code with a link to the Registration Page.
If we did this, we’d change the text of the form-login.php file in themes/twentytwenty/woocommerce/myaccount/.The ID of the customized registration page is 202. When the page is open in the backend editor, you can see the page id in the URL.
When you access the account details page from the front end, you should see something like this:
If you click the Sign Up button, you should be sent to the signup page we designed, which looks like this:
Step 3: Create a Shortcode
We can now create a shortcode for the login form now that we have one for the registration form. Open the functions.php file once more and add the code.
Now, for the registration page, simply create a ‘Login’ page, add the shortcode [wc login form], and you’re ready to go.
If you want to go a step further and control the page customers see when they log out of your site, you may use the wp logout hook, which looks like this:
The [/?p=207] URL refers to the ID of the page we want them to go to when they log out. Replace this with the ID of the logout page you want to use.
3 Best WooCommerce Login Plugins
1. YITH Easy Login & Registration Popup for WooCommerce
YITH Easy Login & Registration Popup for WooCommerce plugin has been painstakingly developed to make logging in and registering for your clients as simple as possible.
You can include a login form at checkout and/or a login/signup menu item for visitors to click on your site. A popup will appear when they click the signup menu item, asking for their email address. You can also allow users to sign in using Google and Facebook, which some customers would welcome. The popup form has a good design, and all of the colors, as well as the size of the popup, are configurable. There’s also a password-recovery system provided, which is far superior to WordPress’s default method.
- Customize the modal window’s width.
- Customize the look and feel of your social login buttons.
- Choose whether users must input a password only once or twice while creating a new one.
- Select whether to use the regular WooCommerce password recovery method or to enable password recovery with a code.
- Using CSS selectors, enable the login/register popup outside of the checkout process.
2. WooCommerce Social Login
Facebook, Google, Amazon, Twitter, LinkedIn, PayPal, Disqus, Yahoo, and VK are among the nine websites that WooCommerce Social Login plugin supports. You don’t have to enable them all, but with so many social networks supported, you’re unlikely to need to.
When a member registers using a social account, the Users menu will show you the social site they used. They’ll still have your name and email address, so you can get your normal emails. There’s also a graph in the admin dashboard that shows which social sites individuals have registered with, which is very cool.
- Allow users to check in with their social network accounts.
- Several social networking platforms.
- Allow customers to join their social network accounts for future faster checkouts.
- Product Reviews Pro is compatible with this extension.
3. Registration & Login with Mobile Phone Number
Members can sign up using their phone number instead of their name and email address with this handy Registration & Login with Mobile Phone Number plugin.
By default, the option to log in or register through the phone will be added underneath the standard login form. There’s a checkbox option to hide the regular registration form if you want to. You can modify the color and text of the buttons in the form using a few customization options. While this allows members to register fast, it also means that phone numbers will be retained without a name or email address.
- On your store, enable registration and login with a phone number.
- Option to make old registrations inaccessible.
- The WooCommerce users section saves user information.
- The color and text of the phone number login button can be changed.
- Authentication using two factors
Customer experience is heavily influenced by the login options available on your website or online store. WooCommerce comes with simple choices for customer login by default. Depending on your consumer engagement patterns, you may wish to experiment with alternative techniques to improve your login and registration procedure.
I hope you will apply the tutorial above about How to Create a WooCommerce Login shortcode to enhance your own store!