วิธีปรับแต่งแบบฟอร์มเข้าสู่ระบบและลงทะเบียน WooCommerce
เผยแพร่แล้ว: 2022-02-07นอกกรอบ WooCommerce มีตัวเลือกการปรับแต่งที่จำกัดสำหรับแบบฟอร์มการเข้าสู่ระบบและการลงทะเบียน ทำให้เจ้าของร้านค้าสามารถมอบประสบการณ์การใช้งานที่ดีให้กับลูกค้าได้ยาก
นอกจากนี้ คุณถูกจำกัดให้อยู่ที่ช่องการชำระเงินเริ่มต้น ซึ่งหมายความว่าคุณไม่สามารถรวบรวมข้อมูลเพิ่มเติมจากลูกค้าระหว่างการชำระเงินได้ ซึ่งไม่เหมาะสำหรับร้านค้าที่ต้องการให้ลูกค้าสามารถเลือกวันที่จอง ป้อนที่อยู่อีเมลหลายรายการ หรือเสนอตัวเลือกการห่อของขวัญ
วิธีหนึ่งที่จะเอาชนะสิ่งนี้ได้คือการใช้ปลั๊กอินที่มีประสิทธิภาพ เช่น ProfilePress ที่ให้คุณจัดการทุกอย่างได้ในที่เดียว ในบทความนี้ เราจะพูดถึงวิธีปรับแต่งแบบฟอร์มการเข้าสู่ระบบและการลงทะเบียน WooCommerce โดยใช้ ProfilePress
ทำไมต้องปรับแต่งแบบฟอร์มเข้าสู่ระบบและลงทะเบียน WooCommerce?
การปรับแต่งแบบฟอร์มการเข้าสู่ระบบและการลงทะเบียน WooCommerce สามารถช่วยให้เว็บไซต์ของคุณใช้งานง่ายขึ้นและเพิ่มการแปลง
เจ้าของร้านค้าอาจต้องกำหนดรูปแบบการเข้าสู่ระบบและการลงทะเบียนเริ่มต้นของ WooCommerce เพื่อมอบประสบการณ์ที่เป็นส่วนตัวให้กับลูกค้า ด้วยการสร้างแบบฟอร์มการเข้าสู่ระบบและการลงทะเบียนพิเศษ คุณสามารถปรับปรุงประสบการณ์ของลูกค้าบนไซต์ของคุณและเพิ่มการลงทะเบียนให้สูงสุด
คุณยังสามารถเพิ่มฟิลด์ที่กำหนดเองลงในหน้าชำระเงินของไซต์ WooCommerce เพื่อรวบรวมข้อมูลเพิ่มเติมจากลูกค้าก่อนที่จะชำระเงิน ตัวอย่างเช่น คุณสามารถให้ลูกค้าเพิ่มบัญชีโซเชียลมีเดีย ชื่อผู้ใช้ หรือแสดงข้อมูลเพิ่มเติมเกี่ยวกับสินค้าในตะกร้าสินค้า สิ่งนี้จะช่วยให้คุณมอบประสบการณ์การช็อปปิ้งที่เป็นส่วนตัวยิ่งขึ้นให้กับลูกค้าของคุณ
การแทนที่หน้า "บัญชีของฉัน" เริ่มต้นใน WooCommerce ด้วยหน้าที่กำหนดเองเป็นวิธีที่ยอดเยี่ยมในการทำให้ร้านค้าของคุณโดดเด่น คุณสามารถให้ลูกค้าลงชื่อเข้าใช้บัญชีของพวกเขาและจัดการรายละเอียดของพวกเขาได้อย่างง่ายดายจากที่รวมศูนย์ ตัวอย่างเช่น พวกเขาสามารถเข้าสู่ระบบ ลงชื่อสมัครใช้ และปรับแต่งบัญชีผู้ใช้ของตนโดยอัปโหลดรูปโปรไฟล์ แก้ไขชื่อเล่น หรือเพิ่มประวัติ
การปรับแต่งแบบฟอร์มการเข้าสู่ระบบและการลงทะเบียน WooCommerce สามารถช่วยให้คุณมอบประสบการณ์ผู้ใช้ที่ดียิ่งขึ้นบนร้านค้าออนไลน์ของคุณ
ปรับแต่งแบบฟอร์มเข้าสู่ระบบและลงทะเบียน WooCommerce
การใช้ ProfilePress ทำให้ง่ายต่อการปรับแต่งแบบฟอร์มการเข้าสู่ระบบและการลงทะเบียนของ WooCommerce และทำให้พวกเขามีลักษณะตามที่คุณต้องการ
ProfilePress นำเสนอโซลูชันแบบครบวงจรสำหรับการสร้างไซต์ WordPress ที่น่าสนใจและมีเครื่องมือมากมายที่ช่วยให้คุณควบคุมได้ว่าใครสามารถเข้าถึงเนื้อหาของคุณได้ คุณสามารถสร้างโปรไฟล์ผู้ใช้ที่ใช้งานง่ายพร้อมกับการลงทะเบียนและแบบฟอร์มการเข้าสู่ระบบที่น่าสนใจโดยใช้เครื่องมือสร้างแบบลากแล้ววาง
สำหรับสิ่งนี้ เราจำเป็นต้องมีไซต์ WordPress ที่ใช้งานได้พร้อมติดตั้งปลั๊กอิน WooCommerce เรายังต้องใช้ปลั๊กอิน ProfilePress เพื่อสร้างแบบฟอร์มการเข้าสู่ระบบและการลงทะเบียนที่กำหนดเอง
ขั้นตอนที่ #1: ติดตั้งและเปิดใช้งาน ProfilePress
เริ่มต้นด้วยการรับปลั๊กอิน ProfilePress และติดตั้งบนเว็บไซต์ WordPress ของคุณ ไปที่ Plugins → Add New โดยใช้แผง admin ของ WordPress และคลิกที่ปุ่ม Add New อัปโหลดไฟล์ zip และติดตั้งปลั๊กอินบนไซต์ WordPress ของคุณ
ขั้นตอนที่ #2: ปรับแต่งแบบฟอร์มการเข้าสู่ระบบและการลงทะเบียน
สิ่งแรกที่เราต้องทำคือเริ่มสร้างแบบฟอร์มการเข้าสู่ระบบแบบกำหนดเองโดยใช้ ProfilePress ในการดำเนินการนี้ ให้ไปที่ ProfilePress → Forms & Profiles และคลิกที่ปุ่ม Add new ใต้ส่วนการ เข้าสู่ระบบ คลิกที่ตัวสร้างการ ลากและวาง แล้วเลือกเทมเพลต เพื่อการสาธิตนี้ เราได้เลือกเทมเพลต Bash
เมื่อคุณเลือกเทมเพลต คุณจะถูกเปลี่ยนเส้นทางไปยังหน้า แก้ไขแบบฟอร์ม โดยอัตโนมัติ คุณสามารถเพิ่มและวาง Fields ตามลำดับที่คุณต้องการและแก้ไข Field Labels ได้เช่นกัน
คุณยังสามารถแก้ไขการ ตั้งค่าแบบฟอร์ม และปรับแต่งลักษณะที่ปรากฏและป้ายกำกับของปุ่มบนแบบฟอร์มการเข้าสู่ระบบได้อีกด้วย เมื่อคุณทำเสร็จแล้ว ให้คลิกที่ปุ่ม บันทึกการเปลี่ยนแปลง เพื่อดำเนินการต่อ ตอนนี้ เราต้องสร้างหน้า WordPress ใหม่และเพิ่มแบบฟอร์มการเข้าสู่ระบบที่กำหนดเองลงในหน้านั้นโดยใช้รหัสย่อที่กำหนดเอง
ไปที่ หน้า → เพิ่มใหม่ เพื่อสร้างหน้าใหม่และเพิ่มรหัสย่อแบบฟอร์มการเข้าสู่ระบบไปยังหน้า คลิกที่ปุ่ม เผยแพร่ เพื่อดำเนินการต่อ
ตอนนี้ เราจะสร้างแบบฟอร์มการลงทะเบียนและเพิ่มลงในหน้า WordPress ใหม่ ในการดำเนินการนี้ ให้ไปที่ ProfilePress → Forms & Profiles แล้วคลิกปุ่ม เพิ่มใหม่ ใต้ส่วนการ ลงทะเบียน
ตั้งชื่อแบบฟอร์มการลงทะเบียนและเลือกเทมเพลตเพื่อเริ่มปรับแต่ง เราได้เลือกแม่แบบ ทิวลิป คุณจะถูกเปลี่ยนเส้นทางไปยังหน้า แก้ไขแบบฟอร์ม โดยอัตโนมัติ
ที่นี่ คุณสามารถเพิ่มหรือลบฟิลด์ออกจากแบบฟอร์มการลงทะเบียนของคุณ และเปลี่ยนลักษณะที่ปรากฏในส่วนหน้า เมื่อคุณปรับแต่งแบบฟอร์มการลงทะเบียนเสร็จแล้ว ให้คลิกที่ปุ่ม บันทึกการเปลี่ยนแปลง เพื่อดำเนินการต่อ
ในการสร้างหน้าลงทะเบียน WordPress ใหม่ ให้ไปที่ หน้า → เพิ่มใหม่ และวางรหัสย่อของแบบฟอร์มการลงทะเบียน คลิกที่ปุ่ม เผยแพร่ เพื่อดำเนินการต่อ
ขั้นตอนที่ #3: แสดงแบบฟอร์มการเข้าสู่ระบบและการลงทะเบียนที่ส่วนหน้า
ตรงไปที่ ProfilePress → Settings และคลิกที่แท็บ General เพิ่มหน้าเข้าสู่ระบบและการลงทะเบียนแบบกำหนดเองที่สร้างขึ้นใหม่ไปยังร้านค้าของคุณโดยใช้เมนูแบบเลื่อนลงและคลิกที่ปุ่ม บันทึกการเปลี่ยนแปลง เพื่อดำเนินการต่อ
สิ่งนี้จะแทนที่หน้าเข้าสู่ระบบ WordPress เริ่มต้นและลิงค์เข้าสู่ระบบและการลงทะเบียนทั้งหมดจาก WooCommerce ด้วย ProfilePress นี่คือลักษณะที่ปรากฏที่ส่วนหน้าของไซต์ของคุณ

