Hướng Dẫn Thêm Thanh Tiến Trình Quà Tặng Vào WooCommerce Giỏ Hàng

31/10/2024
12 Phút đọc
361 Lượt xem
Đánh giá
5/5 - (101 bình chọn)

WooCommerce là một trong những plugin thương mại điện tử phổ biến nhất hiện nay, hỗ trợ mạnh mẽ cho các trang web bán hàng. Để thúc đẩy người dùng mua sắm nhiều hơn và đạt được giá trị đơn hàng cao hơn, bạn có thể thêm thanh tiến trình quà tặng trên trang giỏ hàng. Thanh tiến trình này sẽ hiển thị các mốc ưu đãi mà khách hàng có thể nhận được khi đạt đến một giá trị giỏ hàng nhất định. Bài viết này sẽ hướng dẫn bạn chi tiết cách thêm thanh tiến trình quà tặng vào trang giỏ hàng của WooCommerce.

Hướng Dẫn Thêm Thanh Tiến Trình Quà Tặng Vào WooCommerce Giỏ Hàng
Hướng Dẫn Thêm Thanh Tiến Trình Quà Tặng Vào WooCommerce Giỏ Hàng

Lợi Ích Khi Thêm Thanh Tiến Trình Quà Tặng Trên WooCommerce

Khi khách hàng thấy thanh tiến trình với các mốc quà tặng rõ ràng, họ sẽ cảm thấy động lực để mua thêm để đạt được những ưu đãi đặc biệt. Điều này không chỉ giúp tăng giá trị trung bình của đơn hàng, mà còn cải thiện tỷ lệ chuyển đổi cho trang web của bạn.

Bước 1: Tạo Mã PHP Cho Thanh Tiến Trình Quà Tặng

Dưới đây là đoạn mã PHP để thêm thanh tiến trình quà tặng vào trang giỏ hàng của WooCommerce. Hãy thêm mã này vào file functions.php trong theme của bạn.

Video hướng dẫn:

Mã PHP Mẫu

Vui lòng đăng nhập hoặc đăng ký tài khoản để xem nội dung này

Bước 2: Thêm JavaScript Để Cập Nhật Thanh Tiến Trình

Sau khi đã hiển thị thanh tiến trình và các mốc quà tặng bằng PHP, bạn sẽ cần JavaScript để cập nhật tiến trình theo thời gian thực mỗi khi người dùng thêm hoặc bớt sản phẩm khỏi giỏ hàng. Đoạn mã JavaScript này sẽ giúp cập nhật thanh tiến trình:

Vui lòng đăng nhập hoặc đăng ký tài khoản để xem nội dung này

Bước 3: Tạo AJAX Để Cập Nhật Tổng Giỏ Hàng

Để thanh tiến trình quà tặng hiển thị chính xác, bạn cần thêm một chức năng AJAX giúp cập nhật tổng giỏ hàng mỗi khi khách hàng thêm hoặc bớt sản phẩm trong giỏ. Bằng cách này, thanh tiến trình sẽ tự động thay đổi mà không cần tải lại trang.

Code AJAX Cập Nhật Tổng Giỏ Hàng

Thêm đoạn mã sau vào file functions.php của theme để tạo endpoint AJAX xử lý việc lấy tổng giỏ hàng:

Hướng Dẫn Chi Tiết Code với AJAX

  1. Liên Kết Hành Động AJAX:
    • add_action('wp_ajax_get_cart_total', 'get_cart_total'): Mã này kết nối AJAX cho khách đã đăng nhập, đảm bảo thông tin giỏ hàng được cập nhật chính xác và bảo mật.
    • add_action('wp_ajax_nopriv_get_cart_total', 'get_cart_total'): Tương tự, đoạn mã này cho phép khách chưa đăng nhập cũng có thể thấy cập nhật giỏ hàng trong thời gian thực.
  2. Hàm get_cart_total() Hoạt Động Ra Sao?
    • WC()->cart->subtotal: WooCommerce cung cấp tổng giá trị giỏ hàng với đoạn mã này – đơn giản và trực quan, chỉ cần gọi là có.
    • wp_send_json_success($cart_total): Đây là cách chúng ta gửi tổng giá trị giỏ hàng về dưới dạng JSON để JavaScript có thể nhanh chóng xử lý và hiển thị trên trang. Mọi thay đổi trong giỏ hàng đều được phản ánh ngay lập tức trên thanh tiến trình quà tặng!

