Khi phát triển trang thương mại điện tử với Woocommerce trên nền tảng WordPress, ngoài việc cung cấp đầy đủ thông tin sản phẩm như giá bán, mô tả, thông số kỹ thuật, thì việc hiển thị số lượng hàng đã bán cũng góp phần tạo sự tin tưởng và thúc đẩy khách hàng chốt đơn nhanh chóng.
Trong bài viết này, mình sẽ hướng dẫn các bạn cách fake số lượng hàng đã bán trong Woocommerce mà không cần cài đặt bất kỳ plugin nào, giúp website của bạn trông hấp dẫn hơn và tăng tỷ lệ chuyển đổi.
Hướng Dẫn Code Fake Số Lượng Đã Bán Trong Woocommerce
Gần đây, mình nhận được nhiều yêu cầu từ các bạn yêu cầu hướng dẫn thêm tính năng hiển thị số lượng hàng đã bán cho sản phẩm trên website. Vì vậy, mình quyết định chia sẻ một đoạn code đơn giản để các bạn có thể dễ dàng tích hợp vào website của mình. Điều đặc biệt là bạn không cần phải cài thêm plugin, chỉ cần thêm đoạn mã dưới đây vào file functions.php
của theme đang sử dụng.
Code Fake Số Lượng Hàng Đã Bán
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function muathemewpgiare_show_soluongban(){; ?> <div class="muathemewpgiare_fake_slb"> <span class="muathemewpgiare_icon"> <svg height="20px" width="20px" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#f79009"> <g id="SVGRepo_iconCarrier"> <polygon class="st0" points="386.415,193.208 287.481,193.208 359.434,0 161.566,0 125.585,280.151 206.528,280.151 170.557,512 "></polygon> </g> </svg> </span> <span class="muathemewpgiare_text">Sản phẩm đang được chú ý, </span> có <?php echo(rand(10,100)); ?> người thêm vào giỏ hàng & <?php echo(rand(10,100)); ?> người đang xem </div> <?php } add_action('woocommerce_single_product_summary', 'muathemewpgiare_show_soluongban', 99); |
Giải Thích Mã Code Trên
- <?php echo(rand(10,100)); ?>: Đoạn mã này sử dụng hàm rand() để tạo một giá trị ngẫu nhiên trong khoảng từ 10 đến 100. Điều này giúp số lượng bán và số người đang xem thay đổi mỗi lần tải lại trang (bạn có thể tùy chỉnh giá trị min và max theo ý muốn).
- Action Hook: Mã sử dụng add_action() để thêm đoạn code vào trang sản phẩm của Woocommerce, đảm bảo rằng thông tin hiển thị sau thông tin sản phẩm.
- Thẻ SVG: Làm cho biểu tượng hiển thị đẹp mắt và dễ nhìn.
Xem thêm một số thủ thuật wordpress: Thủ thuật wordpress
CSS Tùy Chỉnh Đi Kèm
Để phần hiển thị trở nên thẩm mỹ và dễ nhìn, bạn có thể thêm CSS sau vào mục Tuỳ biến → CSS nâng cao trong WordPress:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* CSS cho phần fake số lượng bán hàng */ .muathemewpgiare_fake_slb { padding-top: 16px; border-top: 1px solid rgb(228, 232, 237); } .muathemewpgiare_text { font-size: 14px; line-height: 20px; font-weight: 600; color: #dc6803; } .muathemewpgiare_icon { display: inline-block; vertical-align: -0.5em; } /* Hiệu ứng hover cho icon */ .muathemewpgiare_fake_slb:hover { background-color: #f8f8f8; } |
Lợi Ích Khi Sử Dụng Code Fake Số Lượng Bán
- Tăng tính hấp dẫn: Khi khách hàng thấy sản phẩm có nhiều người thêm vào giỏ hàng hoặc đang xem, họ sẽ cảm thấy sản phẩm đó hot và có xu hướng mua ngay.
- Không cần plugin: Không cần cài đặt thêm plugin nào, giúp website của bạn nhẹ nhàng và nhanh chóng.
- Tùy chỉnh dễ dàng: Bạn có thể thay đổi số lượng bán theo ý thích và tùy chỉnh giao diện cho phù hợp với phong cách của website.
Kết Luận
Việc sử dụng code fake số lượng bán hàng trong Woocommerce là một cách tuyệt vời để tạo sự khẩn trương và kích thích khách hàng mua hàng nhanh chóng. Đây là một thủ thuật nhỏ nhưng hiệu quả, giúp website của bạn nổi bật hơn so với đối thủ và tăng tỷ lệ chuyển đổi.
Nếu bạn chưa thử, hãy làm theo hướng dẫn trên và tích hợp ngay vào website của mình! Hẹn gặp lại trong các bài viết sau.
- Cách Thiết Kế Website Bán Hàng Đạt Hiệu Quả Cao
- Sharecode bắt buộc xác minh tài khoản người dùng qua OTP gmail miễn phí
- Nên chọn thiết kế website ở K-TECH và NINA không? Lý do tại vì sao?
- Cách Sửa Lỗi Vỡ Giao Diện Sau Cập Nhật WordPress 6.7
- #1 Cách ẩn nút Thêm vào giỏ hàng hoặc Giá trong WooCommerce