WOOCOMMERCE

Cách chỉnh sửa trang Tài khoản của tôi WooCommerce theo lập trình

Bạn có muốn tùy chỉnh trang Tài khoản của tôi trên cửa hàng của mình không? Bạn đã đến đúng nơi. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách chỉnh sửa trang Tài khoản của tôi WooCommerce theo lập trình để giúp bạn cải thiện trải nghiệm khách hàng của mình.

Trang Tài khoản của tôi là gì?

Theo mặc định, các cửa hàng WooCommerce bao gồm trang Tài khoản của tôi , nơi người dùng có thể xem các đơn đặt hàng của họ và nơi bạn lưu trữ thông tin về thông tin cá nhân, thanh toán và địa chỉ giao hàng của khách hàng. Trang Tài khoản của tôi mặc định là một trang WordPress có chứa shortcode WooCommerce .

woocommerce_my_account]

Mặc dù trang độc đáo này có tất cả thông tin cơ bản mà người dùng của bạn cần để quản lý đơn đặt hàng và cài đặt của họ, việc chỉnh sửa trang Tài khoản của tôi có thể giúp bạn nổi bật hơn so với các đối thủ cạnh tranh và cung cấp trải nghiệm người dùng tốt hơn.

Tại sao phải tùy chỉnh Trang tài khoản của tôi trong WooCommerce?

Không có gì bí mật khi cung cấp một UX tuyệt vời là chìa khóa cho sự thành công của bất kỳ cửa hàng Thương mại điện tử nào. Người dùng mua hàng trực tuyến vì nó nhanh chóng và thoải mái, vì vậy bạn nên đảm bảo rằng cửa hàng của mình cung cấp cho họ những công cụ cần thiết để họ có trải nghiệm tuyệt vời.

Hầu hết các chủ cửa hàng tập trung sự chú ý của họ vào việc tùy chỉnh trang sản phẩm và thanh toán nhưng lại quên mất trang Tài khoản của tôi. Vì đây là trang được thiết kế cho người dùng đã đăng ký của bạn, việc tùy chỉnh nó có thể giúp bạn cải thiện trải nghiệm của họ trên trang web của bạn . Ngoài ra, nó có thể giúp bạn khiến họ quay lại cửa hàng và tăng doanh số bán hàng của bạn . Ví dụ: bạn có thể tạo một phần đặc biệt, nơi bạn hiển thị cho họ các giao dịch và khuyến mại được cá nhân hóa.

Chúng tôi đã phân tích các plugin tốt nhất để tùy chỉnh trang Tài khoản của tôi . Tuy nhiên, nếu bạn không muốn cài đặt bất kỳ công cụ nào của bên thứ ba và bạn có một số kỹ năng viết mã, chúng tôi có một số thứ dành cho bạn. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách chỉnh sửa trang Tài khoản của tôi WooCommerce theo lập trình .

Cách chỉnh sửa trang Tài khoản của tôi WooCommerce theo lập trình

Có hai kỹ thuật khác nhau để chỉnh sửa trang Tài khoản của tôi trong WooCommerce:

  1. Bạn có thể ghi đè các tệp mẫu WooCommerce mặc định
  2. Sử dụng một số móc WooCommerce

Phương pháp nào tốt hơn? Mỗi tùy chọn này thích hợp hơn cho các trường hợp khác nhau. Theo nguyên tắc chung, bạn nên cố gắng sử dụng hook thay vì ghi đè lên các tệp mẫu nếu có thể. Đây là một trong những phương pháp hay nhất mà WordPress đề xuất khi tùy chỉnh trang web của bạn.

Tuy nhiên, nếu bạn muốn thực hiện các tác vụ phức tạp hơn bao gồm các chức năng hoặc đối tượng, bạn có thể cần phải chỉnh sửa tệp mẫu. Trong hướng dẫn này, bạn sẽ học cách chỉnh sửa trang Tài khoản của tôi WooCommerce theo lập trình bằng cả hai phương pháp. Như bạn có thể tưởng tượng, chỉnh sửa tệp mẫu có nhiều rủi ro hơn so với việc sử dụng hook, vì vậy hãy ghi nhớ điều này trước khi chọn tùy chọn mong muốn của bạn.

1) Tùy chỉnh Trang Tài khoản của Tôi ghi đè các tệp mẫu