Tận Dụng AJAX Để Thanh Tiến Trình Cập Nhật Trong JavaScript

Khi đoạn mã AJAX này được thêm vào file functions.php, mã JavaScript ở Bước 2 sẽ tự động được gọi mỗi khi giỏ hàng thay đổi. Việc này giúp thanh tiến trình của bạn luôn theo sát các cập nhật trong thời gian thực – khách hàng thêm hay xóa sản phẩm cũng không làm gián đoạn trải nghiệm của họ.

AJAX thực sự là một “trợ thủ đắc lực” ở đây vì nó đảm bảo mọi thứ đều diễn ra mượt mà mà không cần tải lại trang, giúp khách hàng có trải nghiệm mua sắm liền mạch hơn.

Một Số Cải Tiến Bạn Có Thể Thử Cho Thanh Tiến Trình Quà Tặng

Để thanh tiến trình của bạn không chỉ đẹp mắt mà còn thực sự thu hút người dùng, hãy thử một vài mẹo nhỏ sau nhé:

  • Tuỳ Chỉnh Mốc Quà Tặng: Điều chỉnh các mốc quà tặng để phù hợp với các dịp đặc biệt như ngày lễ, mùa mua sắm, hay các sự kiện bán hàng. Khách hàng sẽ luôn có cảm giác tươi mới mỗi khi ghé thăm trang giỏ hàng.
  • Thêm Hiệu Ứng Động: Hãy thử thêm các hiệu ứng khi thanh tiến trình di chuyển, hoặc khi khách đạt được mốc quà tặng. Những thay đổi về màu sắc hoặc hình ảnh sẽ làm khách hàng cảm thấy hào hứng hơn khi nhìn thấy thành quả mua sắm của mình.
  • Thông Báo Theo Thời Gian Thực: Hãy cân nhắc tạo thông báo dạng popup hoặc email khi khách đạt mốc quà tặng. Điều này sẽ giúp tạo niềm vui nhỏ cho khách hàng và là lý do để họ quay lại mua sắm trong tương lai.
  • Tối Ưu Trên Di Động: Đảm bảo thanh tiến trình hiển thị tốt trên mọi thiết bị, đặc biệt là di động. Phần lớn người dùng mua sắm qua điện thoại, nên việc tối ưu cho di động không chỉ giúp tăng trải nghiệm người dùng mà còn giúp giữ chân khách hàng lâu hơn.

Nếu bạn thích phiên bản khác, có thể tham khảo phiên bản của plugin68 iSures Increase Average Order Value tại đây: Xem tham khảo

iSures Increase Average Order Value
iSures Increase Average Order Value

Ghé Thăm Mẫu Theme WP Giá Rẻ Để Cập Nhật Nhiều Hơn

Nếu bạn yêu thích việc nâng cấp website WooCommerce và muốn học hỏi thêm nhiều thủ thuật tối ưu SEO hay cải thiện trải nghiệm người dùng Hãy theo dõi website MuathemeWPgiare của chúng tôi, Tại đây, bạn sẽ tìm thấy rất nhiều bài viết hướng dẫn chi tiết, mã nguồn tham khảo và những cập nhật mới nhất từ cộng đồng WooCommerce.

Trong tương lai, chúng tôi cũng sẽ phát triển phiên bản 2 với các tính năng nâng cao, cập nhật thêm nhiều tùy chỉnh đặc biệt cho thanh tiến trình quà tặng. Đây sẽ là nguồn tài nguyên cực kỳ hữu ích cho bạn trên hành trình tối ưu WooCommerce của mình! Cảm ơn các bạn đã đọc bài viết của mình nhé. Dưới đây là code hoàn chỉnh của V1, các bạn bỏ tất cả vào funtion.php để trải nghiệm nhé

Vui lòng đăng nhập hoặc đăng ký tài khoản để xem nội dung này

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

Để lại một bình luận