Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?

Trang đăng nhập WooC Commerce là đủ cho nhiều cửa hàng, nhưng nó thiếu kiểm soát thiết kế. Và chủ cửa hàng có thể muốn tùy chỉnh thông tin đăng nhập WooC Commerce để phù hợp hơn với thương hiệu của họ

Trong hướng dẫn này, chúng tôi giải thích các cách để , sau đó đi vào hướng dẫn dành cho khách hàng WooC Commerce của bạn

Cách tùy chỉnh trang đăng nhập #WooC Commerce 🛒💻

Nhấp để Tweet

Cách trang đăng nhập WooC Commerce hoạt động

Sau khi cài đặt WooC Commerce, plugin sẽ tự động tạo trang Tài khoản của tôi trên cửa hàng của bạn – đó là trang hiển thị nội dung bằng mã ngắn [woocommerce_my_account]

Trang Tài khoản của tôi là trang đăng nhập chính của khách hàng – bạn có thể đổi tên và thêm vào menu điều hướng

Khi khách hàng truy cập trang, họ sẽ thấy một biểu mẫu đơn giản để nhập tên người dùng và mật khẩu đăng nhập

Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?
Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?

Sau khi đăng nhập, họ sẽ thấy mô-đun Tài khoản của tôi để xem các đơn đặt hàng, tải xuống, địa chỉ, chi tiết tài khoản, v.v.

Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?
Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?

Tab Chi tiết tài khoản cho phép người dùng điều chỉnh thông tin đăng nhập của họ

Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?
Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?

Ngoài ra, bạn có thể thêm tiện ích Đăng nhập/đăng xuất vào bất kỳ khu vực nào được tiện ích hỗ trợ trên trang web của mình, chẳng hạn như ở thanh bên hoặc chân trang

Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?
Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?

Điều này trình bày các trường giống nhau để khách truy cập trang đăng nhập bằng tên người dùng/email và mật khẩu của họ

Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?
Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?

Làm cách nào để bạn tùy chỉnh các biểu mẫu đăng nhập WooC Commerce mặc định?

Nếu bạn muốn tùy chỉnh biểu mẫu đăng nhập WooC Commerce, bạn có một số tùy chọn

  1. Sử dụng một plugin thay thế hoàn toàn trang Tài khoản của tôi trong WooC Commerce. Các tùy chọn bao gồm Đăng ký người dùng, biểu mẫu đăng ký/đăng nhập người dùng từ WPForms, Cửa sổ bật lên đăng nhập/đăng ký và plugin Đăng ký người dùng Woosuite
  2. Cài đặt plugin cho phép bạn tùy chỉnh thêm trang Tài khoản của tôi hiện tại với các điểm cuối. Các plugin cho điều này bao gồm Tùy chỉnh tài khoản của tôi cho WooC Commerce và Trình chỉnh sửa trang tài khoản của tôi. YITH cũng có một
  3. Sử dụng trình tạo trang với tiện ích Tài khoản của tôi, sau đó thay thế hoàn toàn trang Tài khoản của tôi cũ bằng trang mới – Elementor có một trong những tiện ích này trong phiên bản Pro của nó. Bạn cũng có thể tìm kiếm các phong cách khác nhau với các tiện ích bổ sung của Elementor, chẳng hạn như Tiện ích tài khoản của tôi PowerPack WooC Commerce
  4. Thêm đoạn trích và móc nối vào các chức năng của trang web của bạn. tập tin php. thông tin chi tiết về người dùng. com có ​​một hướng dẫn để giúp với điều này. Chỉ xem xét phương pháp này nếu bạn muốn giữ trang Tài khoản của tôi mặc định (thay vì thay thế hoàn toàn) để thay đổi kiểu của nó. Chúng tôi không khuyến nghị điều này cho người dùng bình thường, vì nó phức tạp hơn và vẫn không cung cấp cho bạn nhiều quyền kiểm soát tùy chỉnh đối với thông tin đăng nhập WooC Commerce

Chúng tôi khuyến khích bạn khám phá tất cả các tùy chọn được liệt kê ở trên. Người dùng WordPress trung bình tốt nhất nên sử dụng plugin để thay thế trang Tài khoản của tôi mặc định hoặc để giữ trang đó và thực hiện một số tùy chỉnh. Trình tạo trang cũng hoạt động tốt

📌 Xin lưu ý rằng gần như mọi trình tạo trang và trình cắm đều yêu cầu đăng ký trả phí để tùy chỉnh thông tin đăng nhập WooC Commerce. Không có gì sai với điều đó, nhưng đối với hướng dẫn này, chúng tôi sẽ sử dụng plugin miễn phí khả thi duy nhất để tùy chỉnh thông tin đăng nhập

Cách tùy chỉnh đăng nhập khách hàng WooC Commerce

Plugin Cửa sổ bật lên đăng nhập/đăng ký cung cấp một cách miễn phí để tùy chỉnh thông tin đăng nhập của khách hàng WooC Commerce trên giao diện người dùng. Plugin cung cấp biểu mẫu nội tuyến và biểu mẫu bật lên để thêm vào bất kỳ khu vực nào trên trang web của bạn. Nó cũng có thể tự động thay thế biểu mẫu đăng nhập/đăng ký Tài khoản của tôi

Để bắt đầu quá trình, hãy cài đặt và kích hoạt plugin trên trang web WordPress của bạn

Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?
Cửa sổ bật lên đăng nhập/đăng ký (Biểu mẫu nội tuyến + Thương mại điện tử)

(các) tác giả. XootiX

Phiên bản hiện tại. 2. 3

Cập nhật lần cuối. Ngày 12 tháng 11 năm 2022

dễ đăng nhập-woocommerce. 2. 3. khóa kéo

96%Xếp hạng 30.000+Cài đặt 3. 0. 1Yêu cầu

1. Bật biểu mẫu đăng nhập/đăng ký WooC Commerce

Khi plugin hoạt động, bây giờ bạn sẽ thấy một tab trong bảng Quản trị WordPress có tên Cửa sổ bật lên Đăng nhập/Đăng ký. Nhấp vào đó để tiếp tục

Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?
Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?

Trong phần Chung, đảm bảo rằng bạn kiểm tra các tab sau

  • Bật đăng ký
  • Tự động đăng nhập người dùng khi đăng ký
  • Xử lý Đặt lại mật khẩu

Tất cả những thứ này thường được kích hoạt sau khi cài đặt plugin Cửa sổ bật lên Đăng nhập/Đăng ký, nhưng bạn nên kiểm tra kỹ. Có một số cài đặt khác trong khu vực này mà bạn cũng có thể muốn định cấu hình, chẳng hạn như chọn vai trò người dùng sau khi ai đó đăng ký hoặc thêm trang chuyển hướng đăng nhập

Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?
Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?

2. Thay thế biểu mẫu trang Tài khoản của tôi

Cuộn xuống phần Cài đặt WooC Commerce

Kích hoạt các cài đặt này nếu chúng chưa được bật

  • Thay thế mẫu tài khoản của tôi
  • Thay thế hình thức đăng nhập thanh toán

Điều này làm cho quá trình này dễ dàng hơn nhiều đối với bạn, vì plugin sẽ tự động hoán đổi biểu mẫu đăng ký/đăng nhập trang Tài khoản của tôi mặc định cho một biểu mẫu mới mà bạn có quyền kiểm soát. Điều tương tự cũng xảy ra với biểu mẫu đăng nhập thanh toán

Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?
Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?

3. Quản lý các trường biểu mẫu đăng ký / đăng nhập

Trong khi vẫn ở dưới tab Chung, hãy chuyển đến đầu trang. Nhấp vào liên kết Quản lý bên cạnh tùy chọn Trường đăng ký

Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?
Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?

Điều đó sẽ đưa bạn đến một khu vực để tùy chỉnh các biểu mẫu đăng nhập và đăng nhập WooC Commerce. Bạn có thể thêm các trường cho mật khẩu, tên người dùng, tên, v.v. Thậm chí còn có một trường điều khoản và điều kiện

Nhấp qua các trường ở phía bên trái. Khi bạn nhấp vào từng cái, bạn sẽ thấy cài đặt trường duy nhất

  1. Đánh dấu một trường Đang hoạt động nếu bạn muốn đưa nó vào biểu mẫu đăng nhập/đăng ký của mình
  2. Tùy chỉnh trường đăng nhập WooC Commerce bằng cách thay đổi những thứ như trình giữ chỗ, ký tự tối đa và tự động điền thông tin giao hàng và thanh toán WooC Commerce

Đảm bảo nhấp vào nút Lưu sau khi bạn hài lòng với các trường và cài đặt của chúng

Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?
Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?

4. Tùy chỉnh kiểu trang đăng nhập/đăng ký WooC Commerce

Chọn tab Cài đặt để mở các tùy chọn nâng cao hơn nhằm cách điệu và tùy chỉnh thông tin đăng nhập và đăng ký WooC Commerce

🗏 Trên trang này, bạn có thể

  • Hiển thị biểu tượng
  • Điều chỉnh kích thước biểu tượng
  • Thay đổi chiều rộng vùng chứa
  • Thay đổi màu nền biểu tượng và biểu tượng
  • Chọn màu viền
  • Đặt lề dưới cho tất cả các trường
  • Chọn màu nền cho các trường nhập liệu

Và tiếp tục cuộn xuống trên trang vì có một số công cụ khác để tùy chỉnh khu vực đăng nhập WooC Commerce

Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?
Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?

5. Kiểm tra kết quả trên frontend

Để xem kết quả của mình, bạn phải đăng xuất khỏi tài khoản quản trị của mình hoặc mở tab Ẩn danh. Sau đó, điều hướng đến trang Tài khoản của tôi cho cửa hàng WooC Commerce của bạn. Bạn sẽ thấy một biểu mẫu đăng nhập WooC Commerce mới, được tùy chỉnh với bất kỳ trường và kiểu nào bạn đã quyết định

Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?
Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?

Tab Đăng ký hoạt động như biểu mẫu đăng ký của bạn, với tất cả các trường bạn đã chọn. Ví dụ: trong hướng dẫn này, chúng tôi đã chọn yêu cầu khách hàng nhập họ và tên, email, mật khẩu và chấp nhận các điều khoản dịch vụ

Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?
Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?

6. Thêm biểu mẫu đăng nhập/đăng ký WooC Commerce ở bất kỳ đâu trên trang web của bạn

Nếu bạn muốn, plugin cũng cho phép bạn thêm biểu mẫu đăng nhập vào các phần khác của cửa hàng WooC Commerce của bạn

Quay lại Cửa sổ bật lên biểu mẫu đăng nhập/đăng ký > Cài đặt. Chọn tab Thông tin. Trang này trình bày chi tiết cách hiển thị biểu mẫu đăng nhập WooC Commerce bằng một số phương pháp

Bạn có thể

  1. Mở phiên bản bật lên của biểu mẫu đăng nhập/đăng ký từ menu, sử dụng liên kết, lớp hoặc bằng mã ngắn
  2. Sử dụng một mã ngắn để hiển thị phiên bản nội tuyến hoặc cửa sổ bật lên của biểu mẫu đăng nhập

Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?
Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?

Vì chúng tôi đã xem phiên bản nội tuyến của biểu mẫu đăng nhập WooC Commerce, hãy khám phá cách hiển thị biểu mẫu bật lên

Chuyển đến một trang, bài đăng hoặc khu vực tiện ích (bất kỳ nơi nào cung cấp trình chỉnh sửa nội dung) và thêm khối Shortcode. Dán mã ngắn biểu mẫu bật lên từ trang trước vào khối đó. Nhấp vào Cập nhật hoặc Xuất bản cho trang/bài đăng

⚠ Lưu ý. Nếu dùng Classic WordPress Editor thì dán shortcode đó vào Visual Editor để nó hoạt động

Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?
Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?

7. Xem kết quả trên frontend

Chuyển đến phiên bản giao diện người dùng của trang web của bạn – đặc biệt là khu vực nơi bạn có thể xem nơi bạn đã thêm mã ngắn đăng nhập đó vào một trang, bài đăng hoặc tiện ích. Đảm bảo rằng bạn đã đăng xuất khỏi tài khoản Quản trị viên của mình để có thể xem biểu mẫu

Bạn sẽ nhận thấy một liên kết Đăng nhập nếu làm việc với biểu mẫu bật lên. Biểu mẫu nội tuyến chỉ hiển thị toàn bộ biểu mẫu trên một trang

Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?
Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?

Sau khi nhấp vào liên kết đó, một phiên bản bật lên của biểu mẫu đăng nhập WooC Commerce sẽ xuất hiện để khách hàng đăng nhập vào tài khoản của họ. Nhấp vào tab Đăng ký sẽ hiển thị các trường bổ sung để khách hàng mới tạo tài khoản. Ngoài ra còn có các cài đặt để tùy chỉnh hình ảnh trên biểu mẫu để phù hợp hơn với thương hiệu của bạn

Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?
Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?

Cách thêm thông tin đăng nhập xã hội vào WooC Commerce

Một cách hiện đại hơn để tùy chỉnh khu vực đăng nhập WooC Commerce là thêm các nút đăng nhập xã hội. Những điều này giảm thiểu số lần nhập mà khách hàng phải hoàn thành, vì nó lấy thông tin hiện tại của họ từ những nơi như Facebook hoặc Twitter để tạo tài khoản trên trang web của bạn

Tương tự như tùy chỉnh trang đăng nhập WooC Commerce cơ bản, có hàng tá tùy chọn để kết hợp thông tin đăng nhập xã hội vào trang web WooC Commerce của bạn. Chẳng hạn, plugin Cửa sổ bật lên Đăng nhập/Đăng ký từ đầu bài viết này

Tuy nhiên, đối với cách đơn giản nhất, rẻ nhất để thêm các nút xã hội vào thông tin đăng nhập WooC Commerce của bạn, hãy cài đặt plugin Super Socializer miễn phí

Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?
Chia sẻ trên mạng xã hội, Đăng nhập trên mạng xã hội và Plugin Nhận xét trên mạng xã hội – Super Socializer

(các) tác giả. Máy sưởi đội

Phiên bản hiện tại. 7. 13. 46

Cập nhật lần cuối. Ngày 4 tháng 2 năm 2023

siêu xã hội hóa. khóa kéo

96%Xếp hạng 40.000+Cài đặt 2. 5. 0Yêu cầu

1. Kích hoạt tính năng đăng nhập mạng xã hội

Sau khi được kích hoạt, bạn sẽ tìm thấy tab Super Socializer trong menu Quản trị viên WordPress. Mở nó, sau đó chọn tùy chọn Đăng nhập xã hội

Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?
Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?

Chọn hộp để Kích hoạt đăng nhập xã hội – nó nằm trong phần Kiểm soát chính

Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?
Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?

2. Thiết lập mạng xã hội

Trong tab Cấu hình cơ bản, hãy kiểm tra các mạng xã hội mà bạn muốn đưa vào thông tin đăng nhập mạng xã hội. Đối với mỗi cái, bạn cũng cần dán vào Khóa/ID và Bí mật để kích hoạt chức năng đăng nhập

Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?
Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?

Thật không may, mọi mạng xã hội đều có những cách riêng để tìm ID, Khóa và Bí mật của nó. May mắn thay, có các biểu tượng dấu chấm hỏi màu đỏ mà bạn có thể nhấp vào để giải thích các bước tìm từng biểu tượng

Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?
Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?

Ví dụ: Facebook cho phép bạn nhanh chóng tạo một “Ứng dụng”, ứng dụng này cung cấp ID ứng dụng và Bí mật. Không cần biết bất cứ điều gì về sự phát triển của Ứng dụng Facebook – chỉ cần tạo ứng dụng (và không bao giờ xóa ứng dụng đó) để lấy ID và Bí mật

Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?
Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?

