Code hiển thị số lượng sản phẩm đã bán trong WooCommerce

4/5 - (1804 bình chọn)

Woocommerce hiện tại là plugin miễn phí hỗ trợ làm 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 trong Woocommerce. Ngay bây giờ, hãy thực hiện ngay thôi nào.

Bước 1: Các bạn đăng nhập vào trang quản trị của website.
Bước 2: Vào mục Giao diện → Sửa giao diện → function.php.
Bước 3: Các bạn thêm đoạn code bên dưới vào function.php.

1. Nếu hiện thị ở trang sản phẩm 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>';
}

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

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

3. Còn nếu muốn hiện thị 2 vị trí cùng 1 lúc thì dùng code này

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

Note : chỉ là thêm hook vào vị trí ( 2 vị trí ) thôi nhé

OK rồi nhé , css cho đẹp hơn nè

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

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

Tags: WooCommerce