• Bỏ qua primary navigation
  • Skip to main content

Thuận Bùi

Blogger, Runner & Developer

  • Bàn Phím Cơ
  • WordPress
    • Woocommerce
    • Genesis
  • Dev
    • Web Development
    • Linux
    • VPS
  • Liên Hệ
  • Shop
  • Show Search
Hide Search
Thuận Bùi

Xoá bỏ hoặc tuỳ biến bộ đếm sản phẩm (product count) trên trang Shop của Woocommerce

Tháng Sáu 13, 2017 bởi Thuận Bùi - Để lại bình luận

Mặc định khi chỉnh trang Shop và Product Category (Danh mục sản phẩm) hiển thị Sub-Category (Danh mục con), Woocommerce sẽ hiển thị một con số bên cạnh tên Danh mục, như hình dưới đây

Số đếm sản phẩm gây khó hiểu cho khách hàng

Con số này chính là số lượng sản phẩm có trong từng Danh Mục. Tuy nhiên, Woocommerce chỉ hiển thị số trong hai dấu ( ), vừa gây khó hiểu đối với khách hàng, vừa khiến trang sản phẩm nhìn xấu xí thiếu chuyên nghiệp.

Để giải quyết, chúng ta có thể xoá luôn con số này, chỉ hiển thị tên Danh Mục cho đơn giản, hoặc tuỳ biến sao cho trực quan thân thiện hơn.

Cách 1: Xoá bộ đếm

Để xoá con số đếm này, thêm đoạn code sau vào file functions.php trong thư mục theme bạn đang dùng:

add_filter( 'woocommerce_subcategory_count_html', 'tb_hide_category_count' );
function tb_hide_category_count() {
//No count
}
Trang sản phẩm sau khi đã xoá bỏ bộ đếm

Cách 2: Tuỳ biến thông tin số lượng sản phẩm

Thay vì xoá bỏ bộ đếm, chúng ta có thể chỉnh sửa lại đôi chút để thông tín số lượng sản phẩm hiển thị trực quan và thân thiện hơn. Ví dụ dưới đây mình thay thế số (3) thành 3 sản phẩm

Thêm đoạn code sau vào file functions.php


add_filter( 'woocommerce_subcategory_count_html', 'filter_woocommerce_subcategory_count_html', 10, 2 );
function filter_woocommerce_subcategory_count_html( $mark_class_count_category_count_mark, $category ) {
            $mark_class_count_category_count_mark = ' 
<mark class="count">' . $category->count . ' sản phẩm</mark>';
            return $mark_class_count_category_count_mark;
        }

Thêm đoạn CSS này vào file style.css

mark.count {
    background: #FFF;  
    margin-top: 10px;
    display: block;
    font-size: 14px;
    text-align: center;
    text-transform:lowercase;
    font-weight: 400;
}

Tuỳ theme bạn đang sử dụng mà phần css có thể cần phải thay đổi đôi chút cho phù hợp.

Kết quả như sau:

Trang sản phẩm đã thân thiện và dễ hiểu hơn: mỗi danh mục có 3 sản phẩm.

Vậy là xong, trang sản phẩm đã hấp trực quan và thân thiện với khách hàng hơn trước rất nhiều.

Related Posts

Thêm hình ảnh sản phẩm và SKU trong email đơn hàng của Woocommerce
FacebookTweetEmailPrint

Thuộc chủ đề:Woocommerce

Thuận Bùi

Nói về Thuận Bùi

Runner at Yêu Chạy Bộ. Blogger at Ba Lô & Dép Lào. Web Developer at TB's Blog.
Follow me: Facebook / Instagram

Đăng ký nhận bài viết mới

Không bỏ lỡ các chia sẻ mới nhất từ blog. Đăng ký ngay

Reader Interactions

Trả lời Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Powered by Genesis Framework & UpCloud · Đăng nhập

  • Yêu Chạy Bộ
  • YCB
  • Purna Yoga
  • Ba Lô & Dép Lào
  • SuperSilk
  • Lành Kitchen
Share this ArticleLike this article? Email it to a friend!

Email sent!