Completely Customize the MyListing Login/Registration Experience for FREE!!!

Overview

Why Do This

By default, the MyListing WordPress theme allows you to set a custom login/register page background and configure social logins. Still, you are limited in what you can do in terms of design and functionality. You are at the mercy of the MyListing developers and Google/Facebook (Social Logins).

Let’s look at social logins as just one example. MyListing pulls in this functionality from Google/Facebook using iframes, so you have no control over the text, the buttons, URL redirection, the overall styling, etc. Additionally, we are limited to only Google and Facebook, and for some businesses, having more (or different) login platforms available is critical for adoption.

What You Will Gain

With this guide, you can easily elevate the MyListing Login/Registration experience to a new level, unlock your creativity, improve the onboarding experience, and more.

• You will have the full power of Elementor and the WordPress Editor to completely customize the design and functionality of MyListing’s Login and Registration experience, including Social Logins, unique pages for Login, Registration, and more.
• You can fully customize the Social Login experience by adding more login providers (LinkedIn, Twitter, etc.), using custom buttons, applying overall custom styling, and more.

Good and Bad (Mostly Good) Things to Note

• Elementor Pro is optional.
• WP Social Login (Free) is used to provide the Social Login features.
• User Role switching is available.

Implementation

Login Page

1. Add the WooCommerce Customer Registration Shortcode code snippet to your website.
2. Create a page named ‘Login.’
3. Edit the page with Elementor.
4. Add the ‘Shortcode’ widget to the page.
5. Add the following shortcode to the widget.

[wc_login_form_wptu]

6. Finish designing the page, optionally using one of the Club’s Login page templates.

Registration Page

1. Add the WooCommerce Customer Login Shortcode code snippet to your website.
2. Create a page named ‘Register.’
3. Edit the page with Elementor.
4. Add the ‘Shortcode’ widget to the page.
5. Add the following shortcode to the widget.

[wc_reg_form_wptu]

6. Finish designing the page, optionally using one of the Club’s Registration page templates.

Redirect After Logout

The Redirect After Logout code snippet is considered mandatory to ensure users are redirected to your custom Login page and not to the default MyListing Login/Register page.

Redirect Default MyListing Login/Register URLs

There are some areas of a MyListing website where the user is prompted to log in (Claim Listing, Add Listing/Select Package, etc.). When that happens, the user is redirected to a WooCommerce-based Login/Register page (/my-account/), thus bypassing the custom Login and Register pages we’ve created as part of this guide.

We can quickly redirect the default MyListing Login/Register page to our custom pages by following the steps below!

1. Install the MyListing Child Theme if you haven’t already done so.
2. Use an SFTP/FTP application such as FileZilla (Free) to browse to the following location.

/wp-content/themes/my-listing/includes/utils/utils.php

3. Copy the ‘utils.php’ file to your workstation and edit it with the text editor of your choice.
4. Replace lines 343-349 with what’s provided below, replacing the domain with your own. (Note: These lines may change as the theme evolves, but it will be easy to tell what needs to be replaced and where.).
5. Save changes.

function get_login_url() {
	return 'https://domain.com/login/';
}

function get_register_url() {
	return 'https://domain.com/register/';
}

6. Using your SFTP/FTP application, create the following directory structure within the MyListing child theme.
7. /wp-content/themes/my-listing-child/includes/utils
8. Copy the ‘utils.php’ file you edited above to the ‘Utils’ directory within the child theme.
9. That’s it; you should be good to go!

Styling the Login and Registration Forms

You will need some code to make the forms look similar to the default MyListing forms. Add the CSS below to wherever you manage your code snippets.

button.woocommerce-form-login__submit,
.buttons.full-width {
    display: flex;
    justify-content: center;
    width: 100%;
    background: var(--accent);
    color: #fff;
    border: none;
    margin-top: 20px;
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
}

Add Optional Functionality Using Code Snippets

Redirect After Login

Refer to the WooCommerce Redirect After Login code snippet to implement this functionality.

Role-Based Login Redirection

Refer to the WooCommerce Redirect After Login by Role code snippet to implement this functionality.

Redirect After Registration

Refer to the WooCommerce Redirect After Registration code snippet to implement this functionality.

Easily Undo Everything in This Guide and Get Back to MyListing’s Default Functionality

Getting back to the default MyListing functionality is super easy! 

1. Remove the custom Login and Register pages.
2. Remove the custom code snippets.
3. Remove the WP Social plugin.
4. Using your SFTP/FTP application, delete the utils.php file at the following path: /wp-content/themes/my-listing-child/includes/utils

Video Tutorial