วิธีปรับแต่งหน้าบัญชี WooCommerce ของฉันโดยใช้ Elementor

WooCommerce เป็นหนึ่งในแพลตฟอร์มอีคอมเมิร์ซที่ใช้มากที่สุดบนอินเทอร์เน็ต การศึกษาเมื่อเร็ว ๆ นี้ชี้ให้เห็นว่าร้านค้าอย่างน้อย 5 ล้านแห่งใช้ WooCommerce เพื่อขายสินค้า (ดิจิทัลหรือทางกายภาพ) บนอินเทอร์เน็ต น่าทึ่งใช่มั้ย?

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

แต่อย่างที่เราทราบ การปรับแต่งหน้า WooCommerce นั้นไม่ใช่เรื่องง่าย แม้ว่า Elementor Pro จะมีวิดเจ็ตที่สามารถใช้ปรับแต่งหน้าผลิตภัณฑ์ของ WooCommerce ได้ แต่ไม่มีวิดเจ็ตใดที่จะปรับแต่งหน้าบัญชีของฉัน

วิดเจ็ต WooCommerce My Account ของ PowerPack ให้คุณปรับแต่งหน้าบัญชีของฉันใน WooCommerce ได้ ส่วนที่ดีที่สุดคือ ไม่ต้องใช้ Elementor Pro! ใช่ มันใช้งานได้กับ Elementor เวอร์ชันฟรี

ในบทช่วยสอนนี้ ฉันจะเริ่มต้นด้วยพื้นฐานและเราจะเจาะลึกในการปรับแต่งทุกแง่มุมของหน้าบัญชีของฉันของ WooCommerce

ดังนั้นโดยไม่ต้องกังวลใจอีกต่อไป เรามาเริ่มกันเลย!

การปรับแต่ง WooCommerce หน้าบัญชีของฉัน

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

เอาล่ะไปต่อกันเลย ในการปรับแต่งหน้าบัญชีของฉัน เราจะใช้ปลั๊กอินสามตัวเหล่านี้:

• Elementor เวอร์ชันฟรี: รับ Elementor
• ปลั๊กอิน WooCommerce: รับ WooCommerce
• PowerPack สำหรับ Elementor: รับ PowerPack

เมื่อคุณติดตั้งและเปิดใช้งานปลั๊กอินเหล่านี้แล้ว คุณจะต้องสร้างหน้าใหม่โดยไปที่ แดชบอร์ด WordPress > หน้า > เพิ่มใหม่ ตั้งชื่อเพจเป็น “Custom WooCommerce My Account Page”

จากนั้นคลิกที่ "แก้ไขด้วย Elementor" เพื่อเปิดหน้าใน Elementor Page Builder

เปิดตัวแก้ไข Elementor

ทันทีที่คุณคลิกที่ “แก้ไขด้วย Elementor” ตัวแก้ไข Elementor จะเปิดขึ้น ถัดไป ลากและวาง วิดเจ็ต บัญชีของฉัน ในตัวแก้ไข Elementor ทันทีที่คุณเพิ่ม วิดเจ็ต บัญชีของฉัน คุณจะเห็นแท็บบัญชีของฉันปรากฏขึ้นพร้อมกับการตั้งค่าเริ่มต้น

ภาพหน้าจอด้านล่างแสดงให้เห็นว่าหน้าของคุณจะมีลักษณะอย่างไรหลังจากเพิ่มวิดเจ็ต บัญชีของฉัน

ตอนนี้เราได้เพิ่มวิดเจ็ต WooCommerce My Account ของ PowerPack ลงในหน้าแล้ว เราจะปรับแต่งและจัดรูปแบบหน้าบัญชีของฉันของร้านค้า WooCommerce ของเราในแท็บเนื้อหาและสไตล์ของเครื่องมือแก้ไข Elementor

การปรับแต่งวิดเจ็ตบัญชีของฉัน WooCommerce ของ PowerPack ในแท็บเนื้อหา

มี 2 ​​ส่วนในแท็บเนื้อหาของวิดเจ็ตบัญชีของฉัน: ตัวอย่าง และ แท็บ

• แสดงตัวอย่าง: ในส่วนนี้ คุณสามารถเลือกปลายทางที่จะเปิดให้คุณ เพื่อให้คุณสามารถปรับแต่งหน้าบัญชีของฉันในไซต์ของคุณได้ ปลายทางที่คุณสามารถเลือกได้คือ Dashboard, Orders, Downloads, Addresses และ Account Details

• แท็บ: ในส่วนแท็บ คุณจะมีตัวเลือกให้เลือกแท็บที่คุณต้องการแสดงหรือซ่อน แท็บที่คุณสามารถเลือกแสดง/ซ่อนได้ ได้แก่ แดชบอร์ด คำสั่งซื้อ ดาวน์โหลด ที่อยู่ รายละเอียดบัญชี และ ลิงก์ออกจากระบบ

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

