[Resolved] original woocommerce login/signup form

Home Forums Support original woocommerce login/signup form

  • This topic has 11 replies, 2 voices, and was last updated 1 year ago by Tom.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1001237
    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

    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.

    #1001281
    Tom
    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?

    #1001294
    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

    #1001893
    Tom
    Lead Developer
    Lead Developer

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

    #1001975
    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.

    login form

    #1002173
    Tom
    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.

    #1002214
    dongsoon

    Hi,

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

    Thanks

    #1002760
    Tom
    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>
    </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 🙂

    #1002813
    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

    #1002969
    Tom
    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/

    #1003704
    dongsoon

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

    Thanks again

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