วิธีปรับแต่งหน้าเข้าสู่ระบบ WooCommerce (3 วิธี)

เผยแพร่แล้ว: 2022-08-17


คุณต้องการปรับแต่งหน้าเข้าสู่ระบบลูกค้า WooCommerce ของคุณหรือไม่?

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

ในบทความนี้ เราจะแสดงวิธีสร้างหน้าเข้าสู่ระบบ WooCommerce ที่กำหนดเองอย่างสมบูรณ์ และแบ่งปันเคล็ดลับเกี่ยวกับวิธีการปรับแต่งหน้าเข้าสู่ระบบการชำระเงินด้วย

How to create a custom WooCommerce customer login page

เหตุใดจึงต้องสร้างหน้าเข้าสู่ระบบลูกค้า WooCommerce แบบกำหนดเอง

เมื่อลูกค้าเข้าสู่ระบบร้านค้า WooCommerce ของคุณ พวกเขาจะเห็นหน้าเข้าสู่ระบบ WordPress เริ่มต้นที่มีเฉพาะโลโก้ WordPress และการสร้างแบรนด์

Standard WordPress login screen example

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

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

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

ที่ถูกกล่าวว่า มาดูกันว่าคุณสามารถสร้างหน้าเข้าสู่ระบบลูกค้าที่กำหนดเองใน WooCommerce ได้อย่างไร

สร้างหน้าเข้าสู่ระบบ WooCommerce ที่กำหนดเองโดยสมบูรณ์โดยใช้ SeedProd

วิธีที่ดีที่สุดในการสร้างหน้าเข้าสู่ระบบลูกค้า WooCommerce แบบกำหนดเองคือการใช้ SeedProd เป็นหน้า Landing Page และตัวสร้างธีมของ WordPress ที่ดีที่สุดสำหรับ WordPress และใช้งานง่ายอย่างเหลือเชื่อ

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

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

ขั้นแรก คุณจะต้องติดตั้งและเปิดใช้งานปลั๊กอิน SeedProd หากคุณต้องการความช่วยเหลือ โปรดดูคำแนะนำในการติดตั้งปลั๊กอิน WordPress

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

SeedProd license key

ถัดไป คุณสามารถสร้างหน้าเข้าสู่ระบบที่กำหนดเองสำหรับร้านค้า WooCommerce ของคุณ

เพียงไปที่ SeedProd » Landing Pages จากแดชบอร์ด WordPress ของคุณและคลิกปุ่ม 'ตั้งค่าหน้าเข้าสู่ระบบ'

Select Login Page

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

ปลั๊กอินยังช่วยให้คุณสร้างหน้าเข้าสู่ระบบตั้งแต่เริ่มต้นโดยใช้เทมเพลตเปล่า

Choose a Template for Your SeedProd Login Page

เมื่อคุณเลือกเทมเพลต หน้าต่างป๊อปอัปจะเปิดขึ้น

ไปข้างหน้าและป้อนชื่อสำหรับเพจของคุณแล้วคลิกปุ่ม 'บันทึกและเริ่มแก้ไขเพจ'

Enter a Page Name and Page URL

ถัดไป คุณจะเห็นเครื่องมือสร้างเพจแบบลากและวาง

ขณะนี้คุณปรับแต่งหน้าเข้าสู่ระบบได้โดยเพิ่มบล็อกใหม่ลงในเทมเพลตจากเมนูด้านซ้ายมือ

SeedProd นำเสนอบล็อกมาตรฐาน เช่น พาดหัว ข้อความ รูปภาพ ปุ่ม และอื่นๆ

Customize your WooCommerce login page

นอกจากนั้น คุณสามารถเพิ่มบล็อกขั้นสูง เช่น ของแถม แบบฟอร์มติดต่อ ปุ่มแบ่งปันทางสังคม แบบฟอร์ม optin และอื่นๆ นอกจากนี้ยังมีบล็อกของ WooCommerce เช่น ผลิตภัณฑ์ล่าสุด ผลิตภัณฑ์เด่น และผลิตภัณฑ์ขายดีที่คุณสามารถเพิ่มลงในเทมเพลตหน้าเข้าสู่ระบบของคุณได้

เมื่อใช้บล็อกของ WooCommerce คุณสามารถแนะนำผลิตภัณฑ์ยอดนิยมของคุณและโปรโมตข้อเสนอส่วนลดเพื่อรับ Conversion ได้มากขึ้น

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

More customization options

เมื่อคุณปรับแต่งหน้าเข้าสู่ระบบ WooCommerce เสร็จแล้ว อย่าลืมคลิกปุ่ม 'บันทึก' ที่ด้านบน

