3 cách tùy chỉnh trang đăng nhập WooCommerce

6 giờ ago, Hướng dẫn WordPress, Views
3 cách tùy chỉnh trang đăng nhập WooCommerce

3 Cách Tùy Chỉnh Trang Đăng Nhập WooCommerce Đơn Giản Nhất

Trang đăng nhập WooCommerce, mặc dù có vẻ đơn giản, lại là một điểm chạm quan trọng trong hành trình khách hàng. Một trang đăng nhập được cá nhân hóa và chuyên nghiệp có thể giúp tăng cường nhận diện thương hiệu, tạo ấn tượng tốt đầu tiên và thậm chí cải thiện trải nghiệm người dùng. Bài viết này sẽ giới thiệu 3 cách dễ dàng để tùy chỉnh trang đăng nhập WooCommerce, giúp bạn biến nó thành một phần độc đáo của cửa hàng trực tuyến của mình.

Cách 1: Sử Dụng Plugin Tùy Chỉnh Trang Đăng Nhập WooCommerce

Đây là cách phổ biến và đơn giản nhất để tùy chỉnh trang đăng nhập WooCommerce. Có rất nhiều plugin miễn phí và trả phí có thể giúp bạn thay đổi giao diện, thêm logo, tùy chỉnh màu sắc, và nhiều hơn nữa. Một số plugin phổ biến bao gồm:

  • LoginPress – Custom Login Page Customizer
  • Custom Login Page Styler
  • Theme My Login

Ưu điểm của việc sử dụng plugin:

  • Dễ cài đặt và sử dụng, không cần kiến thức lập trình.
  • Cung cấp nhiều tùy chọn tùy chỉnh, từ cơ bản đến nâng cao.
  • Tiết kiệm thời gian và công sức so với việc tự code.

Nhược điểm của việc sử dụng plugin:

  • Có thể làm chậm website nếu plugin không được tối ưu hóa tốt.
  • Một số plugin có thể xung đột với các plugin khác.
  • Các plugin trả phí có thể tốn kém.

Hướng dẫn sử dụng LoginPress – Custom Login Page Customizer (Ví dụ)

  1. Cài đặt và kích hoạt plugin LoginPress từ kho plugin WordPress.
  2. Truy cập “LoginPress” trong bảng điều khiển WordPress.
  3. Sử dụng trình tùy chỉnh trực quan để thay đổi logo, màu sắc, hình nền, kiểu chữ, và các yếu tố khác của trang đăng nhập.
  4. Xem trước thay đổi và lưu lại khi bạn hài lòng.

Plugin LoginPress cung cấp nhiều mẫu trang đăng nhập được thiết kế sẵn mà bạn có thể sử dụng làm điểm khởi đầu, giúp bạn tiết kiệm thời gian thiết kế.

Cách 2: Tùy Chỉnh Trang Đăng Nhập Bằng CSS

Nếu bạn có kiến thức cơ bản về CSS, bạn có thể sử dụng CSS để tùy chỉnh giao diện của trang đăng nhập WooCommerce. Phương pháp này cho phép bạn kiểm soát nhiều hơn về giao diện của trang đăng nhập so với việc sử dụng plugin, nhưng đòi hỏi bạn phải hiểu rõ về cấu trúc HTML và CSS của trang đăng nhập.

Tìm hiểu cấu trúc HTML của trang đăng nhập WooCommerce

Để tùy chỉnh trang đăng nhập bằng CSS, bạn cần hiểu rõ cấu trúc HTML của nó. Bạn có thể sử dụng công cụ “Inspect Element” (kiểm tra phần tử) trong trình duyệt web của bạn để xem mã HTML của trang đăng nhập. Thường thì trang đăng nhập WooCommerce có các phần chính sau:

  • #login: Container chính của trang đăng nhập.
  • #login h1: Tiêu đề trang đăng nhập (thường là logo).
  • #login form: Form đăng nhập.
  • #login form p: Các trường nhập liệu (username, password).
  • #login form .button: Nút đăng nhập.
  • #nav: Các liên kết điều hướng (Quên mật khẩu, Quay lại trang web).
  • #backtoblog: Liên kết quay lại trang web.

Thêm CSS tùy chỉnh vào trang đăng nhập

