วิธีสร้าง WooCommerce กำหนดหน้าบัญชีของฉันเอง

เผยแพร่แล้ว: 2021-05-11

WooCommerce กำหนดหน้าบัญชีของฉันเอง คุณกำลังมองหาวิธีปรับแต่งหน้า "บัญชีของฉัน" ของ WooCommerce หรือไม่? การแก้ไขหน้าบัญชีเป็นหนึ่งในหน้าที่สำคัญที่สุดในร้านค้า WooCommerce หน้านี้ควรมีการออกแบบที่สวยงามเพราะมีความสำคัญต่อการทำงานที่ราบรื่นของร้านค้าออนไลน์ทั้งหมดของคุณ

ควรออกแบบในลักษณะที่อนุญาตให้ผู้ใช้ใช้การจัดการบัญชีให้เกิดประโยชน์สูงสุด เพิ่มยอดขาย และหรือดึงดูดลูกค้าให้ซื้อซ้ำ

หน้า 'บัญชีของฉัน' และหน้าย่อยสามารถแสดงได้ทุกที่ในไซต์ของคุณโดยใช้รหัสย่อ รหัสย่อเป็นวิธีที่ง่ายในการเพิ่มเนื้อหาแบบไดนามิกไปยังบทความ หน้า และแถบด้านข้างของ WordPress

WooCommerce กำหนดหน้าบัญชีของฉันเอง

ในบทช่วยสอนสั้นๆ นี้ เราจะแสดงให้คุณเห็นว่าคุณปรับแต่งรูปลักษณ์ ความรู้สึก เลย์เอาต์ เนื้อหา และการออกแบบของหน้า 'บัญชีของฉัน' โดยใช้สคริปต์ PHP แบบกำหนดเองได้อย่างไร ซึ่งหมายความว่าคุณจำเป็นต้องมีความรู้ด้านการเขียนโปรแกรมก่อนที่จะดำเนินการต่อ

คุณสามารถบรรลุเกือบทุกอย่างใน WooCommerce หากคุณคุ้นเคยกับการปรับแต่ง PHP ซึ่งหมายความว่าคุณสามารถเพิ่มแท็บที่กำหนดเอง เปลี่ยนชื่อแท็บ เอาแท็บออก หรือรวมเนื้อหาแท็บได้

ให้เราดูว่าคุณจะบรรลุเป้าหมายนี้ได้อย่างไร

ขั้นตอนในการแก้ไขหน้าบัญชีของฉันโดยใช้ข้อมูลโค้ด PHP

ในส่วนนี้ เราจะใช้ WooCommerce hooks เนื่องจากเป็นหนึ่งในแนวทางปฏิบัติที่ดีที่สุดที่ WordPress แนะนำเมื่อปรับแต่งไซต์ของคุณ

เราจะเพิ่มแท็บที่กำหนดเอง เปลี่ยนชื่อแท็บ ลบแท็บ และรวมเนื้อหาแท็บ

นี่คือขั้นตอนที่คุณต้องปฏิบัติตามเพื่อแก้ไขหน้าบัญชีของฉันโดยทางโปรแกรม:

  1. ลงชื่อเข้าใช้ไซต์ WordPress และเข้าถึง แดชบอร์ด ในฐานะผู้ดูแลระบบ
  2. จากเมนูแดชบอร์ด ให้คลิกที่ เมนูลักษณะที่ปรากฏ > เมนูตัวแก้ไขธีม เมื่อหน้า Theme Editor เปิดขึ้น ให้มองหาไฟล์ฟังก์ชันของธีมที่เราจะเพิ่มข้อมูลโค้ด PHP
  3. หากคุณต้องการเปลี่ยนชื่อแท็บ Address เป็น Delivery Address ให้ เพิ่มโค้ดต่อไปนี้ ในไฟล์ php คุณสามารถใช้รหัสเดียวกันเพื่อเปลี่ยนชื่อแท็บใดก็ได้ 
add_filter( 'woocommerce_account_menu_items', 'njengah_rename_address_my_account', 9999 );

function njengah_rename_address_my_account( $items ) {

   $items['edit-address'] = 'Delivery Address';

     return $items;

}
  1. นี่คือผลลัพธ์: ที่อยู่สำหรับการจัดส่ง
  2. หากคุณต้องการลบแท็บ Address ให้ เพิ่มโค้ดต่อไปนี้ ในไฟล์ php : 
add_filter( 'woocommerce_account_menu_items', 'njengah_remove_address_my_account', 9999 );

function njengah_remove_address_my_account( $items ) {

unset( $items['edit-address'] );

return $items;

}
  1. นี่คือรายการทั้งหมดของทากแท็บในอาร์เรย์ $items เพื่อให้คุณสามารถเลือกแท็บที่คุณต้องการลบ: 
$items = array(

'dashboard' => __( 'Dashboard', 'woocommerce' ),

'orders' => __( 'Orders', 'woocommerce' ),

'downloads' => __( 'Downloads', 'woocommerce' ),

'edit-address'; => _n( 'Addresses', 'Address', (int) wc_shipping_enabled(), 'woocommerce' ),

'payment-methods' => __( 'Payment methods', 'woocommerce' ),

'edit-account' => __( 'Account details', 'woocommerce' ),

'customer-logout' => __( 'Logout', 'woocommerce' ),

);
  1. นอกจากนี้ยังสามารถรวมแท็บและเนื้อหาได้อีกด้วย ตัวอย่างเช่น คุณสามารถลบแท็บที่อยู่และย้ายเนื้อหาไปที่แท็บบัญชี คุณสามารถทำได้โดย เพิ่มรหัสต่อไปนี้ ในไฟล์ php : 
