Nếu bạn đang tìm kiếm một giải pháp dễ dàng để ẩn sản phẩm khi hết thời gian khuyến mãi trên website của mình, bài viết này là dành cho bạn! Tại MuaThemeWpGiaRe, chúng tôi cung cấp những theme WordPress tối ưu và dễ sử dụng. Hôm nay, mình sẽ chia sẻ một đoạn mã JavaScript đơn giản giúp bạn ẩn sản phẩm hết khuyến mãi khi thời gian đếm ngược (UX Countdown) kết thúc.
Cùng khám phá cách thực hiện ngay dưới đây để giúp website của bạn trở nên chuyên nghiệp hơn!
Bước 1: Thêm Đoạn Mã JavaScript Để Ẩn Sản Phẩm
Để ẩn sản phẩm khi hết thời gian khuyến mãi, bạn cần thêm đoạn mã JavaScript vào trang của mình. Đây là bước đầu tiên để triển khai UX Countdown và ẩn sản phẩm tự động khi chương trình khuyến mãi kết thúc.
Thêm mã sau vào phần <script> trên trang web của bạn:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <script> jQuery(document).ready(function ($) { $('.muathemewpgiare-thoigian .ux-timer').each(function() { var $this = $(this), finalDate = $(this).data('countdown'); // Thiết lập đếm ngược cho thời gian $this.countdown(finalDate); // Cập nhật thời gian đếm ngược khi có thay đổi $this.on('update.countdown', function(event) { $this.html(event.strftime('%H:%M:%S')); }); // Ẩn sản phẩm khi thời gian đếm ngược kết thúc $this.on('finish.countdown', function(event) { $this.closest('.muathemewpgiare-thoigian').hide(); }); }); }); </script> |
Với đoạn mã này, khi thời gian đếm ngược đạt đến 0, sản phẩm sẽ tự động bị ẩn khỏi trang web. Điều này giúp quản lý thời gian khuyến mãi dễ dàng hơn mà không cần can thiệp thủ công.
Giải Thích Về Đoạn Mã
- Thêm Đếm Ngược Thời Gian Khuyến Mãi: Đoạn mã này sẽ áp dụng tính năng UX Countdown cho các sản phẩm có class muathemewpgiare-thoigian, giúp khách hàng dễ dàng nhận diện thời gian còn lại của các chương trình khuyến mãi.
- Cập Nhật Thời Gian Đếm Ngược: Khi thời gian đếm ngược thay đổi, đoạn mã sẽ cập nhật và hiển thị theo định dạng giờ:phút:giây, giúp người dùng dễ dàng theo dõi.
- Ẩn Sản Phẩm Khi Hết Thời Gian Khuyến Mãi: Khi thời gian đếm ngược kết thúc, sản phẩm sẽ tự động bị ẩn khỏi trang web. Điều này giúp tránh tình trạng khách hàng có thể mua sản phẩm khi chương trình khuyến mãi đã kết thúc.
Cách Thêm Và Sử Dụng Đoạn Mã Trên Website
Cấu Hình Thời Gian Khuyến Mãi Cho Sản Phẩm:
- Mỗi sản phẩm cần có class
muathemewpgiare-thoigian
để áp dụng tính năng countdown. - Thêm thuộc tính data-countdown vào mỗi sản phẩm, chỉ định thời gian kết thúc khuyến mãi.
Lợi Ích Khi Sử Dụng Tính Năng Countdown Và Ẩn Sản Phẩm
- Quản Lý Khuyến Mãi Dễ Dàng: Việc sử dụng tính năng UX Countdown giúp bạn dễ dàng kiểm soát và theo dõi thời gian còn lại của các chương trình khuyến mãi mà không phải làm thủ công.
- Nâng Cao Trải Nghiệm Người Dùng: Tính năng ẩn sản phẩm khi hết khuyến mãi sẽ giúp người dùng không bị nhầm lẫn khi các sản phẩm không còn được khuyến mãi nữa, tạo sự chuyên nghiệp cho website.
- Tối Ưu SEO Website: Việc ẩn các sản phẩm không còn khuyến mãi giúp website của bạn trở nên gọn gàng hơn, giảm thiểu tình trạng khách hàng không tìm thấy thông tin đúng.
- Tăng Tính Tương Tác Và Chuyển Đổi: Khi khách hàng thấy sản phẩm còn lại thời gian khuyến mãi, họ sẽ có động lực mua ngay lập tức, giúp tăng tỷ lệ chuyển đổi trên website.
- Hướng Dẫn Tạo Trang Chức Năng Đổi Mật Khẩu Tùy Chỉnh Cho Thành Viên WordPress
- Cách Tính Phí Shipping Theo Các Mức Phần Trăm Trong WooCommerce
- Có Nên Sử Dụng Cloudflare Để Chống DDoS Cho Website Không?
- Hướng Dẫn Tùy Chỉnh Form Đăng Nhập và Đăng Ký WooCommerce Với SweetAlert2 (Không Cần Plugin)
- Hướng Dẫn Tự Động Cập Nhật SKU cho Sản Phẩm WooCommerce với Mã Tùy Chỉnh