Customize login Page for google and Facebook login

This topic has 7 replies, 3 voices, and was last updated 7 months, 2 weeks ago ago by Andrew Mitchell

  • Avatar: modestyestore
    modestyestore
    Participant
    October 31, 2024 at 14:08

    I want to Customize login Page, First of all display “sign in with a social network” like Google or Facebook (google and Facebook option should be in one line ) , After that display standard login

    6 Answers
    Avatar: Justin
    Luca Rossi
    Support staff
    October 31, 2024 at 15:01

    Dear @modestyestore,

    We hope this message finds you well.

    We noticed that currently, only the Google Login button is available on your website. Could you kindly add the Facebook Login button as well?

    Here is a screenshot for your reference: [https://prnt.sc/tBWmhbo6sQkh](https://prnt.sc/tBWmhbo6sQkh).

    Once this is implemented, we will be happy to provide you with some custom CSS codes to further enhance your site.

    Thank you for your attention to this matter.

    Best regards,
    The 8Theme Team

    Avatar: modestyestore
    modestyestore
    Participant
    October 31, 2024 at 17:17

    Can you provide the code changes only for google login.

    Avatar: Justin
    Luca Rossi
    Support staff
    November 1, 2024 at 05:22

    Hi @modestyestore,

    Do you mean move the social login above the login/register form like this screenshot?

    https://prnt.sc/SGdKAon289yS

    Please try adding this custom CSS codes under XStore > Theme Options > Theme Custom CSS > Global CSS:

    
    form.woocommerce-form.et_b-tab-content.woocommerce-form-login.login.active,
    form.woocommerce-form.woocommerce-form-register.et_b-tab-content.register.active {
        display: flex;
        flex-direction: column;
    }
    
    form.woocommerce-form.et_b-tab-content.woocommerce-form-login.login.active .text-center.et-or-wrapper,
    form.woocommerce-form.woocommerce-form-register.et_b-tab-content.register.active .text-center.et-or-wrapper{
        order: -1;
    }
    
    form.woocommerce-form.et_b-tab-content.woocommerce-form-login.login.active .et-google-login-wrapper.text-center,
    form.woocommerce-form.woocommerce-form-register.et_b-tab-content.register.active .et-google-login-wrapper.text-center{
        order: -1;
        margin-bottom: 25px;
    }
    

    Hope it helps!

    Avatar: modestyestore
    modestyestore
    Participant
    November 1, 2024 at 16:00

    changes are not as per expectation, Please have a look on attachment and provide the code accordingly

    thnaks

    Files is visible for topic creator and
    support staff only.
    Avatar: Justin
    Luca Rossi
    Support staff
    November 1, 2024 at 16:16

    Hi @modestyestore,

    Please update the previous CSS codes to this:

    
    form.woocommerce-form.et_b-tab-content.woocommerce-form-login.login.active,
    form.woocommerce-form.woocommerce-form-register.et_b-tab-content.register.active {
        display: flex;
        flex-direction: column;
    }
    
    form.woocommerce-form.et_b-tab-content.woocommerce-form-login.login.active .text-center.et-or-wrapper,
    form.woocommerce-form.woocommerce-form-register.et_b-tab-content.register.active .text-center.et-or-wrapper{
        order: -1;
        margin-bottom: 25px;
    }
    
    form.woocommerce-form.et_b-tab-content.woocommerce-form-login.login.active .et-google-login-wrapper.text-center,
    form.woocommerce-form.woocommerce-form-register.et_b-tab-content.register.active .et-google-login-wrapper.text-center{
        order: -2;
        margin-top: 15px;
    }
    

    Hope it helps!

    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    November 1, 2024 at 17:53

    Dear modestyestore,

    We hope you’re reveling in the experience our theme brings! Your enthusiasm is what fuels our passion. Would you be so kind as to channel that energy into a 5-star rating on ThemeForest? Your feedback is the spark that lights our way!

    Click here to spread the love: https://themeforest.net/downloads

    Thank you for being an integral part of our journey!

    Best Regards,
    The 8Theme Team

  • Viewing 7 results - 1 through 7 (of 7 total)

The issue related to '‘Customize login Page for google and Facebook login’' has been successfully resolved, and the topic is now closed for further responses

Helpful Topics

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.