“Trang tài khoản của tôi” trong cửa hàng WooC Commerce của bạn là một phần thiết yếu trong quy trình mua sắm của khách hàng và nó phải được thiết kế theo cách nâng cao trải nghiệm khách hàng của bạn
Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách bạn có thể tùy chỉnh trang tài khoản của tôi. Khi bạn hoàn thành bài viết này, bạn sẽ có thể thay đổi hoàn toàn giao diện của trang tài khoản của tôi trong trang web của bạn. Bạn sẽ có thể thay đổi giao diện của menu, thêm các trang và nội dung mới trên trang cũng như thêm các liên kết tùy chỉnh vào nội dung
Tại sao WooC Commerce Trang tài khoản của tôi lại quan trọng
Trang tài khoản WooC Commerce của tôi là một trong những trang quan trọng nhất trên trang web WooC Commerce của bạn. Đây là trang nơi khách hàng có thể quản lý chi tiết tài khoản, xem lịch sử đặt hàng và theo dõi trạng thái đơn hàng của họ. Đây cũng là trang mà họ có thể liên hệ với bạn nếu họ có bất kỳ câu hỏi hoặc vấn đề nào
Đảm bảo rằng trang tài khoản WooC Commerce của tôi được thiết kế tốt và dễ sử dụng là điều cần thiết để cung cấp trải nghiệm tốt cho khách hàng
Đảm bảo rằng trang tài khoản WooC Commerce của tôi được thiết kế tốt và dễ sử dụng là điều cần thiết để cung cấp trải nghiệm tốt cho khách hàng. Bảng điều khiển tài khoản được thiết kế tốt sẽ giúp khách hàng dễ dàng tìm thấy thông tin họ cần và chi tiết tài khoản sẽ được hiển thị rõ ràng và dễ chỉnh sửa
Trang tài khoản của tôi trong WooC Commerce ở đâu?
Trong WooC Commerce, trang “Tài khoản của tôi” là một trang WordPress thực tế có mã ngắn WooC Commerce tương ứng [ woocommerce_my_account] . Any WordPress page that has this shortcode embedded will render the default account management tabs and content. From here, you can see a list of your recent orders, manage your shipping status, and edit your password and account details.
Tại sao phải tùy chỉnh Trang tài khoản của tôi trong WooC Commerce?
Có nhiều lý do để tùy chỉnh trang tài khoản của tôi trong WooC Commerce. Bằng cách tùy chỉnh trang này, bạn có thể làm cho trang thân thiện hơn và cung cấp nhiều thông tin hơn cho khách hàng của mình. Ngoài ra, bạn có thể thêm các chi tiết tài khoản quan trọng sẽ giúp khách hàng của bạn quản lý tài khoản của họ hiệu quả hơn. Nhìn chung, việc tùy chỉnh trang tài khoản của tôi có thể làm cho trang này có giá trị hơn cho cả doanh nghiệp và khách hàng của bạn
Vì vậy, không có gì khó chịu, chúng ta hãy xem trang tài khoản của tôi trông như thế nào
Tùy chỉnh trang tài khoản của tôi
Theo cách tương tự như đăng ký người dùng, thêm trường tùy chỉnh và xây dựng hồ sơ khách hàng WooC Commerce, bạn có thể tùy chỉnh trang tài khoản của tôi bằng cách sử dụng plugin hoặc bằng cách mã hóa tệp WordPress. Vì trong bài viết này, chúng tôi sẽ tập trung vào khía cạnh mã hóa của nó. Bạn có thể tùy chỉnh trang theo các cách sau
Cách chỉnh sửa trang tài khoản WooC Commerce của tôi theo chương trình
Để chỉnh sửa trang tài khoản của tôi trên WooC Commerce theo cách lập trình, bạn có thể sử dụng plugin đoạn mã chuyên dụng hoặc bạn có thể thêm mã tùy chỉnh vào các chức năng. tệp php của chủ đề WordPress con của bạn
Thay đổi thứ tự thực đơn
Theo mặc định, menu trong trang tài khoản của tôi trông như sau
Để thay đổi thứ tự của các tab trong menu, bạn có thể sử dụng bộ lọc woocommerce_account_menu_items . Bộ lọc này cho phép bạn sửa đổi các mục sẽ được thêm vào menu tài khoản. Các mục được chuyển đến bộ lọc dưới dạng một mảng, trong đó mỗi khóa là ID duy nhất của mục menu và giá trị là tiêu đề hiển thị của mục menu. Vì vậy, để thay đổi thứ tự, bạn chỉ cần trả lại mảng các mục menu theo một thứ tự khác. Đoạn mã sau minh họa một ví dụ về việc sử dụng hook này. Bạn có thể thêm mã vào các hàm. tệp php của chủ đề con của bạn.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function my_account_menu_order ( $menu_items ){ __('Dashboard', 'woocommerce'),
'tải xuống' = > __('Download', 'woocommerce'),
'chỉnh sửa địa chỉ' = > __ __ __ __('Orders', 'woocommerce')
);
return $reordered_items ;
}
add_filter ( 'woocommerce_account_menu_items' , 'my_account_menu_order');
Như bạn có thể thấy trong ví dụ này, chúng tôi đã chuyển tab “Đơn hàng” xuống cuối menu. Lưu tệp và làm mới trang tài khoản WooC Commerce để xem kết quả đã sửa đổi
Thay đổi tên của các tab
Để thay đổi tên của các tab, một lần nữa chúng ta có thể sử dụng bộ lọc woocommerce_account_menu_items . Nếu bạn đã sử dụng đoạn mã ở trên để sắp xếp lại các mục, bạn chỉ cần chỉ định trực tiếp tên của tab trong đoạn mã đó.
Tuy nhiên, nếu bạn chỉ cần thay đổi tên mà không cần sắp xếp lại thứ tự, bạn chỉ cần thay đổi tiêu đề của mục menu bằng phím được chỉ định. Trong ví dụ bên dưới, chúng tôi đã thay đổi tên của tab chỉnh sửa tài khoản từ Chi tiết tài khoản thành Chi tiết
1
2
3
4
5
6
7
8
9
10
function my_account_rename_items ( $menu_items ){ Tùy chỉnh -> CSS bổ sung trong bảng điều khiển WordPress của bạn
Bộ chọn CSS mà bạn có thể áp dụng biểu tượng tùy thuộc vào mục menu tương ứng. Ví dụ: đối với mục đơn hàng, bạn có thể sử dụng bộ chọn sau
.woocommerce-MyAccount-navigation ul li. woocommerce-MyAccount-navigation-link--orders a . trước
Và đây là một ví dụ về việc thay đổi biểu tượng mục menu “Đơn hàng” thành mục giỏ hàng
1
2
3
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--orders a::before {
nội dung . "\f15c" ;
}
Có thể thay đổi biểu tượng bằng cách đặt unicode tương ứng thành thuộc tính “nội dung”. Bạn có thể tìm thấy các mã phông chữ tuyệt vời tại đây
Giá trị mặc định trong lớp được đề cập ở trên là “\f15c”. Nếu chúng ta đổi thành “\f07a” thì biểu tượng của tab Đơn hàng sẽ như thế này
Thêm tab menu và nội dung mới
Để thêm một tab mới trên menu, bạn phải thực hiện ba bước sau
Đăng ký điểm cuối
Để thêm một tab mới trên menu, trước tiên bạn cần tạo một điểm cuối. Nó hoạt động như một con sên URL xuất hiện sau /my-account/. Để thêm một tab mới có tên My Loyalty, hãy thêm điểm cuối sau vào hàm. tập tin php
1
2
3
4
5
function my_account_new_endpoints () {
add_rewrite_endpoint ( 'trung thành' , EP_PAGES);
}
add_action ( 'init' , 'my_account_new_endpoints' );
Bây giờ, hãy truy cập trang Cài đặt > Permalinks và nhấp vào Lưu thay đổi (không áp dụng bất kỳ thay đổi nào). Làm điều này sẽ xóa các permalinks và cho phép trang web chọn điểm cuối mới được tạo
Thêm nội dung điểm cuối
Bây giờ, thêm nội dung sau vào hàm. php
1
2
3
4
5
function my_loyalty_endpoint_content () {
get_template_part ( 'mức độ trung thành của tài khoản tôi');
}
add_action ( 'woocommerce_account_loyalty_endpoint' , 'my_loyalty_endpoint_content');
Khi bạn thực hiện việc này, hãy tạo một tệp php mới với tên tài khoản của tôi-trung thành. php trong thư mục gốc của chủ đề con của bạn. Đây là nơi bạn có thể chèn mã/nội dung tùy chỉnh của trang tài khoản mới của mình. Ví dụ
1
2
3
4
5
Chương trình khách hàng thân thiết của chúng tôi
Nội dung added before the menu
?php