Hướng dẫn tạo giỏ hàng popup cho WooCommerce - WP Căn bản

Tạo giỏ hàng popup cho WooCommerce một cách đơn giản và chuyên nghiệp.

tao-gio-hang-popup-cho-woocommerce

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:

  • Thêm biểu tượng giỏ hàng vào menu WordPress
  • Vô hiệu hóa Cart Fragments của WooCommerce

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).

cai-dat-va-kich-hoat-plugin-woocommerce-added-to-cart-popup-ajax

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.

thiet-lap-plugin-woocommerce-added-to-cart-popup-ajax

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ả.

demo-gio-hang-popup-cho-woocommerce

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. :)

Tìm kiếm