Hiển thị số lượng sản phẩm đã bán khi dùng Woocommerce

Woocommerce hiện tại là plugin miễn phí giúp tạo website bán hàng trên WordPress rất phổ biến. Ở bài viết này mình sẽ hướng dẫn các bạn hiển thị số lượng sản phẩm đã bán khi dùng Woocommerce.

Có 2 cách đó là dùng code và hook vào các vị trí cần hiển thị và cách thứ 2 là dùng plugins. Vào việc nào:

Cách 1: Sử dụng hook để hiển thị

Đăng nhập Admin Dashboard của website
Mở file functions.php của theme ( Thường là Giao diện – Sửa giao diện – functions.php )
Lựa chọn các đoạn code mà bạn cần ở bên dưới và dán vào cuối file functions.php

Hiển thị ở trang danh mục sản phẩm thì dùng code sau:

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>';
}

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 '' . sprintf( __( 'Đã bán: %s', 'woocommerce' ), $units_sold ) . '';

}

Nếu hiện ở trang chủ thì dùng code sau:

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>';
}

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 '' . sprintf( __( 'Đã bán: %s', 'woocommerce' ), $units_sold ) . '';

}

Muốn hiện cả ở trang chủ và trang danh mục sản phẩm thì dùng code 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>';
}

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 '' . sprintf( __( 'Đã bán: %s', 'woocommerce' ), $units_sold ) . '';

}

Note: Chỉ là thêm hook và 2 vị trí thôi nhé, yên tâm

Giờ CSS lại cho nó đẹp hơn nhé:

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;
}

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;

}

Note: Class “da-ban” các bạn có thể thay đổi tuỳ thích theo đoạn code trong file functions nhé.

Oke rồi, giờ F5 lại web và tận hưởng thành quả.

Cách 2: Sử dụng Plugins

Nếu bạn không thích việc dùng code của mình, bạn có thể sử dụng plugin để hiển thị số lượng sản phẩm đã bán. Trong bài viết này, mình khuyến nghị bạn sử dụng plugin WPB Show Product Sales Number for WooCommerce của wpbean.

Cài đặt Plugins:

Đăng nhập vào Admin Dashboard, mục Plugins bấm vào Add new và tìm kiếm Plugins có tên: WPB Show Product Sales Number for WooCommerce, cài đặt và kích hoạt nó. Hoặc bạn cũng có thể tải về Plugins tạ đây “WPB Show Product Sales Number for WooCommerce” và cài đặt thủ công.

Cấu hình Plugins

Khi plugin được kích hoạt, bạn hãy đi tới Cài đặt > Woocommerce Show Sales từ thanh bên trái trên Admin Dashboard

Các cài đặt được chia thành hai trang: General Settings và Style Settings.

Trong General Settings, bạn có thể quản lý giao diện và vị trí hiển thị của plugin

Trên trang này, bạn cũng có thể tắt hiển thị số lượng sản phẩm đã bán nếu sản phẩm bán được bằng 0.

Các cài đặt rất đơn giản và dễ hiểu. Sau khi thay đổi các cài đặt, nhấp vào nút Save Changes để lưu thay đổi.

Trên trang Style Settings, bạn có thể thay đổi màu sắc của số đếm và điều chỉnh kích thước phông chữ. Hơn nữa, nếu bạn đã quen với CSS, bạn cũng có thể thêm mã CSS để tùy chỉnh cho các phần tử theo cách bạn muốn.

Sau khi thực hiện các thay đổi trên trang này, đừng quên nhấp vào nút “Lưu thay đổi”

Chúc các bạn thành công!