หลังจากนั้น คุณสามารถไปที่แท็บ 'การตั้งค่าเพจ' และคลิกปุ่มสลับ 'สถานะเพจ' เพื่อเปลี่ยนจากฉบับร่างเป็นเผยแพร่ จากนั้น คุณสามารถดำเนินการต่อและคลิกปุ่ม 'บันทึก' และปิดตัวสร้างเพจ

SeedProd Page Settings

จากที่นี่ สิ่งที่เหลืออยู่คือการทำให้หน้าเข้าสู่ระบบ WooCommerce ที่กำหนดเองใหม่ของคุณแสดงขึ้นสำหรับผู้ใช้ ในการดำเนินการนี้ ไปที่ SeedProd » Landing Pages ในแดชบอร์ด WordPress ของคุณ

เพียงคลิกสวิตช์ภายใต้ 'หน้าเข้าสู่ระบบ' เพื่อให้เป็นสีเขียวและระบุว่า 'ใช้งานอยู่'

Make Your SeedProd Login Page Active

เมื่อเปิดใช้งานแล้ว หน้าเข้าสู่ระบบใหม่ของคุณจะปรากฏบนไซต์ของคุณ!

คุณสามารถเยี่ยมชมร้านค้าอีคอมเมิร์ซของคุณเพื่อดูการทำงานจริง

WooCommerce login page preview

ปรับแต่งแบบฟอร์มเข้าสู่ระบบลูกค้า WooCommerce โดยใช้ WPForms

คุณต้องการสร้างแบบฟอร์มการเข้าสู่ระบบที่ตรงกับธีมเว็บไซต์ของคุณและมีฟิลด์แบบฟอร์มเพิ่มเติมหรือไม่?

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

วิธีที่ดีที่สุดคือการใช้ WPForms มันคือเครื่องมือสร้างฟอร์ม WordPress ที่ดีที่สุดที่ใช้งานง่ายสำหรับผู้เริ่มต้น เว็บไซต์กว่า 5 ล้านแห่งใช้ WPForms เพื่อสร้างแบบฟอร์มที่ชาญฉลาดยิ่งขึ้น

คุณสามารถสร้างฟอร์มการเข้าสู่ระบบ WooCommerce ที่กำหนดเองและแสดงได้ทุกที่ในร้านค้าออนไลน์ของคุณ เช่น แถบด้านข้างหรือหน้าผลิตภัณฑ์

สำหรับบทช่วยสอนนี้ เราจะใช้แผน WPForms Pro เนื่องจากมีส่วนเสริมการลงทะเบียนผู้ใช้ คุณสามารถลองใช้ WPForms เวอร์ชันฟรีเพื่อเริ่มต้นได้

ขั้นแรก คุณจะต้องติดตั้งและเปิดใช้งานปลั๊กอิน WPForms หากคุณต้องการความช่วยเหลือ โปรดดูคำแนะนำในการติดตั้งปลั๊กอิน WordPress

เมื่อเปิดใช้งาน คุณสามารถไปที่ WPForms » การตั้งค่า จากแดชบอร์ด WordPress ของคุณและป้อนรหัสใบอนุญาต คุณสามารถค้นหารหัสใบอนุญาตได้ในพื้นที่บัญชี WPForms

Enter Your WPForms License Key

ถัดไป คุณจะต้องตรงไปที่ WPForms » Addons ในแผงการดูแลระบบ WordPress

หลังจากนั้น เลื่อนลงไปที่ 'ส่วนเสริมการลงทะเบียนผู้ใช้' จากนั้นคลิกปุ่ม 'ติดตั้งส่วนเสริม'

Install WPForms User Registration Addon

ตอนนี้ คุณพร้อมที่จะสร้างแบบฟอร์มการเข้าสู่ระบบแบบกำหนดเองสำหรับ WooCommerce แล้ว เพียงไปที่ WPForms » เพิ่มใหม่ เพื่อเปิดตัวสร้างแบบฟอร์ม

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

Select the WPForms User Login Form Template

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

ตัวอย่างเช่น คุณสามารถเพิ่มฟิลด์ขั้นสูง เช่น หมายเลขโทรศัพท์ โดยลากจากเมนูทางด้านซ้ายของคุณและวางลงในเทมเพลต

WPForms Form Builder

คุณสามารถปรับแต่งแต่ละฟิลด์ของแบบฟอร์มเพิ่มเติมในเทมเพลตได้ เพียงคลิกที่ฟิลด์ใดๆ และแก้ไขป้ายกำกับ เพิ่มคำอธิบาย และทำให้เป็นฟิลด์ที่จำเป็นในแบบฟอร์ม

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

Customizing the WPForms Button Text

ถัดไป คุณสามารถไปที่แท็บ 'การยืนยัน' เพื่อเปลี่ยนแปลงสิ่งที่จะเกิดขึ้นเมื่อผู้ใช้เข้าสู่ระบบสำเร็จ

