Bạn xây dựng một website thương mại điện tử để bán hàng và bạn “mong muốn” các sản phẩm của mình có số lượng sản phẩm đã bán ở mức cao để kích thích người xem mua hàng. Đây chắc chắn là một thủ thuật website mà bạn không thể bỏ qua.
Bằng vài đoạn code đơn giản bạn sẽ cụ thể hóa được “ý đồ” bán hàng của mình một cách nhanh chóng. Hãy cùng nhau tìm hiểu nhé!
Bài viết thuộc Series Tự Học Làm Website của Nghiện Tin Học.
Can Thiệp File Function.php Của Theme Mà Bạn Đang Sử Dụng
Việc này tương đối đơn giản nhưng mình vẫn khuyên các bạn tập sử dụng Child Theme để không phải gặp các vấn đề đau đầu về sau.
Để can thiệp file function.php của theme, bạn hãy vào WP Admin > Giao diện > Sửa (Giao Diện) hay Theme File Editor. Các dòng code được đưa vào đây sẽ phía sau <?php, và chúng ta nên để nó ở cuối cùng của file để có thể phân biệt với các dòng code gốc.
Hiện Thị Số Lượng Sản Phẩm Đã Bán Trong Trang Sản Phẩm
Thêm các đoạn code bên dưới đây vào cuối file function.php của theme hiện tại sẽ giúp cho bạn hiện thị số lượng sản phẩm đã bán trong trang 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>';
}Hiện Thị Số Lượng Sản Phẩm Đã Bán Trong Trang Chủ
Thêm các đoạn code bên dưới đây vào cuối file function.php của theme hiện tại sẽ giúp cho bạn hiện thị số lượng sản phẩm đã bán trong trang chủ.
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>';
}Kết Hợp Cả 2 Cách Bên Trên
Nếu bạn muốn liên kết cả 2 đoạn code bên trên lại để số lượng sản phẩm bán ra có thể vừa hiện thị ở trang chủ và cả trang sản phẩm. Thì hãy thêm các dòng code bên dưới đây vào cuối file function.php.
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>';
}Trang Trí Cho Đẹp Với CSS
Sau khi tất cả đã hiển thị đầy đủ trên website, và bạn muốn phần số lượng sản phẩm đã bán trông đẹp hơn. Các dòng code CSS ngay bên dưới đây sẽ giúp bạn làm việc đó một cách hoàn hảo.
Bạn có thể thêm các đoạn code này vào phần Custom CSS hay CSS Bổ Sung bên trong phần quản lý theme mà các bạn đang dùng.
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;
}Các thông số bên trên các bạn có thể hoàn toàn tùy chỉnh cho vừa ý của mình. Có 4 thông số sẽ giúp cho bạn có thể tinh chỉnh phần hiển thị này để nó chuẩn màu với màu sắc bạn đang dùng trên website
- border-radius: giúp bạn tạo ra các đường bo tròn cho background chứa số lượng sản phẩm bán ra. Số càng bé thì góc bo càng nhọn.
- text-align: sẽ có 3 tùy chọn là left, center, right để bạn canh vị trí của dòng chữ.
- background-color: sẽ giúp bạn tùy chỉnh màu nền cho background nhằm giúp nó hoàn hảo hơn với màu sắc mà website bạn đang dùng.
- color: chính là màu chữ văn bản hiển thị.
Tại Sao Lại “Bùa Phép” Số Lượng Sản Phẩm Đã Bán?
Một điều mà bất kỳ khách hàng nào cũng quan tâm tới chắc chắn là sản phẩm đó đã có bao nhiêu người mua. Một sản phẩm chỉ mới bán ra 10 lần thì liệu khách hàng có tin tưởng để mua hay không? So với việc một sản phẩm đã bán ra hơn 1000 lần.
Và đây chính là lúc các bạn sẽ phải “bùa phép” để có được sự tin tưởng từ phía khách hàng. Đây cũng được xem là một trong những kỹ thuật seeding trên các sản thương mại điện tử như Shopee và Lazada.
Bên trên là hướng dẫn chi tiết nhất cách Code Hiển Thị Số Lượng Sản Phẩm Đã Bán Trong Woocommerce, chỉ cần một vài đoạn code nhỏ để biến tấu Woocommerce và làm cho nó “hấp dẫn” hơn trong mắt khách hàng.
Chúc các bạn thành công trên con đường làm website bán hàng cho chính mình.
MADE BY NGHIỆN TIN HỌC
