Tạo giỏ hàng popup cho WooCommerce một cách đơn giản và chuyên nghiệp.
Nếu bạn đã từng một lần mua hàng trên Lazada, AliExpress hay một số trang thương mại điện tử khác… thì chắc hẳn bạn đã từng nhìn thấy khung popup tự động hiện ra mỗi lần thêm hàng vào giỏ rồi phải không nào? Nó không chỉ thông báo cho khách hàng biết sản phẩm mà họ muốn mua đã được thêm vào giỏ thành công mà còn cho phép họ có thể tùy chỉnh số lượng sản phẩm cũng như di chuyển nhanh đến trang thanh toán. Trong WordPress, các bạn cũng có thể làm điều này một cách dễ dàng nhờ sự trợ giúp của một plugin có tên là WooCommerce added to cart popup (Ajax).
Tham khảo thêm:
Tại sao bạn nên chọn WooCommerce added to cart popup (Ajax)?
- Phiên bản miễn phí sở hữu đầy đủ các tính năng tùy biến cơ bản.
- Dễ dàng cài đặt và sử dụng.
- Được hỗ trợ cập nhật thường xuyên.
Tạo giỏ hàng popup cho WooCommerce
1. Đầu tiên, các bạn cần phải cài đặt plugin WooCommerce added to cart popup (download).
2. Truy cập Added to cart popup từ menu chính trong WordPress Dashboard, các bạn sẽ thấy một số thiế lập như sau.
Trong đó:
- Enable on Mobile: kích hoạt tính năng giỏ hàng popup trên cả desktop lẫn mobile.
- Show product details: hiển thị tên, ảnh đại diện của sản phẩm và tính năng lựa chọn số lượng.
- +/- Qty Button: hiển thị nút tăng/ giảm số lượng sản phẩm.
- Update Quantity: cho phép cập nhật số lượng sản phẩm ngay trên khung popup.
- View Cart Button: hiển thị nút xem giỏ hàng.
- Checkout Button: hiển thị nút thanh toán.
- Show spinner icon: hiển thị icon quay tròn khi click vào nút Add to cart (thêm vào giỏ hàng).
- Reset cart form: reset số lượng sản phẩm và nút Add to cart về trạng thái mặc định sau khi bạn tắt khung popup giỏ hàng.
- PopUp Width: chiều rộng của khung popup.
- Image Width: chiều rộng của ảnh đại diện sản phẩm.
- Button Background Color: chọn màu nền cho các nút bấm.
- Button Text Color: chọn màu chữ cho các nút bấm.
- Button Font Size: chọn kích thước chữ cho các nút bấm.
- Button Border Radius: chọn mức độ bo góc cho các nút bấm.
- Item Border Size: chọn kích thước đường viền sản phẩm.
- Item Border Color: chọn màu cho đường viền sản phẩm.
Sau khi thiết lập xong, click vào nút Save Changes để lưu lại.
3. Xóa cache website (nếu có) và kiểm tra kết quả.
Thật tuyệt vời phải không nào? Chúc các bạn thành công!
Bạn biết phương pháp đơn giản và hiệu quả hơn giúp tích hợp giỏ hàng popup vào website WordPress? Đừng quên chia sẻ nó với chúng tôi bằng cách sử dụng khung bình luận ở bên dưới.
Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)
Mình dùng Woo từ lâu rồi.
Không biết tuỳ chọn biến thể màu sắc ở chỗ nào
Và kích hoạt biểu biệu popup Giỏ hàng mặc định woo ở chỗ nào nhỉ
WooCommerce không có pop-up giỏ hàng mặc định đâu bạn nhé. Cần phải cài thêm plugin. Còn plugin nào thì mình đã giới thiệu trong bài viết bên trên rồi. Đối với các biến thể của sản phẩm, bạn có thể cài thêm plugin Variation Swatches for WooCommerce.
Cho em hỏi một câu không liên quan đến chủ đề tí ạ. Là có làm cách nào để đưa trang chi tiết của một sản phẩm mặc định làm trang chủ của web không ạ. Tức là mặc định vào web thì trang chi tiết của sản phẩm ấy sẽ là trang hiển thị đầu tiên ạ. Em cảm ơn ạ.
Bạn thử tham khảo giải pháp ở đây xem sao nhé.
Đúng cái e cần rồi ạ. Em cảm ơn a ạ
Plugin này ko ngon lắm (nhiều js), xin giới thiệu 1 plugin khác ngon hơn là “WPC Added To Cart Notification for WooCommerce”
Web mình đang dùng, bác nào muốn tham khảo có thể xem tại quatdientico.com.
Mình vào web của bạn có thấy gì đâu nhỉ? Chỉ thấy thông báo đơn hàng đã được thêm vào giỏ. :)
Mình lược bỏ(trong cài đặt) hết mấy cái kia đi rồi, chỉ để thông báo đã thêm vào giỏ thôi. Làm như kiểu shopee ấy. Plugin bạn giới thiệu mình dùng 1 thời gian rồi, thấy nó ko tốt nên bỏ.
Nếu làm như bạn thì cài thêm plugin làm gì cho nặng và rắc rối nhỉ? Hầu như tất cả các theme lẫn WooCommerce đều có sẵn tính năng thông báo là sản phẩm đã được thêm vào giỏ hàng mà? :)
Cái thông báo mặc định nó quê quá, thông báo xong nó kéo màn hình lên đầu trang.
Hi bác. Bác chọn chế độ Notiny à. Em chỉ thấy nó hiện ở trên or dưới, chứ không ở giữa như bác. Bác có thể cho em xin hướng dẫn css của nó không bác.