LƯU Ý : Vì phương pháp này liên quan đến việc ghi đè các tệp mẫu, chúng tôi khuyên bạn nên tạo một bản sao lưu đầy đủ cho trang web của mình trước khi bắt đầu. Nếu bạn không biết cách thực hiện, hãy xem hướng dẫn này . Để biết thêm thông tin chuyên sâu về cách tùy chỉnh các mẫu WooCommerce, hãy xem bài đăng này .

Quá trình ghi đè các tệp mẫu WooCommerce tương tự như việc ghi đè bất kỳ tệp nào khác trong chủ đề con của bạn. Như bạn đã biết, chủ đề con cho phép bạn chỉnh sửa chủ đề của mình mà không làm mất các tùy chỉnh khi bạn cập nhật chủ đề. Điều tương tự cũng áp dụng cho các plugin WooCommerce, vì vậy nếu bạn không có chủ đề con, bạn có thể tạo một hoặc sử dụng bất kỳ plugin nào trong số này .

Đầu tiên, trong bảng điều khiển quản trị WordPress của bạn , hãy chuyển đến Plugins> Editor . Sau đó, chuyển đến thư mục plugin, mở WooCommerce và tìm các tệp mẫu. Đối với điều này, bạn có thể sử dụng trình chỉnh sửa tệp plugin WordPress hoặc bất kỳ trình chỉnh sửa mã nào bạn chọn. Trong thư mục WooCommerce , hãy mở tệp mẫu và tìm thư mục myaccount .

plugins/woocommerce/templates/myaccount

Cách chỉnh sửa trang Tài khoản của tôi WooCommerce theo lập trình - Tệp mẫu
woocommerce tệp mẫu tài khoản của tôi

Mở /myaccountthư mục và bạn sẽ tìm thấy tất cả các tệp mẫu mà trang Tài khoản của tôi sử dụng.

Đây là các tệp mặc định hiện đang hoạt động trên trang web của bạn. Để ghi đè các tệp này, bạn cần tạo một tệp mới có cùng tên trong chủ đề con của bạn. Tuy nhiên, nếu bạn tạo một tệp trống, bạn vô hiệu hóa tất cả các chức năng của tệp gốc. Vì vậy, để tránh tạo ra các vấn đề trên trang web của bạn, bạn cần sao chép tệp mặc định và dán vào thư mục chủ đề của mình.

Chỉnh sửa trang Tài khoản của tôi WooCommerce theo lập trình - Ghi đè tệp mẫu

Ví dụ: giả sử bạn muốn sao chép dashboard.phptệp từ cài đặt WooCommerce. Trước khi dán nó vào chủ đề con, bạn cần tạo hai thư mục con lồng nhau và gọi chúng là / woocommerce và / myaccount . Sau đó, dán tệp dashboard.php vào đó:child_theme/woocommerce/myaccount/dashboard.php

Bây giờ, hãy mở tệp dashboard.php và thực hiện một số thay đổi nhỏ để đảm bảo nó hoạt động bình thường. Đó là nó! Bạn vừa học cách ghi đè tệp mẫu WooCommerce. Đó là bước đầu tiên. Bây giờ, hãy tiến thêm một bước và xem cách tùy chỉnh trang Tài khoản của tôi.

Tùy chỉnh bảng điều khiển trang Tài khoản của tôi

Bây giờ bạn đã biết cách ghi đè các tệp mẫu, hãy xem cách chỉnh sửa trang Tài khoản của tôi WooCommerce theo lập trình. Trong phần này, chúng tôi sẽ chỉ cho bạn cách tùy chỉnh trang tổng quan chính của trang Tài khoản của tôi. Vào cuối quá trình này, trang Tài khoản của tôi của bạn sẽ trông giống như sau:

tùy chỉnh mẫu trang tổng quan woocommerce tài khoản của tôi

Chúng tôi đã thêm một hình ảnh tiêu đề và một số văn bản bên dưới nó. Ngoài ra, chúng tôi đã tạo một danh sách với các liên kết đến các phần mà người dùng truy cập thường xuyên hơn, chân trang và một số liên kết hình ảnh để khách hàng có thể dễ dàng liên hệ với bạn.

Tập lệnh đầy đủ

Đây là dashboard.phptệp cuối cùng tạo ra ảnh chụp màn hình ở trên.

