Việc hiển thị số lượng sản phẩm đã bán không chỉ giúp tăng độ tin cậy mà còn tạo động lực mua hàng cho khách hàng tiềm năng. Bài viết này sẽ hướng dẫn bạn cách thêm tính năng này vào trang sản phẩm và trang chủ của cửa hàng WooCommerce một cách chuyên nghiệp.
Lợi ích của việc hiển thị số lượng sản phẩm đã bán
Hiển thị số lượng sản phẩm đã bán mang lại nhiều lợi ích đáng kể. Đối với khách hàng, con số này giúp họ dễ dàng nhận biết mức độ phổ biến của sản phẩm. Một sản phẩm có số lượng bán cao thường được coi là đáng tin cậy và chất lượng.
Đối với doanh nghiệp, đây là một chiến lược marketing hiệu quả. Khi khách hàng nhìn thấy rằng một sản phẩm đã được mua nhiều lần, họ sẽ cảm thấy an tâm hơn khi đưa ra quyết định mua hàng. Điều này không chỉ giúp tăng doanh số mà còn cải thiện tỷ lệ chuyển đổi trên website của bạn.
Ngoài ra, việc hiển thị số lượng sản phẩm đã bán còn giúp tạo ra cảm giác khan hiếm, thúc đẩy khách hàng hành động nhanh chóng trước khi sản phẩm hết hàng.
Cách hoạt động của tính năng hiển thị số lượng sản phẩm đã bán
WooCommerce lưu trữ thông tin về số lượng sản phẩm đã bán trong cơ sở dữ liệu dưới dạng meta key total_sales. Mỗi khi một đơn hàng được hoàn thành, giá trị này sẽ tự động cập nhật.
Để hiển thị số lượng sản phẩm đã bán trên trang sản phẩm hoặc trang chủ, chúng ta cần sử dụng mã code PHP để truy xuất giá trị total_sales và hiển thị nó theo cách mong muốn.
Mã code để hiển thị số lượng sản phẩm đã bán
Dưới đây là các đoạn mã PHP cụ thể để hiển thị số lượng sản phẩm đã bán ở các vị trí khác nhau. Bạn có thể thêm mã này vào file functions.php của theme con hoặc sử dụng plugin như “Code Snippets”.
Hiển thị ở trang sản phẩm
Đoạn mã sau sẽ hiển thị số lượng sản phẩm đã bán trên trang chi tiết sản phẩm:
add_action('woocommerce_single_product_summary', 'wc_product_sold_count', 11);
function wc_product_sold_count() {
global $product;
$units_sold = get_post_meta($product->get_id(), 'total_sales', true);
echo '<p class="da-ban">' . sprintf(__('Đã bán: %s', 'woocommerce'), $units_sold) . '</p>';
}Khi áp dụng mã này, bạn sẽ thấy dòng chữ “Đã bán: [số lượng]” ngay bên dưới mô tả sản phẩm.
Hiển thị ở trang chủ
Đoạn mã sau sẽ hiển thị số lượng sản phẩm đã bán trên trang chủ hoặc trang danh sách sản phẩm:
add_action('woocommerce_after_shop_loop_item_title', 'wc_product_sold_count');
function wc_product_sold_count() {
global $product;
$units_sold = get_post_meta($product->get_id(), 'total_sales', true);
echo '<p class="da-ban">' . sprintf(__('Đã bán: %s', 'woocommerce'), $units_sold) . '</p>';
}Với mã này, số lượng sản phẩm đã bán sẽ xuất hiện bên dưới tiêu đề hoặc giá của từng sản phẩm trong danh sách.
Hiển thị ở cả trang sản phẩm và trang chủ
Nếu bạn muốn hiển thị số lượng sản phẩm đã bán ở cả trang sản phẩm và trang chủ, hãy sử dụng đoạn mã sau:
add_action('woocommerce_after_shop_loop_item_title', 'wc_product_sold_count');
add_action('woocommerce_single_product_summary', 'wc_product_sold_count', 11);
function wc_product_sold_count() {
global $product;
$units_sold = get_post_meta($product->get_id(), 'total_sales', true);
echo '<p class="da-ban">' . sprintf(__('Đã bán: %s', 'woocommerce'), $units_sold) . '</p>';
}Đoạn mã này kết hợp cả hai vị trí hiển thị, giúp bạn tiết kiệm thời gian và công sức.
Tùy chỉnh giao diện với CSS
Để đảm bảo số lượng sản phẩm đã bán hiển thị đẹp mắt, bạn có thể sử dụng đoạn CSS sau:
p.da-ban {
border-radius: 20px;
margin-bottom: 0;
text-align: center;
margin-top: 5px;
background-color: rgba(210,33,33,.4);
background-image: none;
margin-left: 10px;
margin-right: 10px;
position: relative;
height: 25px;
margin-bottom: 10px;
color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
}Đoạn mã này tạo ra một khung nền đỏ mờ với văn bản màu trắng, giúp nổi bật thông tin số lượng sản phẩm đã bán.
FAQs
Làm thế nào để thêm mã code vào WordPress?
Bạn có thể thêm mã code vào file functions.php của theme con hoặc sử dụng plugin “Code Snippets”.
Liệu mã code này có tương thích với tất cả các theme không?
Có, mã code này hoạt động tốt với hầu hết các theme sử dụng WooCommerce.
Tôi có cần sao lưu trước khi thêm mã code không?
Luôn sao lưu website trước khi thực hiện bất kỳ thay đổi nào để tránh rủi ro.
Tại sao số lượng sản phẩm đã bán không hiển thị?
Kiểm tra xem sản phẩm đã có đơn hàng hoàn thành chưa và đảm bảo mã code đã được thêm đúng cách.
Làm thế nào để thay đổi màu sắc của khung hiển thị số lượng bán?
Bạn có thể chỉnh sửa thuộc tính background-color trong CSS để thay đổi màu sắc.
Có thể hiển thị số lượng bán ở vị trí khác không?
Có, bạn có thể điều chỉnh hook trong mã PHP để thay đổi vị trí hiển thị.
Kết Luận
Hiển thị số lượng sản phẩm đã bán trong WooCommerce không chỉ là một cách để nâng cao giao diện mà còn giúp cải thiện hiệu suất kinh doanh. Với các đoạn mã code và hướng dẫn chi tiết trên, bạn hoàn toàn có thể tự mình thực hiện thay đổi này một cách dễ dàng. Hãy thử nghiệm và tận hưởng kết quả tuyệt vời mà nó mang lại!
