[Resolved] original woocommerce login/signup form

[dongsoon]

Hi,
This is my first question, just a few days ago I purchased this theme.

The first question is very simple.

To my knowledge, there are two types of woocommerce login / signup forms. original and step by step

I’m looking for the original version of the woocommerce login / signup form. However, you can only find the step by step version in this theme.

I want to know where in the theme I can change to the original version.
Or let me know if you have any references or related code.

[Tom]

Hi there,

The theme itself doesn’t change the default signup/login form created by WooCommerce.

Where are you seeing the wanted layout? Perhaps it’s being achieved with a plugin?

[dongsoon]

Hi,
Attached images are captured when I used OceanWP theme.

Hum..
Is there any way to show login & signup together look like the attached image that I wanted?

When I using this theme, what is your recommend solution for login/signup?
I’m looking compatible and lightweight login/signup plugin.
thanks

[Tom]

Just to confirm, does the register form show up when you click the greyed out Register text?

[dongsoon]

Ultimately what I want is something like a baby image.
Let me know if there is a similar way to implement this.

The step by step logig / signup form that woocommerce provides by default makes the customer experience too bad.

[Tom]

Can you link me to your signup/login page? I might be able to code something up for you, but not 100% sure.

[dongsoon]

Hi,

My signup/login page is https://ownergolf.net/my-account/

Thanks

[Tom]

So you would need to add elements to show each box on the page:

<div class="login-register-toggles">
    <button class="show-login">Login</button>
    <button class="show-register">Register</button>
</div>

Now we need to add javascript so those buttons do something:

1. Create a Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. Set the hook to wp_footer
3. In the hook content, add this:

<script>
    jQuery( document ).ready( function( $ ) {
        var loginBox = $( '#customer_login > div:first-child' ),
            registerBox = $( '#customer_login > div:last-child' );

        $( '.show-login' ).on( 'click', function() {
            loginBox.show();
            registerBox.hide();
        } );

        $( '.show-register' ).on( 'click', function() {
            registerBox.show();
            loginBox.hide();
        } );
    } );
</script>

Then add this CSS:

#customer_login > div:last-child {
    display: none;
}

#customer_login > div {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    float: none;
}

That should get you started 🙂

[dongsoon]

Thanks

But would you please explain more detail about “So you would need to add elements to show each box on the page:”

Where can i do this?
I using woocommerce my-account page. At this time I have no idea where can I add this element.

I applied this to “form-login.php” file.
And I finish the next 2 steps.

I don’t like the design, but it works.

However, if an error occurs during the signup process, it automatically changes to the login screen.
Is there any way to stop this?

Thanks for your help

[Tom]

The design itself would definitely need CSS – my code was just a proof of concept.

Ah, the error thing is an issue, as I don’t see a way to detect whether a registration error occurred.

Maybe a plugin like this would be worth looking at?: https://wordpress.org/plugins/ajax-login-and-registration-modal-popup/

[dongsoon]

Thanks for your advice.
I’ll test AJAX Login & registration modal plugin

Thanks again

[Tom]

No problem 🙂

[Author]

Posts