if (! được định nghĩa ('ABSPATH')) {
lối ra; // Thoát nếu truy cập trực tiếp.
}
$ allow_html = array (
'a' => array ('href' => array (),)
);
?>
<h2>
<? php
printf (
/ * người dịch: 1: tên hiển thị của người dùng 2: url đăng xuất * /
wp_kses (__ ('Này% 1 $ s, bạn đã trở lại!', 'woocommerce'), $ allow_html),
'<strong>'. esc_html ($ current_user-> display_name). '</strong>',
esc_url (wc_logout_url ())
);
?>
</h2>
<img id = "welcome" src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSBg81lLt4o-uEuBTgrMCwhDhX1HJKLCPTSxA&usqp=CAU" />
<h3>
<? php
/ * người dịch: 1: URL đơn hàng 2: URL địa chỉ 3: URL tài khoản. * /
$ dashboard_desc = __ ('Đây là trang tổng quan chính của tài khoản của bạn:', 'woocommerce');
if (wc_shipping_enabled ()) {
/ * người dịch: 1: URL đơn hàng 2: URL địa chỉ 3: URL tài khoản. * /
$ dashboard_desc = __ ('Đây là trang tổng quan chính của tài khoản của bạn:', 'woocommerce');
}
printf (
wp_kses ($ dashboard_desc, $ allow_html),
esc_url (wc_get_endpoint_url ('đơn đặt hàng')),
esc_url (wc_get_endpoint_url ('edit-address')),
esc_url (wc_get_endpoint_url ('tài khoản chỉnh sửa'))
);
$ ul_list = __ ('<ul>
<li> Xem <a href="%1$s"> các đơn đặt hàng gần đây </a> </li>
<li> Quản lý <a href="%2$s"> địa chỉ giao hàng và thanh toán </a> </li>
<li> <a href="%3$s"> Chỉnh sửa mật khẩu và chi tiết tài khoản của bạn </a> </li>
</ul> ');
$ div_contact = __ ('
<div class = "acc_contact">
<span class = "acc_images">
<a href="#link để gửi tin nhắn whatsapp"> <img src = "http: //localhost/Sampler/wp-content/uploads/2020/12/whatsapp-icon.png" /> </a>
<a href="#link tới tiểu sử facebook"> <img src = "http: //localhost/Sampler/wp-content/uploads/2020/12/fcbk-icon.png" /> </a>
<a href="#link tới hồ sơ twitter"> <img src = "http: //localhost/Sampler/wp-content/uploads/2020/12/twitter-icon.png" /> </a>
<a href="#link để gửi email"> <img src = "http: //localhost/Sampler/wp-content/uploads/2020/12/email-icon2.png" /> </a>
</span>
</div> ');
$ div_footer = __ ('
<div id = "acc_footer">
<h4> <i> Được xây dựng bằng tình yêu! </i> </h4>
<img src = "http: //localhost/Sampler/wp-content/uploads/2020/08/ql-logo-300x65.png" />
</div> ');
?>
</h3>
<p> Quản lý hồ sơ và thông tin cá nhân tại đây. Điền vào tất cả các trường để chúng tôi có thể biết về bạn. Tất cả các ấn bản được tạo trong tài khoản của bạn sẽ được phản ánh trên trang web ngay lập tức, vì vậy những người dùng khác có thể biết về bạn và nhu cầu hiện tại của bạn mà không bị chậm trễ </p>
<? php
echo $ ul_list. $ div_footer. $ div_contact;

Nếu bạn đã xem mã, bạn sẽ thấy rằng tất cả mã gốc mà chúng tôi đã sao chép từ mẫu mặc định vẫn còn ở đó. Chúng tôi vừa sửa đổi một số chuỗi và sắp xếp lại các liên kết dưới dạng danh sách. Trên hết, chúng tôi đã sử dụng các tập lệnh bổ sung để thêm nhiều nội dung hơn vào tab. Để hiểu rõ hơn về những thay đổi mà chúng tôi đã thực hiện, bạn có thể kiểm tra giá trị mặc định dashboard.php.

Thêm hình ảnh

Để hiển thị hình ảnh trên trang Tài khoản của tôi, bạn cần thay thế URL của hình ảnh. Điều tương tự cũng áp dụng cho các liên kết hình ảnh biểu tượng xã hội.

Tùy chỉnh CSS

Một cách khác để tùy chỉnh trang Tài khoản của tôi – và bất kỳ trang nào khác – là sử dụng tập lệnh CSS. Đây là tập lệnh CSS mà chúng tôi đã sử dụng để tạo kiểu cho tệp dashboard.php tùy chỉnh của chúng tôi :

.woocommerce-MyAccount-content> h2: nth-child (2),
.woocommerce-MyAccount-content> h3: nth-child (4) {
text-align: center;
}
.acc_contact {
padding-top: 20px;
text-align: center;
}
.acc_contact> h3 {
float: trái;
}
.acc_images {
margin: tự động;
chiều rộng: 50%;
hiển thị: khối;
}
#hoan nghênh{
margin: tự động;
}
.acc_images img {
margin-left: 4px;
margin-right: 4px;
display: inline-block;
chiều rộng: 55px;
}
#acc_footer {
margin-top: 15px;
màu nền: # 202020;
text-align: center;
bán kính đường viền: 15px;
}
#acc_footer> h4 {
padding-top: 20px;
màu: rgb (235, 228, 228);
font-weight: bold;
}
#acc_footer> img {
margin: tự động;
padding-bottom: 20px;
}