// -----------------------------

// 1. Remove the Addresses tab

add_filter( 'woocommerce_account_menu_items', 'njengah_remove_acc_tab', 999 );

function njengah_remove_acc_tab( $items ) {

unset($items['edit-address']);

return $items;

}

// -------------------------------

// 2. Insert the content of the Addresses tab into an existing tab (edit-account in this case)

add_action( 'woocommerce_account_edit-account_endpoint', 'woocommerce_account_edit_address' );
  1. นี่คือผลลัพธ์: ที่อยู่
  2. คุณยังสามารถสร้างแท็บที่กำหนดเองในหน้านี้ได้อีกด้วย ตัวอย่างเช่น คุณสามารถเพิ่มแท็บใหม่ที่เรียกว่า Support ซึ่งผู้ใช้สามารถดูตั๋วสนับสนุนได้อย่างง่ายดาย เพื่อให้บรรลุสิ่งนี้ ให้ เพิ่มรหัสต่อไปนี้ ในไฟล์ php : 
/**
* Add New Tab on the My Account page
*/

// ------------------

// 1. Register new endpoint (URL) for My Account page

// Note: Re-save Permalinks or it will give 404 error

function njengah_add_premium_support_endpoint() {

add_rewrite_endpoint( 'premium-support', EP_ROOT | EP_PAGES );

}

add_action( 'init', 'njengah_add_premium_support_endpoint' );

// ------------------

// 2. Add new query var

function njengah_premium_support_query_vars( $vars ) {

$vars[] = 'premium-support';

return $vars;

}

add_filter( 'query_vars', 'njengah_premium_support_query_vars', 0 );

// ------------------

// 3. Insert the new endpoint into the My Account menu

function njengah_add_premium_support_link_my_account( $items ) {

$items['premium-support'] = 'Premium Support';

return $items;

}

add_filter( 'woocommerce_account_menu_items', 'njengah_add_premium_support_link_my_account' );

// ------------------

// 4. Add content to the new tab

function njengah_premium_support_content() {

echo 'Premium WooCommerce Support. Welcome to the WooCommerce support area. As a premium customer, you can submit a ticket should you have any WooCommerce issues with your website, snippets or customization. <i>Please contact your theme/plugin developer for theme/plugin-related support.</i></p>';

echo do_shortcode( ' /* your shortcode here */ ' );

}

add_action( 'woocommerce_account_premium-support_endpoint', 'njengah_premium_support_content' );

// Note: add_action must follow 'woocommerce_account_{your-endpoint-slug}_endpoint' format
  1. คุณสามารถใช้ปลั๊กอินของบุคคลที่สามเช่น WPForms เพื่อสร้างหน้าสนับสนุน หลังจากนั้น คุณสามารถวางรหัสย่อในบรรทัดสุดท้าย นี่คือผลลัพธ์: การสนับสนุนระดับพรีเมียม

บทสรุป

ถึงตอนนี้ คุณควรจะปรับแต่งหน้าบัญชีได้แล้ว เราแนะนำให้สร้างธีมลูกก่อนแก้ไขหน้านี้ เพื่อให้แน่ใจว่าการเปลี่ยนแปลงของคุณจะไม่สูญหายระหว่างการอัปเดต เราหวังว่าบทช่วยสอนนี้จะให้ทางออกที่ดีที่สุดแก่คุณ

บทความที่คล้ายกัน

  1. 100+ Tips, Tricks & Snippets Ultimate WooCommerce ซ่อนคู่มือ
  2. การเปลี่ยนเส้นทาง WooCommerce หลังจากชำระเงิน : เปลี่ยนเส้นทางไปยังหน้าขอบคุณแบบกำหนดเอง
  3. วิธีเปลี่ยนหน้าขอบคุณ WooCommerce
  4. วิธีซ่อนแท็กในธีมหน้าร้าน WooCommerce
  5. วิธีปิดการใช้งานวิธีการชำระเงินสำหรับหมวดหมู่เฉพาะ
  6. ซ่อนหรือลบช่องปริมาณจากหน้าผลิตภัณฑ์ WooCommerce
  7. วิธีเพิ่ม WooCommerce เปลี่ยนเส้นทางหน้าบัญชีของฉัน
  8. วิธีซ่อนแดชบอร์ดในหน้าบัญชีของฉัน WooCommerce
  9. วิธีรับวิธีการชำระเงินใน WooCommerce » ตัวอย่างโค้ด
  10. วิธีการตั้งค่า WooCommerce ซื้อหนึ่งแถมหนึ่ง
  11. วิธีการส่งออกสินค้าใน WooCommerce
  12. วิธีการทำซ้ำผลิตภัณฑ์ใน WooCommerce
  13. วิธีเลือกทั้งหมดยกเว้นลูกสุดท้ายใน CSS » CSS ไม่ใช่ตัวอย่างลูกสุดท้าย
  14. วิธีลบเมนูดาวน์โหลด หน้าบัญชีของฉัน WooCommerce
  15. วิธีการตั้งค่า WooCommerce ปริมาณการสั่งซื้อสูงสุดหรือขั้นต่ำ
  16. วิธีตั้งค่าไฟล์อัพโหลด WooCommerce บน Checkout
  17. วิธีซ่อนหมวดหมู่จากหน้าร้านค้า WooCommerce
  18. วิธีการเปลี่ยนข้อความตัวแทนฟิลด์การชำระเงิน WooCommerce
  19. วิธีซ่อนการดาวน์โหลดจากบัญชีของฉัน WooCommerce
  20. วิธีการเปลี่ยนรหัสคูปอง WooCommerce