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
This topic has 7 replies, 3 voices, and was last updated 7 months, 2 weeks ago ago by Andrew Mitchell
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
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
Can you provide the code changes only for google login.
Hi @modestyestore,
Do you mean move the social login above the login/register form like this screenshot?
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!
changes are not as per expectation, Please have a look on attachment and provide the code accordingly
thnaks
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!
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
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