Bạn có thể lấy mã này làm cơ sở, dán nó vào  style.css tệp chủ đề con của bạn và tùy chỉnh nó theo giao diện của trang web của bạn.

2. Chỉnh sửa trang tài khoản của tôi WooCommerce bằng móc

Phương pháp thứ hai để chỉnh sửa trang Tài khoản của tôi theo chương trình là sử dụng một số móc WooCommerce. Đối với điều này, bạn sẽ cần phải có hiểu biết cơ bản về cách hook hoạt động trong WooCommerce. Nếu bạn không quen với hooks, chúng tôi khuyên bạn nên xem

A) Đổi tên các tab

Tập lệnh này sẽ đổi tên tab Địa chỉ thành Địa chỉ của bạn .

add_filter ('woocommerce_account_menu_items', 'QuadLayers_rename_acc_adress_tab', 9999);
function QuadLayers_rename_acc_adress_tab ($ items) {
$ items ['edit-address'] = 'Địa chỉ của bạn';
trả lại $ mục;
}

B) Xóa các tab

Để xóa hoàn toàn bất kỳ tab nào, hãy sử dụng hàm unset () như sau:

add_filter ('woocommerce_account_menu_items', 'QuadLayers_remove_acc_address', 9999);
function QuadLayers_remove_acc_address ($ items) {
unset ($ items ['lượt tải xuống']);
trả lại $ mục;
}

Trong tập lệnh trên, chúng tôi đã xóa tab Tải xuống . Bạn có thể tìm thấy danh sách đầy đủ các tab slug trong mảng $ items , vì vậy bạn có thể chọn một cái bạn muốn.

$ items = array (
'dashboard' => __ ('Dashboard', 'woocommerce'),
'đơn hàng' => __ ('Đơn hàng', 'woocommerce'),
'download' => __ ('Downloads', 'woocommerce'),
'edit-address' => _n ('Addresses', 'Address', (int) wc_shipping_enabled (), 'woocommerce'),
'Payment-methods' => __ ('Payment method', 'woocommerce'),
'edit-account' => __ ('Account details', 'woocommerce'),
'customer-logout' => __ ('Đăng xuất', 'woocommerce'),
);

C) Hợp nhất các tab và nội dung

Một tùy chọn khác để tùy chỉnh trang Tài khoản của tôi là hợp nhất các tab . Ví dụ: hãy xem cách xóa tab Địa chỉ và chuyển nội dung của nó sang tab Tài khoản .

// -----------------------------
// 1. Xóa tab Địa chỉ
add_filter ('woocommerce_account_menu_items', 'QuadLayers_remove_acc_tab', 999);
function QuadLayers_remove_acc_tab ($ items) {
unset ($ items ['edit-address']);
trả lại $ mục;
}
// -------------------------------
// 2. Chèn nội dung của tab Địa chỉ vào tab hiện có (chỉnh sửa tài khoản trong trường hợp này)
add_action ('woocommerce_account_edit-account_endpoint', 'woocommerce_account_edit_address');
hợp nhất nội dung tab woocommerce tài khoản của tôi

Bây giờ, tab Tài khoản sẽ giống như sau:

D) Thêm một tab mới với nội dung tùy chỉnh

