Code thay đổi trang đăng nhập Woocommerce

Đánh giá post

Thay đổi trang đăng nhập Woocommerce nên hay không nên?

Nếu các bạn đang sử dụng wordpress cho trang web thương mại điện tử và sử dụng plugin Woocommerce, nó sẽ tạo cho bạn trang Tài khoản với thiết kế cực kỳ đơn giản như hình bên dưới:

Đôi khi bạn cảm thấy nó đơn giản quá, muốn nó đẹp hơn thì chỉ cần chút kiến thức về CSS hoặc lên google tìm mấy giao diện đăng nhập là có rất nhiều.

Sau khi có code rồi thì sau chúng ta thì có khó khăn về vấn đề sửa code bên trong đó thôi. Đọc đến đây, bạn có thể cảm thấy lo lắng, nhưng không sao, sau bài viết này mình sẽ hướng dẫn cho các bạn làm sao để tạo được trang đăng nhập như của mình đang sử dụng.

Code thay đổi trang đăng nhập Woocommerce

Sửa trang đăng ký – đăng nhập Woocommerce

Bước 1: Bạn vào mục Tùy biến -> CSS bổ sung, thêm đoạn code CSS bên dưới vào:


.sorting_disabled, .sorting_asc, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate{color: #faf20a;}
*,:after,:before{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
a{text-decoration:none}

.login-wrap{
	width:100%;
	margin:auto;
	max-width:525px;
	min-height:670px;
	position:relative;
	background:url(https://raw.githubusercontent.com/khadkamhn/day-01-login-form/master/img/bg.jpg) no-repeat center;
	box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
}
.login-html{
	width:100%;
	height:100%;
	position:absolute;
	padding:90px 70px 50px 70px;
	background:rgba(40,57,101,.9);
}
.login-html .sign-in-htm,
.login-html .sign-up-htm{
	top:0;
	left:0;
	right:0;
	bottom:0;
	position:absolute;
	transform:rotateY(180deg);
	backface-visibility:hidden;
	transition:all .4s linear;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check{
	display:none;
}
.login-html .tab,
.login-form .group .label,
.login-form .group .button{
	text-transform:uppercase;
}
.login-html .tab{
	font-size:22px;
	margin-right:15px;
	padding-bottom:5px;
	margin:0 15px 10px 0;
	display:inline-block;
	border-bottom:2px solid transparent;
}
.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab{
	color:#fff;
	border-color:#1161ee;
}
.login-form{
	min-height:345px;
	position:relative;
	perspective:1000px;
	transform-style:preserve-3d;
}
.login-form .group{
	margin-bottom:15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button{
	width:100%;
	color:#fff;
	display:block;
}
.login-form .group .input,
.login-form .group .button{
	border:none;
	padding:15px 20px;
	border-radius:25px;
	background:rgba(255,255,255,.1);
}
.login-form .group input[data-type="password"]{
	text-security:circle;
	-webkit-text-security:circle;
}
.login-form .group .label{
	color:#aaa;
	font-size:12px;
}
.login-form .group .button{
	background:#0ebeff;
}
.login-form .group label .icon{
	width:15px;
	height:15px;
	border-radius:2px;
	position:relative;
	display:inline-block;
	background:rgba(255,255,255,.1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after{
	content:'';
	width:10px;
	height:2px;
	background:#fff;
	position:absolute;
	transition:all .2s ease-in-out 0s;
}
.login-form .group label .icon:before{
	left:3px;
	width:5px;
	bottom:6px;
	transform:scale(0) rotate(0);
}
.login-form .group label .icon:after{
	top:6px;
	right:0;
	transform:scale(0) rotate(0);
}
.login-form .group .check:checked + label{
	color:#fff;
}
.login-form .group .check:checked + label .icon{
	background:#1161ee;
}
.login-form .group .check:checked + label .icon:before{
	transform:scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after{
	transform:scale(1) rotate(-45deg);
}
.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
	transform:rotate(0);
}
.login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
	transform:rotate(0);
}

.hr{
	height:2px;
	margin:60px 0 50px 0;
	background:rgba(255,255,255,.2);
}
.foot-lnk{
	text-align:center;
}
.quenmatkhau-woo{color: white;}
.sorting_disabled, .sorting_asc, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate{color: #faf20a;}
*,:after,:before{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
a{text-decoration:none}

.login-wrap{
	width:100%;
	margin:auto;
	max-width:525px;
	min-height:670px;
	position:relative;
	background:url(https://raw.githubusercontent.com/khadkamhn/day-01-login-form/master/img/bg.jpg) no-repeat center;
	box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
}
.login-html{
	width:100%;
	height:100%;
	position:absolute;
	padding:90px 70px 50px 70px;
	background:rgba(40,57,101,.9);
}
.login-html .sign-in-htm,
.login-html .sign-up-htm{
	top:0;
	left:0;
	right:0;
	bottom:0;
	position:absolute;
	transform:rotateY(180deg);
	backface-visibility:hidden;
	transition:all .4s linear;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check{
	display:none;
}
.login-html .tab,
.login-form .group .label,
.login-form .group .button{
	text-transform:uppercase;
}
.login-html .tab{
	font-size:22px;
	margin-right:15px;
	padding-bottom:5px;
	margin:0 15px 10px 0;
	display:inline-block;
	border-bottom:2px solid transparent;
}
.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab{
	color:#fff;
	border-color:#1161ee;
}
.login-form{
	min-height:345px;
	position:relative;
	perspective:1000px;
	transform-style:preserve-3d;
}
.login-form .group{
	margin-bottom:15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button{
	width:100%;
	color:#fff;
	display:block;
}
.login-form .group .input,
.login-form .group .button{
	border:none;
	padding:15px 20px;
	border-radius:25px;
	background:rgba(255,255,255,.1);
}
.login-form .group input[data-type="password"]{
	text-security:circle;
	-webkit-text-security:circle;
}
.login-form .group .label{
	color:#aaa;
	font-size:12px;
}
.login-form .group .button{
	background:#0ebeff;
}
.login-form .group label .icon{
	width:15px;
	height:15px;
	border-radius:2px;
	position:relative;
	display:inline-block;
	background:rgba(255,255,255,.1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after{
	content:'';
	width:10px;
	height:2px;
	background:#fff;
	position:absolute;
	transition:all .2s ease-in-out 0s;
}
.login-form .group label .icon:before{
	left:3px;
	width:5px;
	bottom:6px;
	transform:scale(0) rotate(0);
}
.login-form .group label .icon:after{
	top:6px;
	right:0;
	transform:scale(0) rotate(0);
}
.login-form .group .check:checked + label{
	color:#fff;
}
.login-form .group .check:checked + label .icon{
	background:#1161ee;
}
.login-form .group .check:checked + label .icon:before{
	transform:scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after{
	transform:scale(1) rotate(-45deg);
}
.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
	transform:rotate(0);
}
.login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
	transform:rotate(0);
}

.hr{
	height:2px;
	margin:60px 0 50px 0;
	background:rgba(255,255,255,.2);
}
.foot-lnk{
	text-align:center;
}
.quenmatkhau-woo{color: white;}

Bước 2: Bước này, bạn cần đăng nhập vào VPS hoặc Cpanel để chỉnh sửa file php của plugin Woocommerce.

Bạn sửa file form-login.php theo đường dẫn sau: /home/your_domain.com/public_html/wp-content/plugins/woocommerce/templates/myaccount

Thay thế đoạn code dưới đây từ sau dòng 29 <?php if ( ‘yes’ === get_option( ‘woocommerce_enable_myaccount_registration’ ) ) : ?> đến trước dòng

</div> <?php endif; ?>
<?php do_action( ‘woocommerce_after_customer_login_form’ ); ?>

Link code: https://drive.google.com/file/d/1llSEyecb7OdmJZqktff7Q1bkStF6q_LE/view?usp=sharing

<?php endif; ?>

<?php do_action( 'woocommerce_login_form_start' ); ?>

<?php do_action( 'woocommerce_login_form' ); ?>

<div class="group">
							<label class="woocommerce-form__label woocommerce-form__label-for-checkbox woocommerce-form-login__rememberme">
								<input class="woocommerce-form__input woocommerce-form__input-checkbox" name="rememberme" type="checkbox" id="rememberme" value="forever" /> <span><?php esc_html_e( 'Remember me', 'woocommerce' ); ?></span>
							</label>
							<?php wp_nonce_field( 'woocommerce-login', 'woocommerce-login-nonce' ); ?>
							<button type="submit" class="button" name="login" value="<?php esc_attr_e( 'Log in', 'woocommerce' ); ?>“><?php esc_html_e( 'Log in', 'woocommerce' ); ?></button>
						</div>
						<p class="woocommerce-LostPassword lost_password">
							<a href="<?php echo esc_url( wp_lostpassword_url() ); ?>” class=”quenmatkhau-woo”><?php esc_html_e( 'Lost your password?', 'woocommerce' ); ?></a>
						</p>

<?php do_action( 'woocommerce_login_form_end' ); ?>

</form>

<?php if ( 'yes' === get_option( 'woocommerce_enable_myaccount_registration' ) ) : ?>

</div>

<?php do_action( 'woocommerce_register_form_start' ); ?>

<?php if ( 'no' === get_option( 'woocommerce_registration_generate_username' ) ) : ?>

<?php endif; ?>

<div class="group">
								<label for="reg_email"><?php esc_html_e( 'Email address', 'woocommerce' ); ?> <span class="required">*</span></label>
								<input type="email" class="input" name="email" id="reg_email" autocomplete="email" placeholder="<?php esc_attr_e( 'Ví dụ: linh@gmail.com', 'squadforce' ); ?>” value=”<?php echo ( ! empty( $_POST['email'] ) ) ? esc_attr( wp_unslash( $_POST['email'] ) ) : ''; ?>” /><?php  ?>
							</div>

<?php if ( 'no' === get_option( 'woocommerce_registration_generate_password' ) ) : ?>

<?php else : ?>

<?php endif; ?>

<?php do_action( 'woocommerce_register_form' ); ?>

<?php do_action( 'woocommerce_register_form_end' ); ?>

</form>

</div>
			</div>	
		</div>	
	</div>

Bước 3: Lưu file lại, có thể xóa bộ nhớ Cache nếu cần. Sau đó F5 lại trang để xem thành quả.

Sửa trang Tài khoản Woocommerce

Thực ra trang này mình edit lại 1 tý cho nó có gì đó đỡ trống trải :)) Các bạn có thể tham khảo thêm.

Bước 1: Bạn sửa file dashboard.php theo đường dẫn sau: /home/your_domain.com/public_html/wp-content/plugins/woocommerce/templates/myaccount

Bạn thay thế đoạn code khoảng từ dòng 30, Sau đoạn code này:

$allowed_html = array(
‘a’ => array(
‘href’ => array(), ), ); ?>

đến trước đoạn code này:

<p> <?php /* translators: 1: Orders URL 2: Address URL 3: Account URL. */ $dashboard_desc = __( ‘From your account dashboard you can view your <a href=”%1$s”>recent orders</a>, manage your <a href=”%2$s”>billing address</a>, and <a href=”%3$s”>edit your password and account details</a>.’, ‘woocommerce’ );

Code html cần chèn vào giữa 2 đoạn code trên:

Link code: https://drive.google.com/file/d/1rNACrJx8cZph7_Bx_7QxdiEWLijPZVJS/view?usp=sharing

<div class="middle-container container-acc">
        <div class="profile-acc block"> 
            <a class="add-button" href="#28"><span class="icon entypo-plus scnd-font-color"></span></a>
                <div class="profile-picture big-profile-picture clear">
                    <img decoding="async" width="150px" alt="USER" src="https://linhproductions.com/wp-content/uploads/2020/10/png-user-acc.png" title="CODE THAY ĐỔI TRANG ĐĂNG NHẬP WOOCOMMERCE 9">
                </div>
                <h1 class="user-name-acc">
					<?php
						printf(
							'<strong>‘ . esc_html( $current_user->display_name ) . ‘</strong>‘ );
					?>
                </h1>
                <div style="text-align: center;">
                    <p style="margin-bottom: 1px;">Chức vụ:</p>
                	<strong style="color: yellow; text-transform: capitalize;">
                		<?php echo display_user_roles(); ?>
                	</strong>                		
                </div>
                
		</div>
</div>

Bước 2: Bạn vào mục Tùy biến -> CSS bổ sung, thêm đoạn code CSS bên dưới vào:


/*css trang tai khoan*/
.middle-container {
    margin: 0 25px;			
}
    .profile-acc {
        height: 410px;
    }
    .middle-container .social {
        height: 205px;
        background: #1f253d;
    }
        .middle-container .social li {
            margin-bottom: 12px;
        }
        .middle-container .social a {
            line-height: 60px;			
        }
            .middle-container .social a:hover {
                text-decoration: none;
            }
            .middle-container .social .titular {
                border-radius: 5px;
            }
                .middle-container .social .facebook {
                    background: #3468af;
                    -webkit-transition: background .3s;
                    transition: background .3s;
                }
                    .middle-container .social a:hover .facebook {
                        background: #1a4e95;
                    }
                    .middle-container .social a:hover .icon.facebook {
                        background: #3468af;
                    }
                .middle-container .social .twitter {
                    background: #4fc4f6;
                    -webkit-transition: background .3s;
                    transition: background .3s;
                }
                    .middle-container .social a:hover .twitter {
                        background: #35aadc;
                    }
                    .middle-container .social a:hover .icon.twitter {
                        background: #4fc4f6;
                    }
                .middle-container .social .googleplus {
                    background: #e64c65;
                    -webkit-transition: background .3s;
                    transition: background .3s;
                }
                    .middle-container .social a:hover .googleplus {
                        background: #cc324b;
                    }
                    .middle-container .social a:hover .icon.googleplus {
                        background: #e64c65;
                    }
        .middle-container .social .icon {
            float: left;
            width: 60px;
            height: 60px;
            text-align: center;
            font-size: 20px;
            border-bottom-left-radius: 5px;
            border-top-left-radius: 5px;
        }
            .middle-container .social .icon.facebook {
                background: #1a4e95;						
            }
            .middle-container .social .icon.twitter {
                background: #35aadc;						
            }
            .middle-container .social .icon.googleplus {
                background: #cc324b;						
            }
            .container-acc {
                float: left;
                width: 300px;
            }
            .block {
                margin-bottom: 25px;
                background: #394264;
                border-radius: 5px;
            }
            .add-button .icon {
                float: right;
                line-height: 18px;
                width: 23px;					
                border: 2px solid;
                border-radius: 100%;
                font-size: 18px;
                text-align: center;
                margin: 10px;					
            }
                
                .scnd-font-color {
                    color: #9099b7;
                }
                .center-date span.scnd-font-color {
                    line-height: 0; 
                   }
                   .profile-picture {
                    border-radius: 100%;
                    overflow: hidden;
                    -webkit-box-sizing: content-box;
                      -moz-box-sizing: content-box;
                      box-sizing: content-box;	
                }
                    .big-profile-picture {
                        margin: 0 auto;		
                        border: 5px solid #50597b;
                        width: 150px;
                        height: 150px;
                    }  
                    .clear {
                        clear: both;
                    }        
                    .user-name-acc {
                        margin: 25px 0 16px;
                        text-align: center;
                    }

Bước 3: Lưu file lại, có thể xóa bộ nhớ Cache nếu cần. Sau đó F5 lại trang để xem thành quả.

Nhược điểm của code này

Mỗi lần Update Plugin thì nó sẽ bị mất hết code html nên các bạn cần copy lại code html, sau đó update plugin và Paste lại.

Cách Tạo Trang Chuyển Hướng WordPress Tự Động Và Không Tự Động

Kabaneri FD2 civic Itasha GTA 5

Mod skin nhân vật GTA 5 [Hướng dẫn chi tiết]

Code Hiệu ứng tuyết rơi cho blogspot

Làm ảnh chuyển động nhẹ nhàng trong After Effect CS6

Thêm nút MUA NGAY vào trang sản phẩm WOOCOMMERCE

Code tắt Adblock cho WordPress và Blog FREE Cực Dễ 2020

20 Câu lệnh thông dụng dùng với trợ lý Cortana

Code thay đổi trang đăng nhập Woocommerce

Thay đổi trang đăng nhập Woocommerce nên hay không nên?

Code thay đổi trang đăng nhập Woocommerce

Sửa trang đăng ký – đăng nhập Woocommerce

Sửa trang Tài khoản Woocommerce

Nhược điểm của code này

Trả lời Hủy

Chăm sóc khách hàng

theo dõi chúng tôi trên

Đặt liên kết

Random

Random

Random

Cách Tạo Trang Chuyển Hướng WordPress Tự Động Và Không Tự Động

Kabaneri FD2 civic Itasha GTA 5

Mod skin nhân vật GTA 5 [Hướng dẫn chi tiết]

Code Hiệu ứng tuyết rơi cho blogspot

Làm ảnh chuyển động nhẹ nhàng trong After Effect CS6

Thêm nút MUA NGAY vào trang sản phẩm WOOCOMMERCE

Code tắt Adblock cho WordPress và Blog FREE Cực Dễ 2020

20 Câu lệnh thông dụng dùng với trợ lý Cortana

Random

Tài khoản

Đơn hàng

Tải xuống

Ví tiền

Kiểm tra đơn hàng

Thay đổi trang đăng nhập Woocommerce nên hay không nên?

Code thay đổi trang đăng nhập Woocommerce

Sửa trang đăng ký – đăng nhập Woocommerce

Sửa trang Tài khoản Woocommerce

Nhược điểm của code này

Trả lời Hủy

Đăng nhập

Đăng ký