Có nhiều cách để thêm CSS tùy chỉnh vào trang đăng nhập WooCommerce:

  • Sử dụng theme customizer: Hầu hết các theme WordPress đều có một trình tùy biến cho phép bạn thêm CSS tùy chỉnh. Truy cập “Appearance” (Giao diện) -> “Customize” (Tùy chỉnh) và tìm mục “Additional CSS” (CSS bổ sung).
  • Sử dụng child theme: Tạo một child theme và thêm CSS tùy chỉnh vào file style.css của child theme. Đây là cách được khuyến nghị vì nó giúp bạn bảo toàn các tùy chỉnh của mình khi theme gốc được cập nhật.
  • Sử dụng plugin CSS: Có một số plugin cho phép bạn thêm CSS tùy chỉnh vào website của mình.

Ví dụ về CSS tùy chỉnh

Dưới đây là một ví dụ về CSS tùy chỉnh bạn có thể sử dụng để thay đổi giao diện của trang đăng nhập:


#login {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 5px;
}

#login h1 a {
  background-image: url('https://example.com/logo.png'); /* Thay đổi URL logo */
  background-size: contain;
  width: 200px;
  height: 80px;
}

#login form {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
}

#login form p label {
  font-weight: bold;
}

#login form .button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

#login form .button:hover {
  background-color: #0056b3;
}

Hãy nhớ thay đổi các giá trị và URL hình ảnh cho phù hợp với thương hiệu của bạn.

Cách 3: Tùy Chỉnh Trang Đăng Nhập Bằng Code (Nâng cao)

Đây là cách tùy chỉnh trang đăng nhập WooCommerce mạnh mẽ nhất, cho phép bạn kiểm soát hoàn toàn giao diện và chức năng của trang đăng nhập. Tuy nhiên, nó đòi hỏi bạn phải có kiến thức lập trình vững chắc về PHP, HTML và CSS.

Tạo một template tùy chỉnh cho trang đăng nhập

Để tùy chỉnh trang đăng nhập bằng code, bạn cần tạo một template tùy chỉnh. Bạn có thể làm điều này bằng cách tạo một file PHP mới trong thư mục child theme của bạn, ví dụ: custom-login.php. Sau đó, bạn cần thêm code sau vào file functions.php của child theme để WooCommerce sử dụng template tùy chỉnh của bạn:


function my_custom_login_page() {
  $page = 'custom-login'; // Đường dẫn đến template của bạn
  if ( file_exists( get_stylesheet_directory() . "/{$page}.php" ) ) {
      load_template( get_stylesheet_directory() . "/{$page}.php" );
  }
  exit;
}

add_action( 'login_init', 'my_custom_login_page' );

Viết code HTML và PHP cho trang đăng nhập

Trong file custom-login.php, bạn có thể viết code HTML và PHP để tạo giao diện và chức năng tùy chỉnh cho trang đăng nhập. Bạn có thể sử dụng các hàm WordPress để lấy thông tin người dùng, xác thực đăng nhập, và hiển thị thông báo lỗi.

Ví dụ về code tùy chỉnh

Dưới đây là một ví dụ đơn giản về code tùy chỉnh bạn có thể sử dụng trong file custom-login.php:


<!DOCTYPE html>
<html>
<head>
  <title>Trang Đăng Nhập Tùy Chỉnh</title>
  <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css">
</head>
<body>
  <div id="login">
    <h1><a href="<?php echo get_bloginfo('url'); ?>"><?php echo get_bloginfo('name'); ?></a></h1>
    <?php wp_login_form(); ?>
    <p><a href="<?php echo wp_lostpassword_url(); ?>">Quên mật khẩu?</a></p>
  </div>
</body>
</html>

Đoạn code này sẽ hiển thị một trang đăng nhập đơn giản với logo, form đăng nhập và liên kết “Quên mật khẩu”. Bạn có thể tùy chỉnh code này để tạo giao diện và chức năng phù hợp với nhu cầu của bạn.

Lưu ý quan trọng

  • Hãy sao lưu website của bạn trước khi thực hiện bất kỳ thay đổi nào đối với code.
  • Kiểm tra kỹ code của bạn trước khi triển khai để tránh các lỗi có thể gây ảnh hưởng đến website.
  • Nếu bạn không có kinh nghiệm lập trình, hãy tìm đến các chuyên gia để được hỗ trợ.

Kết luận

Tùy chỉnh trang đăng nhập WooCommerce là một cách tuyệt vời để cải thiện trải nghiệm người dùng và tăng cường nhận diện thương hiệu. Bạn có thể chọn một trong ba cách trên tùy thuộc vào trình độ kỹ thuật và nhu cầu của bạn. Hy vọng bài viết này đã cung cấp cho bạn những thông tin hữu ích để bắt đầu tùy chỉnh trang đăng nhập WooCommerce của mình.

, , , ,

..