[Resolved] original woocommerce login/signup form

Home Forums Support original woocommerce login/signup form

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #1001237

    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

    My cuurrent login / Signup form

    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.

    My wanted form

    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.

    Lead Developer
    Lead Developer

    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?


    Attached images are captured when I used OceanWP theme.

    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.

    Lead Developer
    Lead Developer

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


    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.

    login form

    Lead Developer
    Lead Developer

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



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


    Lead Developer
    Lead Developer

    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>

    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:

        jQuery( document ).ready( function( $ ) {
            var loginBox = $( '#customer_login > div:first-child' ),
                registerBox = $( '#customer_login > div:last-child' );
            $( '.show-login' ).on( 'click', function() {
            } );
            $( '.show-register' ).on( 'click', function() {
            } );
        } );

    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 🙂



    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

    Lead Developer
    Lead Developer

    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/


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

    Thanks again

    Lead Developer
    Lead Developer
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.