Trang Giỏ Hàng Và Thanh Toán – Tự Học Thiết Kế Web: Bài 38

Hôm nay, chúng ta cùng tìm hiểu về các tính năng và cách thiết lập trong trang giỏ hàng và trang thanh toán nhé. Về cơ bản, 2 trang này đều đã được thiết kế theo demo giao diện và không quá khác biệt với giao diện mặc định của woocommerce.

Trang giỏ hàng và thanh toán trên cùng 1 trang

Đây là cách làm thường thấy trong nhiều trang thương mại điện tử hiện nay. Nhầm mục đích rút ngắn được thời gian đặt hàng và đơn giản hóa quá trình lên đơn của khách hàng. Nếu bạn muốn làm điều này, thì rất đơn giản, bạn chỉ cần làm như sau:

Trang giỏ hàng và thanh toán

Ví dụ điển hình của một trang giỏ hàng kết hợp đặt hàng (Click xem ảnh lớn)

Tại trang quản trị WP > Trang > Vào trang đang được thiết lập làm trang giỏ hàng để chỉnh sửa. Tại đây, bạn hãy thêm cả 2 shortcode này vào  [woocommerce_cart]  và  [woocommerce_checkout]  . Còn nếu bạn đang trong giao diện Composer, bạn chỉ cần thêm cả 2 block woocommerce cartwoocommerce checkout vào cùng 1 trang là được.

Sau khi thêm vào cùng 1 trang, thì nút Tiến hành thanh toán trên trang giỏ hàng mặc định sẽ biến mất và  một số sự thay đổi để phù hợp. Việc còn lại bạn chỉ cần dùng CSS để trang trí lại.

Thiết lập trang giỏ hàng

Trang giỏ hàng và thanh toán sẽ được thiết lập bằng cách: Từ trang quản trị WP > woocommerce > Cài đặt > Nâng cao > Tại đây hãy chọn 1 trang bất kỳ để làm trang giỏ hàng tại mục Trang giỏ hàng nhé. Tương tự với trang thanh toán cũng vậy.

Trang giỏ hàng và thanh toán

Chọn các trang chức năng cho woocommerce (click xem ảnh lớn)

Thiết lập trang thanh toán và rút gọn form thanh toán

Tương tự với cách trên ta có thể thiết lập trang thanh toán. Nhưng nếu cả trang giỏ hàng và thanh toán được gom về cùng 1 trang thì phần thiết lập này có thể bỏ qua.

Rút gọn các form trong trang thanh toán

Mục này mặc định không có sẳn trên woocommerce ở các phiên bản hiện tại trở về trước. Sau này woocommerce có cập nhật không thì còn chưa rõ. Nhưng nếu không có sẵn bạn hãy cài thêm plugin Checkout fields Manager for woocommerce để hiển thị nhé.

Phần check out ta để mặc định như sau:

cách cài đặt cho woo

Vào checkout, phần đầu tiên giữ mặc định nhé (click xem ảnh lớn)

Phần billing ta thiết lập như sau:

Cột Request nếu bật sẽ bắt buộc khách phải nhập thông tin vào ô này. Cột label là tên của ô đó, chúng ta sử lại thành tiếng Việt cho khách nhập thông tin tương ứng nhé. Cột disable khi bật lên thì chúng ta sẽ bỏ ô đó, không cho nó hiển thị ra bên ngoài.

Nếu bạn muốn sửa thông tin của 1 ô thì bấm vào nút chỉnh sửa, thêm ô mới thì bấm vào thêm trường mới (Add new field).

 cài đặt trang thanh toán

Thiết lập các form (ô) ghi thông tin đặt hàng của khách (click xem ảnh lớn)

 cài đặt trang thanh toán

Thay đôi tên của form trong nút chỉnh sửa, chỉ thay đổi ô này thôi nhé (click xem ảnh lớn)

Phần shipping nếu bạn chỉnh sửa cũng tương tự phần Billing. Nhưng mình đơn giản hóa form nên mình tắt luôn tính năng này. Các mục còn lại chúng ta không cần thay đổi gì hết.

 cài đặt trang thanh toán

Shipping  thì vô hiệu hóa tất cả và các tab khác không cài đặt gì (click xem ảnh lớn)

Đây là hình ảnh của trang thanh toán sau khi chúng ta hoàn thành thiết lập, chú ý: Thông tin mình đã điền vào và đặt thử đơn bằng thông tin mình đã thêm trong ảnh dưới đây nhé:

 cài đặt trang thanh toán

Đặt 1 đơn hàng mẫu với các thông tin tự điền vào ở trang thanh toán (click xem ảnh lớn)

Tổng kết trang đặt hàng woocommerce

Trong phần nay, chủ yếu là cúng ta thiết lập trang giỏ hàng và thanh toán thông qua CSS. Còn việc rút gọn form đặt hàng thì mình có nói qua ở bài 31, hãy tùy biến theo ý mình ở 2 trang này nhé.

Chúc bạn thành công!