Bây giờ, hãy xem cách thêm nội dung vào trang Tài khoản của tôi . Trong ví dụ này, chúng tôi sẽ thêm một tab mới có tên là Hỗ trợ nơi người dùng có thể dễ dàng xem các phiếu hỗ trợ của họ. Chúng tôi sẽ sử dụng hai mã ngắn do plugin của bên thứ ba cung cấp để hiển thị một số nội dung thú vị nhưng bạn sẽ có thể sử dụng bất kỳ mã ngắn nào bạn muốn trong tab mới của mình.

Tuy nhiên, hãy lưu ý rằng một số mã ngắn có thể không hoạt động do không tương thích với WooCommerce. Để thêm tab Hỗ trợ có nội dung tùy chỉnh vào trang Tài khoản của tôi WooCommerce, hãy dán mã sau vào functions.phptệp chủ đề con của bạn.

// 1. Register new endpoint
// Note: Resave Permalinks or it will give 404 error  
function QuadLayers_add_support_endpoint() {
    add_rewrite_endpoint( 'support', EP_ROOT | EP_PAGES );
}  
add_action( 'init', 'QuadLayers_add_support_endpoint' );  
// ------------------
// 2. Add new query
function QuadLayers_support_query_vars( $vars ) {
    $vars[] = 'support';
    return $vars;
}  
add_filter( 'query_vars', 'QuadLayers_support_query_vars', 0 );  
// ------------------
// 3. Insert the new endpoint 
function QuadLayers_add_support_link_my_account( $items ) {
    $items['support'] = 'Support ™';
    return $items;
}  
add_filter( 'woocommerce_account_menu_items', 'QuadLayers_add_support_link_my_account' );
// ------------------
// 4. Add content to the new endpoint  
function QuadLayers_support_content() {
echo '<h3>Support</h3><p>Welcome to the support area. As a premium customer, manage your support tickets from here, you can submit a ticket if you have any issues with your website. We\'ll put our best to provide you with a fast and efficient solution</p>';
echo do_shortcode( '[tickets-shortcode]' );
echo do_shortcode( '[wpforms id="1082"]' );
}  
add_action( 'woocommerce_account_support_endpoint', 'QuadLayers_support_content' );

Nếu bạn gặp lỗi không tìm thấy trang 404 khi nhấp vào tab mới, hãy mở trang liên kết cố định bằng cách đi tới bảng điều khiển WordPress> Cài đặt> Permalinks và nhấp vào nút Lưu ở dưới cùng.

tab tùy chỉnh tài khoản của tôi woocommerce

Lưu ý rằng kịch bản được chia thành bốn phần. Mỗi người trong số họ hoàn thành một nhiệm vụ khác nhau, vì vậy bạn sử dụng các phần mà bạn muốn thêm vào cửa hàng của mình. Cũng nên nhớ rằng trong phần cuối cùng của tập lệnh (4), bạn có thể thay thế mã ngắn trong do_shortcode()hàm. Đây sẽ là kết quả cuối cùng cho tab Hỗ trợ mới. 

Phần kết luận

Nói chung, trang Tài khoản của tôi mặc định có thông tin cơ bản mà người dùng cần nhưng nó khá cơ bản. Vì vậy, nếu bạn muốn cải thiện trải nghiệm người dùng trên cửa hàng của mình, bạn nên tùy chỉnh trang Tài khoản của tôi. Điều này không chỉ giúp bạn nâng cao một phần rất quan trọng của cửa hàng mà còn thúc đẩy doanh số bán hàng của bạn.

  • Ghi đè các tệp mẫu
  • Sử dụng móc WooCommerce

Cả hai phương pháp sẽ hoàn thành công việc nhưng theo nguyên tắc chung, chúng tôi khuyên bạn nên sử dụng hook khi có thể. Nó ít rủi ro hơn và đó là một trong những phương pháp hay nhất mà WordPress đề xuất. Trong hướng dẫn này, chúng tôi đã xem một số ví dụ về những điều bạn có thể làm bằng cả hai phương pháp. Chúng tôi khuyên bạn nên sử dụng các tập lệnh này làm hướng dẫn, sử dụng chúng để lấy một số ý tưởng và chơi xung quanh để tận dụng tối đa trang Tài khoản của tôi trong cửa hàng của bạn.

Mua các plugin WOOCOMMERCE giá rẻ

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Back to top button