Code thay đổi trang đăng nhập Woocommerce
by Admin in
WordPress Thủ thuật
73 lượt xem

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

  • 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

  • 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.

Share Post:

Related Posts

5 1 bình chọn
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments