Cách thêm điền gmail để mua hàng tại woocommerce

Bài viết này sẽ hướng dẫn cách tạo Form đặt hàng trong WordPress, sử dụng Caldera Forms Free.

Phù hợp cho một hoặc một vài sản phẩm. Với nhiều sản phẩm hơn, mời bạn đọc Phần 2 nhé :). Bạn có thể tạo bao nhiêu form, thì có thể xài cho bấy nhiêu sản phẩm.

Form sẽ gồm các thành phần. Form demo ở cuối bài viết.

• Tên sản phẩm & Đường dẫn sản phẩm
• Số lượng
• Mức giá
• Tên người mua
• Địa chỉ người mua
• Số điện thoại người mua
• Email người mua
• Hình thức thanh toán
• Ghi chú đơn hàng

Bắt đầu nhé

• 1. Tạo Form
• 2. Thiết lập tính toán giá
• 3. Thiết lập lời nhắn sau khi đặt hàng
• 4. Thiết lập Email nhận đơn hàng (Admin & Khách hàng)
• 5. Sửa lỗi Email
• 6. Form đặt hàng demo
• Chia sẻ

1. Tạo Form

Bạn cần tạo một form với các trường sau. À nhớ là cài đặt Plugin Caldera Form trước nhé!

Trường 1. Tên sản phẩm

• Field Type: Hidden
• Name: Tên sản phẩm
• Slug: ten_san_pham
• Value: {embed_post:post_title}

Trường 2. Đường dẫn sản phẩm

• Field Type: Hidden
• Name: Link sản phẩm
• Slug: link_san_pham
• Value: {embed_post:permalink}

Trường 3. Giá

• Field Type: HTML
• Name: Giá
• Slug: gia
• Content: điền vào, điền gì cũng được, nếu muốn in đậm thì chèn cặp thẻ và hai bên.

Trường 4. Số lượng sản phẩm

• Field Type: Number
• Name: Số lượng
• Slug: so_luong

Trường 5. Họ tên người mua

• Field Type: Single Line Text
• Name: Họ tên
• Slug: ho_ten

Trường 6. Số điện thoại

• Field Type: Phone Number (Basic)
• Name: Số điện thoại
• Slug: so_dien_thoai
• Style: chọn kiểu số điện thoại, có 3 kiểu đó, bạn thích kiểu gì cũng được 🙂

Trường 7. Email người mua

• Field Type: Email
• Name: Địa chỉ email
• Slug: email

Trường 7-2. Địa chỉ mua hàng

Mình viết thiếu, nên bổ sung vào đây. Bạn không cần để ý thứ tự các trường đâu.

• Field Type: Paragraph Textarea
• Name: Địa chỉ
• Slug: dia_chi
• Rows: 4

Trường 8. Hình thức thanh toán

• Field Type: Radio
• Name: Hình thức thanh toán
• Slug: hinh_thuc_thanh_toan
• Add Option: Chuyển khoản ngân hàng & Trả tiền tại cửa hàng

Trường 9. Ghi chú đơn hàng

• Field Type: Paragraph Textarea
• Name: Ghi chú đơn hàng
• Slug: ghi_chu
• Rows: điền vào 1 con số, cái này sẽ là chiều cao của hộp

Trường 10. Giá tổng

• Field Type: Calculation
• Name: Tổng giá
• Slug: tong_gia
• Hide Label: Đánh dấu
• Before: Tổng
• After:  đồng (có một dấu cách phía trước nhá)

Trường 10. Nút mua hàng

• Field Type: Button
• Name: Đặt mua
• Slug: dat_mua
• Type: Submit
• Class: btn btn-default hoặc btn btn-primary hoặc btn btn-success hoặc btn btn-warning hoặc btn btn-primary

Class là phần điền Bootstrap để đổi màu sắc của Nút. Thử từng cái để biết nó là màu gì, hoặc Google Bootstrap Button nhá 🙂

Rồi, Save Form và Preview, xem hình hài nó ra sao đã nhé.

Bạn sẽ thấy trường Tên sản phẩm & Link sản phẩm là bị ẩn. Bạn đặt Form ở bài viết sản phẩm nào, nó sẽ tự động lấy tên và đường dẫn sản phẩm đó và gửi về Email/Admin.

2. Thiết lập tính toán giá

Bước tiếp theo là ta cần thiết lập giá tự động thay đổi theo số lượng sản phẩm mà khách hàng lựa chọn.

Tạo thêm một trường Ẩn nữa

• Field Type: Hidden
• Name: Giá ẩn
• Slug: gia_an
• Value: gõ giá của sản phẩm, viết liền nhau, ví dụ 500 000 đồng thì gõ 500000

Ta quay lại Trường Tổng giá đã tạo ở Bước 1. Bấm vào Add Operator Group

Chọn Số lượng sản phẩm [so_luong] và bầm Add Line

Chọn dấu nhân (x) và Giá sản phẩm (Ẩn) [gia_san_pham_an]

Điều này nghĩa là Tổng giá = Số lượng sản phẩm x Giá sản phẩm

Đây là một phép tính đơn giản. Nếu bạn cần thêm phép tính khác thì bấm Add Line, chọn phép tính 🙂

Sau lưu lại Form và Preview, rồi điền thử coi sao nhé!

Khi chọn số lượng là 10. Tổng giá đã được cập nhật

3. Thiết lập lời nhắn sau khi đặt hàng

Tiếp là thiết lập thông báo sau khi khách hàng điền Form đặt hàng. Phần này bạn có thể để mặc định, hoặc là tùy chỉnh thêm một tí, nhìn chuyên nghiệp hơn.

Đây là lời nhắn sẽ xuất hiện sau khi khách hàng bấm nút Đặt mua. Nhìn rất tệ phải không? Hãy sửa lại nhé!

Sau khi sửa. Sử dụng %slug% (phía trên, mình đã ghi slug cho từng field rồi, bạn đọc lại để biết nhé :)). Thêm
vào cuối câu để xuống hàng.

Ví dụ: Cảm ơn bạn %ho_ten% đã đặt mua %so_luong_san_pham% sản phẩm với mức giá tổng là %tong_gia%.
Shop đã gửi mail thông tin đơn hàng qua %email% và sẽ gọi lại xác nhận qua %so_dien_thoai%.
Sau khi xác nhận và thanh toán. Shop sẽ gửi sản phẩm đến bạn theo địa chỉ %dia_chi%.

Và kết quả.

4. Thiết lập Email nhận đơn hàng (Admin & Khách hàng)

Tiếp theo chúng ta sẽ thiết lập email nhận đơn hàng. Bấm vào Email để thiết lập. Nhìn vào hình thứ 2 bên dưới, để biết các mục có ý nghĩa gì.

From Name, From Email: Tên sẽ xuất hiện ở đầu Email

Email Recipients: Đơn hàng sẽ gửi về email này. Nếu bạn muốn đơn hàng gửi về cho nhiều người, thì cũng điền vào Email Recipients, nhưng ngăn cách nhau bởi dấu phẩy, ví dụ: [email protected], [email protected], [email protected]

Bạn có thể điền %slug% với slug của trường email. Điền như thế, thông báo đơn hàng sẽ gửi về cả email chủ shop, và email của khách hàng.

Reply to Email: Khi đơn hàng gửi về email của bạn (chủ shop). Bạn có thể trả lời email đó, phần trả lời sẽ được gửi về EMAIL điền ở mục này. Bạn có thể để trống, hoặc điền email khách hàng, xài %slug% của trường email.

Để sửa nội dung đơn hàng, bạn xem ở Email Subject và Email Message.

{summary} nghĩa là sẽ gửi thông tin toàn bộ trường mà khách hàng đã điền, về email 🙂

5. Sửa lỗi Email

Nếu bạn không nhận được email, nhưng tất cả thiết lập ở trên đều đúng. Như vậy, khả năng lớn là do Hosting đã chặn hàm mail, nên bị lỗi.

Hãy hỏi bên bán hosting để biết điều này.

Trong trường hợp này, bạn cần kích hoạt SMTP SendGrid cho Caldera Forms. Caldera Forms đã tích hợp SendGrid, nên chỉ cần API Key, mà không cần cài plugin SMTP :)).

6. Form đặt hàng demo

[caldera_form id=”CF5c9e95a9eb70e”]

Vậy là xong bài viết tạo form đặt hàng đơn giản rồi. Form phù hợp cho web chỉ bán một sản phẩm, dịch vụ, hoặc một vài sản phẩm thôi.

Bởi vì nếu bạn có nhiều sản phẩm, bạn buộc phải tạo nhiều Form. Và điều này mình sẽ đưa ra phương án giải quyết trong Phần 2. Nhớ theo dõi blog nhé 😉