Các trang Tài khoản của tôi tùy chỉnh WooC Commerce

“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 ){

    $reordered_items = mảng (

        'trang tổng quan' = > __('Dashboard', 'woocommerce'),

        'tải xuống' = > __('Download', 'woocommerce'),

        'chỉnh sửa địa chỉ' = > __<('Addresses', 'woocommerce'),

        'chỉnh sửa tài khoản' = > __<('Account Details', 'woocommerce'),

        'khách hàng đăng xuất' = > __<('Logout', 'woocommerce'),

        'đơn đặt hàng' = > __('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 ){

    if ( isset ( $menu_items['edit-account'])){

        $menu_items [ 'chỉnh sửa tài khoản' ] = __('Details', 'my_text_domain');

     }

    return $menu_items ;

}

add_filter ( 'woocommerce_account_menu_items' , 'my_account_rename_items');

Điều này tạo ra đầu ra sau trên trang web

Thay đổi biểu tượng của các tab

Trong phần trình diễn này, chúng tôi đang sử dụng chủ đề StoreFront để hiển thị cho bạn ảnh chụp màn hình. Theo mặc định, chủ đề sử dụng các biểu tượng tuyệt vời về phông chữ. Vì điều này, chúng tôi sẽ chỉ cho bạn cách bạn có thể thay đổi biểu tượng của các tab bằng font-awesome

Các biểu tượng của các tab có thể được thay đổi bằng một chút CSS tùy chỉnh. Bạn có thể thêm CSS tùy chỉnh vào phần Giao diện -> 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

1. Đă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

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

// mã tùy chỉnh của bạn đi here

Bạn có thể kết xuất trực tiếp nội dung từ hàm my_loyalty_endpoint_content ()   thay vì tạo một .

1. Thêm tab vào menu

Khi bạn tạo tệp, hãy thêm tab vào menu như hình bên dưới

1

2

3

4

5

6

function my_account_rename_items ( $menu_items ){

    $menu_items [ 'lòng trung thành' ] = __('My Loyalty', 'my_text_domain');

    return $menu_items ;

}

add_filter ( 'woocommerce_account_menu_items' , 'my_account_rename_items');

Làm điều này thêm tab vào menu

Thêm một biểu tượng vào tab

Cuối cùng, bạn có thể cần thêm một biểu tượng. Trong các biểu tượng. css, tìm kiếm lớp chứa biểu tượng của tab mới tạo và thêm mã cho nội dung

Sau này, bạn có thể thấy những thay đổi sau trong thanh menu của trang tài khoản của tôi

Thêm nội dung tùy chỉnh vào các tab hiện có

Đôi khi, nội dung mặc định trong trang tài khoản WooC Commerce có thể không đủ. Bạn có thể cần thêm một số văn bản của riêng mình để cá nhân hóa trang web của mình. Để minh họa cách bạn có thể thay đổi nội dung của các trang, chúng tôi sẽ lấy một ví dụ về trang bảng điều khiển WooC Commerce

Đối với điều này, chúng tôi sẽ cần tạo một thư mục có tên thương mại điện tử trong chủ đề con của bạn. Sau đó, chúng tôi sẽ thêm các tệp cần thiết mà chúng tôi muốn ghi đè lên. Chúng tôi chỉ cần đảm bảo duy trì cấu trúc tệp WooC Commerce mặc định

Bạn có thể ghi đè lên tệp mẫu WooC Commerce mặc định chỉ bằng cách tạo một tệp có cùng tên và đường dẫn trong thư mục thương mại điện tử của chủ đề con của bạn. Bạn có thể tìm thấy danh sách tất cả các tệp mẫu WooC Commerce trong thư mục wooC Commerce/templates của plugin WooC Commerce

Ví dụ: nếu bạn cần ghi đè mẫu bảng điều khiển nằm trong plugin WooC Commerce tại đường dẫn sau

thương mại điện tử/mẫu/tài khoản của tôi/bảng điều khiển. php

bạn sẽ cần tạo một tệp trong chủ đề con của mình với đường dẫn sau

thương mại điện tử/tài khoản của tôi/bảng điều khiển. php

Sau đó, sao chép nội dung mẫu WooC Commerce mặc định trong tệp mẫu của bạn. Bạn có thể làm điều này bằng cách tải xuống mẫu của trang bảng điều khiển từ repo WooC Commerce GitHub cho phiên bản cụ thể của bạn hoặc chỉ cần sao chép nó từ thư mục plugin cài đặt WordPress của bạn. Khi bạn thực hiện việc này, bạn có thể tùy chỉnh mã mẫu theo bất kỳ cách nào bạn muốn

In the example below, we have added the line

Test Content

Móc menu trước và sau

In WordPress, hooks are features that let you change or add the code without changing the core files. The Before and After menu hooks in WooCommerce let you add any text or HTML code just below or just after the menu. It specifically adds the content either before or after the