Đối với mỗi lần đăng nhập mạng xã hội bạn muốn, hãy dán lại ID/Khóa và Bí mật trên WordPress

Đảm bảo nhấp vào nút Lưu ở dưới cùng khi bạn hoàn tất

Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?
Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?

Bạn cũng có thể phải thêm một liên kết từ trang web của mình đến ứng dụng, nhưng nó phụ thuộc vào mạng xã hội – Facebook yêu cầu bước này

Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?
Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?

3. Kích hoạt đăng nhập xã hội cho các biểu mẫu WooC Commerce

Để bật các nút đăng nhập xã hội trong WooC Commerce, hãy chuyển đến tab Cấu hình nâng cao trong plugin Super Socializer

Có bốn hộp 📦 để kiểm tra (trừ khi bạn không muốn các nút mạng xã hội xuất hiện trên một số biểu mẫu đăng nhập nhất định)

  1. Kích hoạt trước Mẫu đăng nhập của khách hàng WooC Commerce
  2. Kích hoạt tại Biểu mẫu đăng nhập của khách hàng WooC Commerce
  3. Kích hoạt tại Biểu mẫu đăng ký khách hàng WooC Commerce
  4. Kích hoạt tại Trang thanh toán WooC Commerce

Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?
Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?

4. Kiểm tra chức năng đăng nhập xã hội WooC Commerce của bạn

Cuối cùng, đã đến lúc kiểm tra đăng nhập mạng xã hội trông như thế nào trên giao diện người dùng. Truy cập trang Tài khoản của tôi trong WooC Commerce – chúng tôi đã định cấu hình cài đặt cho các nút đăng nhập xã hội sẽ được thêm vào trang đó

Bây giờ bạn sẽ thấy mọi nút đăng nhập mạng xã hội mà bạn đã kích hoạt trước đó. Đối với hướng dẫn này, chúng tôi chỉ bật Facebook, nhưng có nhiều trang khác để lựa chọn. Và khi ai đó nhấp vào nút, họ có thể đăng ký hoặc đăng nhập vào trang web WooC Commerce của bạn bằng thông tin đăng nhập xã hội đã tạo trước đó của họ

Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?
Làm cách nào để thêm thông tin đăng nhập và đăng ký vào WooC Commerce?

⚠ Lưu ý. kiểu mặc định hoạt động tốt hơn với biểu mẫu đăng nhập WooC Commerce thông thường. Nếu bạn đã tùy chỉnh trang đăng nhập, bạn có thể cần thêm một số CSS tùy chỉnh để làm cho mọi thứ trông đẹp mắt

Các cách khác để tùy chỉnh đăng nhập WooC Commerce

Khả năng tùy chỉnh là vô tận 🎨 trang đăng nhập và đăng ký WooC Commerce, vì vậy bạn nên luôn ghi nhớ những gì có sẵn

cách tùy chỉnh trang đăng nhập #WooC Commerce 🛒💻

Nhấp để Tweet

👉 Dưới đây là các lựa chọn khác để xem xét

  • Tùy chỉnh khu vực đăng nhập quản trị viên (phụ trợ)
  • Thêm trường xác thực hai yếu tố vào trang đăng nhập của bạn
  • Đặt reCAPTCHA trên trang đăng nhập để tăng cường bảo mật
  • Bao gồm các hộp kiểm để khách hàng chọn tham gia danh sách email khi đăng ký
  • Triển khai biểu mẫu đăng nhập/đăng ký tại khu vực thanh toán
  • Bao gồm các biểu mẫu đăng nhập tiện ích trong tiêu đề, thanh bên hoặc chân trang của bạn
  • Xem xét đăng nhập không cần mật khẩu
  • Kích hoạt giới hạn số lần đăng nhập

Bạn vẫn còn bất kỳ câu hỏi nào về cách tùy chỉnh trang đăng nhập WooC Commerce?