เพียงคลิกเมนูแบบเลื่อนลง 'ประเภทการยืนยัน' แล้วเลือกตัวเลือก คุณสามารถแสดงข้อความ แสดงหน้า หรือเปลี่ยนเส้นทางลูกค้าไปยัง URL เฉพาะได้

ตัวอย่างเช่น คุณสามารถเพิ่มแบบฟอร์มการเข้าสู่ระบบ WooCommerce ของคุณบนหน้าผลิตภัณฑ์ และอนุญาตให้ลูกค้าลงชื่อเข้าใช้เพื่อซื้อผลิตภัณฑ์ของคุณได้อย่างรวดเร็ว

Edit confirmation settings in WPForms

เมื่อเสร็จแล้ว เพียงคลิกปุ่ม 'บันทึก' ที่ด้านบน

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

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

Embed a form in page

ให้เลือกตัวเลือก 'สร้างหน้าใหม่' สำหรับตอนนี้

ถัดไป คุณจะต้องป้อนชื่อสำหรับเพจของคุณและคลิก 'ไปกันเถอะ!' ปุ่ม.

Enter a name for new login page

หลังจากนั้น คุณจะเห็นแบบฟอร์มการเข้าสู่ระบบ WPForms ในพื้นที่เนื้อหาของ WordPress

ตอนนี้คุณสามารถดูตัวอย่างแบบฟอร์ม เผยแพร่หน้าใหม่ และแสดงข้อมูลเข้าสู่ระบบ WooCommerce ที่กำหนดเองสำหรับลูกค้าของคุณ

WooCommerce login page preview using WPForms

ในทางกลับกัน คุณสามารถเพิ่มฟอร์มเข้าสู่ระบบ WooCommerce ของคุณไปที่แถบด้านข้างของร้านค้าได้ ด้วยวิธีนี้ แบบฟอร์มของคุณจะปรากฏในทุกหน้าผลิตภัณฑ์และช่วยให้ลูกค้าลงชื่อเข้าใช้ได้อย่างรวดเร็ว

เพียงไปที่ Appearance » Widgets จากแดชบอร์ด WordPress ของคุณ จากนั้นคลิกปุ่ม '+' และเพิ่มบล็อกวิดเจ็ต WPForms

หลังจากนั้น คุณสามารถเลือกแบบฟอร์มการเข้าสู่ระบบจากเมนูแบบเลื่อนลงและป้อนชื่อ

Add your login form in the sidebar

เมื่อเสร็จแล้ว ให้คลิกปุ่ม 'อัปเดต'

ตอนนี้คุณสามารถเยี่ยมชมร้านค้าออนไลน์ของคุณเพื่อดูแบบฟอร์มการเข้าสู่ระบบในแถบด้านข้าง

Login form in sidebar preview

สำหรับวิธีเพิ่มเติมในการสร้างหน้าเข้าสู่ระบบลูกค้า WooCommerce ที่กำหนดเอง คุณอาจต้องการดูคำแนะนำของเราเกี่ยวกับวิธีสร้างหน้าเข้าสู่ระบบ WordPress ที่กำหนดเอง

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

โบนัส: ปรับแต่งหน้าเข้าสู่ระบบการชำระเงิน WooCommerce

WooCommerce อนุญาตให้ผู้เยี่ยมชมที่กลับมาเข้าสู่ระบบระหว่างหน้าชำระเงิน หากคุณต้องการปรับแต่งหน้าเข้าสู่ระบบการชำระเงินของ WooCommerce วิธีที่ดีที่สุดคือการใช้ปลั๊กอินตัวสร้างช่องทางที่มีประสิทธิภาพ เช่น WooFunnels

WooFunnels ให้คุณปรับแต่งหน้าการชำระเงิน WooCommerce เพิ่มการชำระเงินแบบหลายขั้นตอน เพิ่มยอดขายในคลิกเดียว และอีกมากมาย

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

WooFunnels Checkout Example

คุณมีตัวเลือกในการทดสอบ A/B ในหลายช่องทาง หน้าการขาย และข้อเสนอการเพิ่มยอดขาย

WooFunnels ให้การวิเคราะห์โดยละเอียดเกี่ยวกับแต่ละขั้นตอนของช่องทาง WooCommerce ของคุณ

WooFunnels A/B Testing for WooCommerce

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

Autonami Email Library for WooCommerce

หากคุณจริงจังกับการขยายร้านค้า WooCommerce นี่เป็นหนึ่งในเครื่องมือที่ต้องมีที่เราแนะนำ

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

หากคุณชอบบทความนี้ โปรดสมัครรับข้อมูลจากบทแนะนำวิดีโอ YouTube Channel สำหรับ WordPress คุณสามารถหาเราได้ที่ Twitter และ Facebook