Chuyên mục
Wordpress

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

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
}
Code language: JavaScript (javascript)
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;
        }
Code language: PHP (php)

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;
}
Code language: CSS (css)

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.

Nếu bài viết của mình mang đến thông tin, kiến thức hữu ích cho bạn, đừng ngại mời mình ly bia để có thêm động lực chia sẻ nhiều hơn nữa. Cám ơn bạn!

Lưu ý: Nếu bạn cần hỗ trợ kỹ thuật, vui lòng gửi câu hỏi trực tiếp ở phần Thảo luận bên dưới, mình sẽ trả lời sớm. Đừng mò vào hỏi trong fanpage Yêu Chạy Bộ, sẽ không có phản hồi đâu!

Bởi 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

Trả lời

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 *