ขั้นตอนที่ #3.5: การแทนที่การเข้าสู่ระบบ WooCommerce และแบบฟอร์มการลงทะเบียน
หากต้องการแทนที่แบบฟอร์มการลงทะเบียนและเข้าสู่ระบบที่แสดงบนหน้าบัญชีของฉันของ WooCommerce ให้ไปที่ การตั้งค่า >> WooCommerce และเลือกแบบฟอร์มการเข้าสู่ระบบและการลงทะเบียนของ ProfilePress เพื่อแทนที่ด้วย
ผู้ใช้จะสามารถลงทะเบียนบัญชีในไซต์ WooCommerce ของคุณได้โดยใช้แบบฟอร์มการลงทะเบียนที่กำหนดเองที่น่าสนใจ ผู้ใช้ที่ลงทะเบียนแล้วสามารถเข้าสู่ระบบบัญชีของตนโดยใช้แบบฟอร์มการเข้าสู่ระบบแบบกำหนดเองที่เราสร้างไว้ก่อนหน้านี้:
ขั้นตอนที่ #4: เพิ่มฟิลด์ที่กำหนดเองในหน้าชำระเงิน
คุณสามารถเพิ่มฟิลด์ที่กำหนดเองลงในหน้าชำระเงินของร้านค้า WooCommerce ของคุณได้ ในการดำเนินการนี้ เพียงไปที่ ProfilePress → Settings แล้วคลิกแท็บ Custom Fields
คลิกที่ปุ่ม เพิ่มใหม่ และตั้งค่า ฟิลด์ป้ายกำกับ สำหรับฟิลด์ที่คุณกำหนดเอง หลังจากตั้งค่า ฟิลด์คีย์ และ คำอธิบายฟิลด์แล้ว คุณสามารถตั้งค่า ฟิลด์ประเภท ขึ้นอยู่กับสิ่งที่คุณต้องการ
คุณสามารถสร้างข้อความ รหัสผ่าน อีเมล โทรศัพท์ ฟิลด์ที่ซ่อนอยู่ หมายเลข วันที่ ประเทศ การอัปโหลดไฟล์ ปุ่มตัวเลือก ช่องกาเครื่องหมาย ฟิลด์พื้นที่ข้อความ และแสดงบนหน้าชำระเงินของร้านค้า WooCommerce ของคุณ
เมื่อคุณพร้อมแล้ว ให้คลิกที่ปุ่ม บันทึกการเปลี่ยนแปลง เพื่อดำเนินการต่อ
จากนั้นไปที่ ProfilePress → Settings และคลิกที่แท็บ WooCommerce เพิ่มฟิลด์ที่กำหนดเองในกล่องเมตาของ ฟิลด์การลงทะเบียนที่จำเป็น และคลิกที่ปุ่ม บันทึกการเปลี่ยนแปลง เพื่อดำเนินการต่อ
ผู้ใช้จะสามารถดูฟิลด์ที่กำหนดเองได้ในหน้าลงทะเบียนการชำระเงินเมื่อชำระเงินจากร้านค้าออนไลน์ของคุณ
.
นอกจากนี้ เรายังต้องการแสดงแบบฟอร์มการเข้าสู่ระบบแบบกำหนดเองในหน้าชำระเงินและแทนที่แบบฟอร์มเริ่มต้น ในการดำเนินการนี้ เพียงไปที่ ProfilePress → Settings และคลิกที่แท็บ WooCommerce
เลือกแบบฟอร์มการเข้าสู่ระบบที่กำหนดเองโดยใช้เมนูแบบเลื่อนลงถัดจาก แบบฟอร์มการเข้าสู่ระบบ Checkout และคลิกปุ่ม บันทึก การเปลี่ยนแปลง เพื่อดำเนินการต่อ การดำเนินการนี้จะแทนที่แบบฟอร์มการเข้าสู่ระบบเริ่มต้นในหน้าชำระเงินของไซต์ WooCommerce ของคุณ
โบนัส: สร้างหน้า "บัญชีของฉัน" ที่กำหนดเองของ WooCommerce
หน้า "บัญชีของฉัน" ใน WooCommerce ช่วยให้ผู้เยี่ยมชมไซต์เข้าถึงบัญชีผู้ใช้ของตนได้โดยตรงจากส่วนหน้า
ProfilePress ช่วยให้คุณสร้างหน้า "บัญชีของฉัน" ของ WooCommerce ที่กำหนดเองได้อย่างสมบูรณ์ ซึ่งผู้ใช้สามารถดูบัญชีผู้ใช้ของตนได้อย่างง่ายดาย และแก้ไขได้ทั้งหมดจากหน้าเดียว ในการดำเนินการนี้ ให้ไปที่ Profile Press → Forms & Profiles และคลิกที่ปุ่ม Add New
ตั้งชื่อใหม่ให้กับฟอร์ม แก้ไขโปรไฟล์ ของคุณและเลือกเทมเพลตเพื่อเริ่มปรับแต่ง เราได้เลือกเทมเพลต พินนาเคิล แล้ว เมื่อคุณคลิกที่ปุ่ม เลือกเทมเพลตของคุณ ระบบจะนำคุณไปยังหน้า แก้ไขแบบฟอร์ม โดยอัตโนมัติ
คุณสามารถเพิ่มฟิลด์และปรับแต่งรูปลักษณ์ของแบบฟอร์มของคุณที่ส่วนหน้าของไซต์ WooCommerce ของคุณได้ เมื่อคุณปรับแต่งแบบฟอร์ม "บัญชีของฉัน" เสร็จแล้ว ให้คลิกปุ่ม บันทึกการเปลี่ยนแปลง เพื่อดำเนินการต่อ
ตอนนี้เราได้สร้างแบบฟอร์ม "บัญชีของฉัน" แล้ว เราจำเป็นต้องสร้างหน้า WordPress เพื่อให้สามารถแสดงบนเว็บไซต์ของคุณได้ ไปที่ หน้า → เพิ่มใหม่ และวางรหัสย่อ แก้ไขโปรไฟล์ คลิกปุ่ม เผยแพร่ เมื่อคุณทำเสร็จแล้ว
และด้านล่างคือตัวอย่างแบบฟอร์มแก้ไขโปรไฟล์ที่กำหนดเอง
หรือคุณสามารถข้ามขั้นตอนทั้งหมดและใช้รหัสย่อ ProfilePress My Account ในหน้าที่สร้างขึ้นด้านบนแทน
ผู้ใช้จะสามารถแก้ไขข้อมูลบัญชีของตนและคลิกที่ปุ่ม อัปเดตโปรไฟล์ เพื่อทำการเปลี่ยนแปลงบัญชีผู้ใช้ของตนได้โดยตรงจากส่วนหน้า หน้านี้จะทำหน้าที่เป็นหน้าบัญชีของฉันใหม่
คุณยังสามารถให้ผู้ใช้ดูคำสั่งซื้อ ดาวน์โหลด สมัครสมาชิก และเป็นสมาชิกได้โดยไปที่ ProfilePress → Settings คลิกที่แท็บ WooCommerce และเลือกแท็บที่จะแสดงบนการตั้งค่าแท็บบัญชีของฉัน
บทสรุป
การปรับแต่งแบบฟอร์มการเข้าสู่ระบบและการลงทะเบียน WooCommerce บนเว็บไซต์ของคุณเป็นวิธีที่ยอดเยี่ยมในการปรับปรุงประสบการณ์ของลูกค้าและกระตุ้นให้ผู้ใช้ลงทะเบียนกับคุณมากขึ้น
แม้ว่าโดยค่าเริ่มต้น WordPress จะมีฟังก์ชันการปรับแต่งที่จำกัดสำหรับหน้าเข้าสู่ระบบและการลงทะเบียน แต่คุณสามารถใช้ปลั๊กอินที่มีประสิทธิภาพ เช่น ProfilePress เพื่อสร้างหน้าที่กำหนดเองและปรับปรุงประสบการณ์ผู้ใช้ที่ร้านค้าออนไลน์ของคุณมอบให้
พร้อมที่จะปรับแต่งแบบฟอร์มการเข้าสู่ระบบและลงทะเบียนของ WooCommerce บนเว็บไซต์ของคุณแล้วหรือยัง? รับ ProfilePress วันนี้!