By default, the MyListing WordPress theme allows you to set a custom login/register page background and configure social logins, but you are extremely limited in what you can do in terms of design and functionality.
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’ll have the full power of Elementor and the WordPress editor to completely customize the design and functionality of MyListing’s login and registration experience.
Implementation
Login Page
- Add the WooCommerce Customer Login Shortcode code snippet below to your website.
<?php
add_shortcode( 'wc_login_form', 'wc_separate_login_form' );
function wc_separate_login_form() {
if ( is_user_logged_in() ) {
return '<p>' . esc_html( 'You are already logged in' ) . '</p>';
}
if ( ! function_exists( 'woocommerce_login_form' ) ) {
return '';
}
$redirect = function_exists( 'wc_get_page_permalink' )
? wc_get_page_permalink( 'myaccount' )
: home_url( '/' );
ob_start();
do_action( 'woocommerce_before_customer_login_form' );
woocommerce_login_form(
array(
'redirect' => esc_url( $redirect ),
)
);
return ob_get_clean();
}- Create a page named ‘Login’ and edit it with Elementor.
- Finish designing the page, optionally using one of the Club’s Login Page templates.
- Add Elementor’s Shortcode widget to the page and paste in the shortcode below.
[wc_login_form]Registration Page
- Add the WooCommerce Customer Registration Shortcode code snippet below to your website.
<?php
add_shortcode( 'wc_reg_form', 'wc_separate_registration_form' );
function wc_separate_registration_form() {
if ( is_user_logged_in() ) {
return '<p>' . esc_html( 'You are already logged in' ) . '</p>';
}
if ( ! function_exists( 'wc_get_template_html' ) ) {
return '';
}
if ( 'yes' !== get_option( 'woocommerce_enable_myaccount_registration' ) ) {
return '<p>' . esc_html( 'Registration is currently disabled.' ) . '</p>';
}
ob_start();
do_action( 'woocommerce_before_customer_login_form' );
$html = wc_get_template_html( 'myaccount/form-login.php' );
if ( ! class_exists( 'DOMDocument' ) ) {
ob_end_clean();
return '';
}
$dom = new DOMDocument();
$previous = libxml_use_internal_errors( true );
$dom->loadHTML( '<?xml encoding="utf-8">' . $html );
libxml_clear_errors();
libxml_use_internal_errors( $previous );
$xpath = new DOMXPath( $dom );
$form = $xpath->query( '//form[contains(@class,"register")]' );
if ( ! $form || ! $form->item( 0 ) ) {
ob_end_clean();
return '';
}
echo $dom->saveHTML( $form->item( 0 ) );
return ob_get_clean();
}- Create a page named ‘Register’ and edit it with Elementor.
- Finish designing the page, optionally using one of the Club’s Register Page templates.
- Add Elementor’s Shortcode widget to the page and paste in the shortcode below.
[wc_reg_form]Redirect After Logout
This should be considered mandatory to ensure users are redirected to your custom login page and not to the default MyListing Login/Register page.
Note: This feature is built into MyListing Pro, allowing you to configure powerful redirects without the need for code snippets.
If you want to proceed with using a code snippet, use the WooCommerce Redirect After Logout code snippet on your website.
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!
- Install the MyListing Child Theme if you haven’t already done so.
- Use an SFTP/FTP application such as FileZilla (Free) to browse to the following location.
/wp-content/themes/my-listing/includes/utils/utils.php
- Copy the ‘utils.php’ file to your workstation and edit it using the text editor of your choice.
- 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.).
- Save changes.
function get_login_url() {
return 'https://domain.com/login/';
}
function get_register_url() {
return 'https://domain.com/register/';
}- Using your SFTP/FTP application, create the following directory structure within the MyListing child theme.
- /wp-content/themes/my-listing-child/includes/utils
- Copy the ‘utils.php’ file you edited above to the ‘Utils’ directory within the child theme.
- That’s it; you should be all set 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;
}Easily Undo Everything in This Guide and Get Back to MyListing’s Default Functionality
Getting back to the default MyListing functionality is super easy.
- Remove the custom login and register pages.
- Remove the custom code snippets.
- Using your SFTP/FTP application, delete the utils.php file at the following path: /wp-content/themes/my-listing-child/includes/utils
Video Tutorial
