fbpx

How to customize the woocommerce login page

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

In this video, I’ll show you how to customize the woocommerce login and registration page.

https://www.youtube.com/watch?v=nTgTuLlckGo
:root{
    --desk-height:550px;
    --mob-height:600px;
}
.login-container{
    width: 100%;
    max-width: 800px;
    margin: auto;
    box-shadow:0px 0px 15px 5px rgba(0, 0, 0, 0.1);
}
.login-overlay-container {
	position: absolute;
	top: 0;
	left: 50%;
	width: 50%;
	height: 100%;
	overflow: hidden;
	transition: transform 0.6s ease-in-out;
	z-index: 10;
}
.login-container.right-panel-active .login-overlay-container{
	transform: translateX(-100%);
}
.login-overlay {
	position: relative;
	left: -100%;
	height: 100%;
	width: 200%;
	max-width: 200%;
  	transform: translateX(0);
	transition: transform 0.6s ease-in-out;
}
.login-container.right-panel-active .login-overlay {
  	transform: translateX(50%);
}
.login-overlay-panel {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 0 40px;
	text-align: center;
	top: 0;
	height: 100%;
	width: 50%;
	transform: translateX(0);
	transition: transform 0.6s ease-in-out;
}
.login-overlay-left {
	transform: translateX(-20%);
}
.login-container.right-panel-active .login-overlay-left {
	transform: translateX(0);
}
.login-overlay-right {
	right: 0;
	transform: translateX(0);
}
.login-container.right-panel-active .login-overlay-right {
	transform: translateX(20%);
}
#customer_login{
    position: relative;
    height: var(--desk-height);
}
#customer_login .col-1, #customer_login .col-2 {
	position: absolute;
	top: 0;
	height: 100%;
	background: #fff;
	padding: 30px;
	transition: all 0.6s ease-in-out;
}
#customer_login .col-1 {
	left: 0;
	width: 50%;
	z-index: 6;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.login-container.right-panel-active #customer_login .col-1 {
	transform: translateX(100%);
	z-index: 2;
}
#customer_login .col-2 {
	left: 0;
	width: 50%;
	opacity: 0;
	z-index: 1;
}
.login-container.right-panel-active #customer_login .col-2 {
	transform: translateX(100%);
	opacity: 1;
	z-index: 5;
}
#customer_login form{
    border: none;
    padding: 0;
}
#customer_login .woocommerce-privacy-policy-text{
    font-size: 11px;
    padding: 10px 0;
}
.login-overlay-container .elementor-button{
    cursor: pointer;
}
#customer_login .woocommerce-password-strength{
    font-size: 12px;
}
#customer_login .woocommerce-password-hint{
    font-size: 11px;
}
.woocommerce-notices-wrapper{
    position: relative;
    top: -80px;
}

/* Responsive */

@media screen and (max-width: 767px) {
.login-overlay-container {
    position:relative;
	top: 50%;
	left: 0;
	width: 100%;
	height: 200px;
}
.login-container.right-panel-active .login-overlay-container{
	transform: translateX(0);
}
.login-overlay {
	top: 0;
    left: 0;
	width: 200%;
	min-width:200%;
    transform: translateX(0);
}
.login-container.right-panel-active .login-overlay {
  	transform: translateX(0);
}
.login-overlay-panel {
	top: 0;
	width: 50%;
	transform: translateX(0);
}
.login-overlay-left {
	transform: translateX(-100%);
}
.login-container.right-panel-active .login-overlay-left {
	transform: translateX(0);
}
.login-overlay-right {
	transform: translateX(-100%);
}
.login-container.right-panel-active .login-overlay-right {
	transform: translateX(120%);
}
#customer_login{
    position: relative;
    height: var(--mob-height);
}
#customer_login .col-1, #customer_login .col-2 {
	position: absolute;
	top: 0;
	height: 100%;
	background: #fff;
	padding: 30px;
	transition: all 0.6s ease-in-out;
}
#customer_login .col-1 {
	left: 0;
	width: 100%;
	z-index: 6;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#customer_login .col-2 {
	left: 0;
	width: 100%;
	opacity: 0;
	z-index: 1;
	transform: translateX(50%);
}
.login-container.right-panel-active #customer_login .col-1 {
	transform: translateX(120%);
	z-index: 2;
}
.login-container.right-panel-active #customer_login .col-2 {
	transform: translateX(0);
	opacity: 1;
	z-index: 5;
}
.woocommerce-notices-wrapper{
    position: relative;
    top:0;
}
}

/* Remove effect after login */

.logged-in .login-container, .woocommerce-lost-password .login-container{
    width: 100%;
    max-width: inherit;
    margin: inherit;
    box-shadow:none;
}
.logged-in .login-overlay-container, .woocommerce-lost-password .login-overlay-container{
    display: none;
}
<script>
jQuery("#signUp").click(function(){
    jQuery(".login-container").addClass("right-panel-active")
});
jQuery("#signIn").click(function(){
    jQuery(".login-container").removeClass("right-panel-active")
});
</script>

If you’re not comfortable with adding the CSS and Js yourself, you can buy the template that includes my style customization services for this template.

Disclosure: Some of the links here are referral/affiliate links which means if you decide to buy through those links I’ll earn a commission at no extra cost to you. This is how I keep Designtheway.com up and running.

Plugin used

You may also like

Recent Posts

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top