ตอนนี้เราได้สร้างโครงสร้างของหน้าบัญชีของฉันแล้ว มาจัดรูปแบบให้สวยงามกันเถอะ

วิดเจ็ตบัญชีของฉัน WooCommerce ของ PowerPack จัดแต่งทรงผมในแท็บสไตล์

ดังที่คุณเห็นในภาพหน้าจอด้านบน วิดเจ็ตบัญชีของฉันประกอบด้วย 5 ส่วนในแท็บรูปแบบ:

• แท็บ
• โต๊ะ
• ปุ่ม
• แบบฟอร์ม
• ประกาศ

ให้เราผ่านแต่ละส่วนทีละส่วน

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

• ตาราง: ในส่วนตาราง คุณสามารถจัดรูปแบบตาราง "คำสั่งซื้อ" ของหน้าบัญชีของฉันได้ คุณสามารถตั้งค่ารูป แบบตัวอักษร และ เส้นขอบ ของทั้งตารางในคราวเดียว หรือคุณสามารถตั้งค่าแต่ละรายการสำหรับ ส่วนหัว แถว และ เซลล์ ได้ นอกจากนี้ คุณยังสามารถเลือก สีข้อความ สี พื้นหลัง และ ช่องว่าง ภายในสำหรับข้อความส่วนหัว ข้อความแถว และข้อความในแต่ละเซลล์

• ปุ่ม: ส่วนนี้ใช้เพื่อจัดรูปแบบปุ่มที่มีอยู่ใน แท็บ ต่างๆ ของหน้าบัญชีของฉัน จากส่วนนี้ คุณสามารถตั้งค่าการ พิมพ์ สีพื้นหลัง สีข้อความ และ ประเภทเส้นขอบ สำหรับ ปุ่ม ใน สถานะปกติ และ ใช้งานอยู่ นอกจากนี้ คุณสามารถตั้งค่าระยะห่างระหว่าง ช่องว่าง ภายในและ ปุ่ม จากส่วนนี้ได้เช่นกัน

• แบบฟอร์ม: หน้าบัญชีของฉันของร้านค้า WooCommerce ของคุณประกอบด้วยแบบฟอร์มต่างๆ เช่น ที่อยู่สำหรับจัดส่ง ที่อยู่ เรียกเก็บเงิน และ รายละเอียดบัญชี ดังนั้น ในส่วนแบบฟอร์ม คุณสามารถกำหนดรูปแบบฟิลด์ของแบบฟอร์มเหล่านี้ได้ คุณสามารถจัดรูปแบบ หัวเรื่อง ปุ่มส่ง ป้ายชื่อ และ ช่องป้อนข้อมูล ในแบบฟอร์ม แต่ละฟิลด์เหล่านี้สามารถจัดสไตล์ได้โดยการเปลี่ยน ข้อความ พื้นหลัง เส้นขอบ กล่องเงา ลิงก์ และสี โฮเวอร์ลิงก์

นอกจากนี้ คุณสามารถจัดแนว ข้อความในช่องป้อนข้อมูล และ เปลี่ยนความกว้าง ของ ปุ่มส่ง ถัดไป คุณสามารถตั้งค่าการ เติม ระหว่าง แต่ละฟิลด์ และ ระยะขอบระหว่างส่วนหัว และ ฟิลด์ และนอก ปุ่มส่ง

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

ตั้งค่า "หน้าบัญชีของฉันเอง WooCommerce" ที่สร้างขึ้นใหม่เป็นหน้าบัญชีเริ่มต้นของฉัน

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

ซึ่งจะเปิด หน้าบัญชีของฉัน Custom WooCommerce ที่คุณสร้างขึ้นโดยใช้ วิดเจ็ต WooCommerce My Account ของ PowerPack ทุกครั้งที่ผู้ใช้เข้าสู่ไซต์ของคุณ

ปิดท้าย!

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

ตรวจสอบหน้าบัญชีของฉัน WooCommerce ที่ปรับแต่งโดยใช้ วิดเจ็ต WooCommerce My Account ของ PowerPack ด้านล่าง!

ฉันแน่ใจว่าด้วยความช่วยเหลือของบทช่วยสอนนี้ คุณจะสามารถตั้งค่าหน้าบัญชีของฉัน Custom WooCommerce ของฉันได้อย่างง่ายดาย

คุณสามารถทำสิ่งต่างๆ ได้มากขึ้นด้วย PowerPack Addon สำหรับ Elementor มีวิดเจ็ตสร้างสรรค์มากกว่า 70 รายการที่คุณสามารถใช้เพื่อปรับแต่งหน้า Elementor ของคุณ หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับโปรแกรมเสริม PowerPack สำหรับ Elementor ให้ตรวจสอบที่นี่

คุณคิดอย่างไรกับบทช่วยสอนนี้ แชร์หากคุณพบว่าคู่มือนี้มีประโยชน์!