Việc hiển thị thông báo đã mua hàng ảo khách hàng đã mua sản phẩm có thể giúp thúc đẩy quyết định mua hàng của những khách hàng tiềm năng thông qua hiệu ứng khẩn cấp và khan hiếm. Thay vì dựa vào các plugin phức tạp, bạn hoàn toàn có thể tự tạo hiện thông báo mua hàng ảo bằng cách thêm một đoạn mã tùy chỉnh vào trang web WooCommerce của mình. Hướng dẫn dưới đây sẽ giúp bạn thực hiện điều đó mà không cần sử dụng plugin. Sau đây, mình sẽ hướng dẫn code chức năng hiển thị thông báo đã mua hàng ảo không dùng plugin một cách cực đơn giản nhé
![[Thủ thuật wordpress] code chức năng hiển thị thông báo mua hàng ảo không dùng plugin Hướng dẫn tạo hiện thông báo mua hàng ảo của những khách đã mua hàng giúp tăng sales không cần dùng plugin](https://muathemewpgiare.com/wp-content/uploads/2024/09/z5873926262266_459e7f374132ff4ff81c27cc3132cf4f.jpg)
1. Lợi ích thông báo đã mua hàng ảo
- Tăng sự tin tưởng: Khách hàng sẽ cảm thấy an tâm hơn khi thấy những người khác đã mua sản phẩm. Điều này tạo cảm giác đáng tin cậy cho cửa hàng của bạn.
- Tạo cảm giác khan hiếm: Các thông báo mua hàng liên tục giúp khách hàng tiềm năng cảm thấy sản phẩm đang được mua nhiều, thúc đẩy họ hành động nhanh chóng để không bỏ lỡ cơ hội.
- Tăng tương tác và doanh số: Những thông báo kiểu này tạo ra hiệu ứng đám đông, giúp tăng tỷ lệ chuyển đổi bằng cách khiến khách hàng tiềm năng cảm thấy họ nên mua hàng ngay lập tức.
2. Hướng dẫn tạo thông báo mua hàng không dùng plugin
Bước 1: Thêm đoạn code vào trang web của bạn
Để tạo thông báo mua hàng, bạn có thể thêm đoạn mã sau vào tệp functions.php
của theme đang sử dụng hoặc trong mục Custom JavaScript
nếu theme hỗ trợ.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | function popupleft(){ ?> <style> .popup-Muathemewpgiare{position:fixed;bottom:40px;left:17px;margin:0;z-index:999;top:auto !important}.popup-Muathemewpgiare .icon{position:relative;z-index:4;height:48px;width:48px;text-align:center;border-radius:50%;border:1px solid #ffffff;cursor:pointer;background:var(--maincolor);box-shadow:0 4px 8px rgba(0,0,0,0.15);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;animation:pulse 2s infinite;animation:pulse 2s infinite;cursor:pointer}.popup-Muathemewpgiare .icon svg{fill:#ffffff;width:20px;height:20px;transition:opacity 0.35s ease-in-out, -webkit-transform 0.35s ease-in-out;transition:opacity 0.35s ease-in-out, transform 0.35s ease-in-out;transition:opacity 0.35s ease-in-out, transform 0.35s ease-in-out, -webkit-transform 0.35s ease-in-out;animation:iconSkew 1s infinite ease-out;min-height:-webkit-fill-available}.popup-Muathemewpgiare .content{background:var(--maincolor);color:#fff;padding:20px 10px 30px;border-radius:10px;width:270px;position:absolute;bottom:27px;left:20px;box-shadow:0 4px 20px rgba(0,0,0,0.2);-webkit-transform-origin:100% bottom;transform-origin:0 bottom;transform:scale(0);-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transition:-webkit-transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);transition:transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);transition:transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1),-webkit-transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);-webkit-transition:transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1)}@media (max-width: 500px){.popup-Muathemewpgiare .content{width:250px}}.popup-Muathemewpgiare .content .title{font-size:18px;font-weight:700;margin-bottom:15px}.popup-Muathemewpgiare .content .close-popup-Muathemewpgiare{position:absolute;right:5px;top:5px;cursor:pointer}.popup-Muathemewpgiare .content .close-popup-Muathemewpgiare svg{width:15px;height:15px}.popup-Muathemewpgiare .content .close-popup-Muathemewpgiare svg path{fill:#fff}.popup-Muathemewpgiare .content ul{margin-bottom:20px}.popup-Muathemewpgiare .content ul li{margin-bottom:5px;font-size:13px}.popup-Muathemewpgiare .content ul li svg{margin-right:10px}.popup-Muathemewpgiare .content ul li svg path{fill:#fff}.popup-Muathemewpgiare .content ul li a{color:#fff}.popup-Muathemewpgiare .content ul li a:hover{opacity:0.6}.popup-Muathemewpgiare .content .ghichu{font-style:italic;font-size:13px}.popup-Muathemewpgiare.active .content{-ms-transition-delay:0.1s;-webkit-transition-delay:0.15s;transition-delay:0.1s;transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1)}@media (max-width: 991px){.popup-Muathemewpgiare{bottom:70px}.popup-Muathemewpgiare .icon{height:35px;width:35px}}@keyframes iconSkew{0%{transform:rotate(0deg) scale(1) skew(1deg)}10%{transform:rotate(-25deg) scale(1) skew(1deg)}20%{transform:rotate(25deg) scale(1) skew(1deg)}30%{transform:rotate(-25deg) scale(1) skew(1deg)}40%{transform:rotate(25deg) scale(1) skew(1deg)}50%{transform:rotate(0deg) scale(1) skew(1deg)}100%{transform:rotate(0deg) scale(1) skew(1deg)}} .jas-sale-pop{background:#fff;bottom:-100%;left:20px;right:20px;padding:10px 15px 10px 10px;box-shadow:0 0 20px rgba(0,0,0,0.1);border-radius:3px;opacity:0;visibility:hidden;transition:all 2s;z-index:99999;position:fixed;right:auto;overflow:hidden}@media (max-width: 480px){.jas-sale-pop{left:10px;right:10px;max-width:290px}.jas-sale-pop .jas-sale-pop-content{overflow:hidden;max-width:180px}}.jas-sale-pop a img{max-width:80px}@media (max-width: 321px){.jas-sale-pop{left:10px;right:10px;max-width:220px}.jas-sale-pop .jas-sale-pop-content{max-width:180px}}.jas-sale-pop .mr__20{margin-right:10px}.jas-sale-pop h4{color:#222;margin:0;font-size:14px;margin-bottom:0px}.jas-sale-pop h3{margin:0;font-size:13px;max-width:255px;line-height:20px;max-height:40px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-weight:300}.jas-sale-pop h3 a{color:#878787;margin:0;font-size:13px}.jas-sale-pop .jas-sale-pop-timeago{color:#878787;font-size:12px;font-weight:300}.jas-sale-pop .pe-7s-close{right:5px;top:5px;cursor:pointer;position:absolute;display:inline-block;width:10px;height:10px;background:url(//bizweb.dktcdn.net/100/497/938/themes/938102/assets/close.svg?1705916877287);background-repeat:no-repeat;background-size:cover;background-position:center}.jas-sale-pop.slideUp{bottom:20px;opacity:1;visibility:visible}.jas-sale-pop.middle-xs{-webkit-box-align:center;-ms-flex-align:center}.jas-sale-pop.flex{box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex}.jas-sale-pop.flex{z-index:1024;top:auto !important}@keyframes popup-fade-in-up{0%{opacity:0;transform:translateY(100px)}100%{opacity:1}} </style> <div class='jas-sale-pop flex pf middle-xs'></div> <script type="text/javascript"> jQuery(document).ready(function($) { let isloadIdex2 = 0; $(window).on('scroll mousemove touchstart',function(){ try{ if(!isloadIdex2){ isloadIdex2 = 1 $(document).ready(function ($) { nguyenlan_khach() }); function nguyenlan_Yates ( myArray ) { var i = myArray.length, j, temp; if ( i === 0 ) return false; while ( --i ) { j = Math.floor( Math.random() * ( i + 1 ) ); temp = myArray[i]; myArray[i] = myArray[j]; myArray[j] = temp; } } var collection = new Array(); <?php $sanpham = array( 'post_type' => 'product', 'posts_per_page' => 8, 'orderby' => 'rand' ); $query_ngaunhein = new WP_Query($sanpham); $i = 0; while ($query_ngaunhein->have_posts()) : $query_ngaunhein->the_post(); global $product; $product_link = get_permalink(); $product_title = get_the_title(); $product_image = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full')[0]; $product_image_html = "<img width='480' height='480' src='$product_image' alt='$product_title'/>"; $product_html = "<a href='$product_link' class='jas-sale-pop-img mr__20'>$product_image_html</a><div class='jas-sale-pop-content'><h4 class='fs__12 fwm mg__0 jas-sale-name'>Sản phẩm</h4><h3 class='mg__0 mt__5 mb__5 fs__18'><a href='$product_link' title='$product_title'>Đã đặt $product_title</a></h3><span class='fs__12 jas-sale-pop-timeago'></span></div><span class='pe-7s-close pa fs__20'></span>"; ?> collection[<?php echo $i; ?>] = "<?php echo addslashes($product_html); ?>"; <?php $i++; endwhile; wp_reset_postdata(); ?> nguyenlan_Yates(collection); function nguyenlan_khach() { if ($('.jas-sale-pop').length < 0) return; setInterval(function() { $('.jas-sale-pop').fadeIn(function() { $(this).removeClass('slideUp'); }).delay(10000).fadeIn(function() { var randomTime = ['1 phút', '5 phút', '10 phút', '12 phút', '14 phút', '16 phút', '18 phút', '20 phút', '25 phút', '30 phút', '36 phút', '38 phút', '40 phút', '42 phút', '45 phút', '50 phút', '1 giờ', '2 giờ', '3 giờ'], randomUser = ['Ngọc Anh - 0989313xxx', 'Nguyễn Dũng - 0346989xxx', 'Đỗ Linh - 0935672xxx', 'Mạnh Hiệp - 0500345xxx', 'Nguyễn An - 0346800xxx', 'Thu Thủy - 0345264xxx', 'Mỹ Linh - 0378505xxx', 'Hoàng Long - 0333878xxx', 'Quang Hải - 0911436xxx', 'Lê Vân - 0357004xxx', 'Vân Anh - 0775637xxx', 'Anh Tuấn - 0905398xxx', 'Tiến Trình - 0344667xxx', 'Hồng Vân - 0989391xxx', 'Trần Ngọc - 0392003xxx', 'Hữu Phước - 0935921xxx', 'Hữu Thọ - 0393335xxx'], randomTimeAgo = Math.floor(Math.random() * randomTime.length), randomTimeUser = Math.floor(Math.random() * randomUser.length), randomProduct = Math.floor(Math.random() * collection.length), randomShowP = collection[randomProduct], TimeUser = randomUser[randomTimeUser], TimeAgo = randomTime[randomTimeAgo]; $(".jas-sale-pop").html(randomShowP); $('.jas-sale-name').text(TimeUser); $('.jas-sale-pop-timeago').text(TimeAgo + ' trước'); $(this).addClass('slideUp'); $('.pe-7s-close').on('click', function() { $('.jas-sale-pop').remove(); }); }).delay(6000); }, 6000); } } }catch(e){ console.log(e); } }); }); </script> |
Bước 2: Tùy chỉnh CSS và JavaScript
- CSS: Trong đoạn mã trên, phần CSS giúp định dạng popup hiển thị và tạo các hiệu ứng chuyển động. Bạn có thể thay đổi kích thước, màu sắc và vị trí hiển thị để phù hợp với giao diện của trang web.
- JavaScript: Phần JavaScript sử dụng jQuery để xử lý sự kiện. Khi khách hàng cuộn hoặc di chuyển chuột, thông báo mua hàng sẽ xuất hiện. Bạn có thể điều chỉnh thời gian hiển thị (
delay
) và tần suất lặp lại (setInterval
) để phù hợp với nhu cầu.
Bước 3: Chạy đoạn mã trên trang web của bạn
- Thêm đoạn mã vào tệp
functions.php
hoặc nơi hỗ trợ nhúng JavaScript trong trang web của bạn. - Lưu thay đổi và kiểm tra trên trang chủ. Thông báo sẽ bắt đầu hiển thị khi khách hàng tương tác với trang.
Xem thêm:Hướng dẫn cách làm khung khuyến mãi giống muathemewp cực đẹp
Bước 4: Tùy chỉnh nội dung thông báo
Bạn có thể thay đổi phần nội dung hiển thị thông báo mua hàng, ví dụ như tên sản phẩm, thời gian đặt hàng, hoặc thông tin khách hàng bằng cách chỉnh sửa trực tiếp trong đoạn mã PHP hoặc JavaScript.
Không cần sử dụng các plugin nặng nề, bạn vẫn có thể tạo được thông báo mua hàng đơn giản nhưng hiệu quả trên trang web của mình. Đoạn mã trên sử dụng HTML, CSS, JavaScript và PHP để thực hiện việc hiển thị thông báo tự động, giúp tăng sự tin tưởng và thúc đẩy doanh số. Hãy thử tích hợp tính năng này vào trang web của bạn và quan sát sự thay đổi trong hành vi của khách hàng. Chúc bạn thành công trong việc tăng doanh số bán hàng trực tuyến!
- Hướng Dẫn Cách Ẩn Sản Phẩm Khi Hết Thời Gian Khuyến Mãi
- Website là gì? Lợi ích kinh doanh và các loại website phổ biến tại Việt Nam
- Tại Sao Nội Dung Ngắn Ngủi Đôi Khi Lại Hiệu Quả Hơn Nội Dung Dài?
- Nên chọn thiết kế website ở K-TECH và NINA không? Lý do tại vì sao?
- Hướng dẫn tích hợp mã QR Code thanh toán vào đơn hàng WooCommerce WordPress