Hiển thị sản phẩm theo danh mục wordpress

Hôm nay mình sẽ hướng dẫn cho các bạn một chức năng rất hay gặp trong quá trình học lập trình theme wordpress woocommerce. Đó là chức năng hiển thị sản phẩm theo danh mục dạng tabs.

•  Hiển thị sản phẩm theo danh mục woocommerce và danh mục sản phẩm
•  Hướng dẫn xây dựng chức năng sản phẩm đã xem trong WooCommerce
•  Hướng dẫn hiển thị sản phẩm trong giỏ hàng WooCommerce
•  Search sản phẩm theo danh mục trong WooCommerce
•  Hiển thị sản phẩm giảm giá WooCommerce (Sale products)

Đây kiểu hiển thị mà các bạn hay gặp trong trang chủ của các website bán hàng. Nó rút gọn không gian mà lại đẹp mắt nên được nhiều người dùng!

Demo sản phẩm hiển thị dạng tabs

Các bạn có thể xem bài viết hiển thị sản phẩm theo danh mục woocommerce trước khi xem bài này để dễ hiểu hơn nha.

  10 Add-on Google Sheets phải có dành cho các Recruiters

  Hướng dẫn lập trình theme woocommerce từ a đến z

Chuẩn bị giao diện sản phẩm theo tabs danh mục

Mình sẽ sử dụng chức năng tabs trong bootstrap 4 để làm chức năng này nhé. Các bạn có thể tham khảo chức năng tabs trong bootstrap 4.

Để sử dụng được bootstrap 4 các bạn nhúng các link css và js của bootstrap 4 vào dự án nha.

Code nhúng như sau:

Sau khi nhúng thư viện bootstrap 4 chúng ta có thể dùng đoạn code này để hiện code tabs

Home


Menu 1


Menu 2





...
...
...

Ở đây sẽ chia làm 2 phần

• Phần nav là các link tabs
• Phàn thứ 2 là content tabs

Có nghĩa là khi click vào các link tabs thì phía dưới sẽ xuất hiện các content tương ứng. Các bạn chú ý khi click vào link có href=”#menu1″ thì content ở tabs có id là id=”menu1″ sẽ hiện

Ráp code wordpress hiển thị sản phẩm theo danh mục dạng tabs

Hiển thị danh mục sản phẩm (các tabs)

Để lấy danh mục sản phẩm chúng ta có đoạn code sau:

Tất cả

 0,
'taxonomy' => 'product_cat',
'parent' => 0
); 
$cates = get_categories( $args ); 
foreach ( $cates as $cate ) { ?>

name; ?>

Chúng ta gán cố định tabs đầu tiên là tabs tất cả. Sau đó các tabs tiếp theo là danh mục sản phẩm.

Các bạn chú ý phần href chúng ta sẽ hiện phần slug của danh mục sản phẩm, vì slug của danh mục sản phẩm thì không trùng nhau.

Hiển thị sản phẩm theo danh mục tương ứng với các tabs

 'product',
'posts_per_page' => 8 
); 
?>

in_the_loop = true; ?>
have_posts()) : $getposts->the_post(); ?>



'thumnail') ); ?>


get_price_html(); ?>
Thêm vào giỏ



 0,
'taxonomy' => 'product_cat',
'parent' => 0
); 
$cates = get_categories( $args ); 
foreach ( $cates as $cate ) { ?>

 'product',
'posts_per_page' => 8,
'product_cat' => $cate->slug
); 
?>

in_the_loop = true; ?>
have_posts()) : $getposts->the_post(); ?>



'thumnail') ); ?>


get_price_html(); ?>
Thêm vào giỏ

Giải thích 1 tí 

Ở nội dung tabs có id là id=”home” mình sẽ get ra 8 sản phẩm mới nhất tương ứng với tabs tất cả. Sản phẩm ở vị trí này sẽ show tất cả không biệt tabs nào của danh mục nào.

Ở nội dung các tabs khác, ban đầu chúng ta sẽ chạy vòng lặp get danh mục, trong mỗi danh mục được hiển thị chúng ta lại tiếp tục chạy vòng lặp get bài viết với product_cat tương ứng bằng với slug của danh mục.

Các điểm chú ý

• Nội dung tabs (Tất cả) id=”home” sẽ hiển thị đầu tiên có gán class “active”
• Các nội dung các tabs tiếp theo có id chính bằng slug của danh mục id=”slug; ?>”
• Trong vòng lặp get post chúng ta có một thông số đầu vào là ‘product_cat’ => $cate->slug đây chính là điều kiện hiển thị sản phẩm theo danh mục

Code hoàn thiện của chức năng này:

Tất cả

 0,
'taxonomy' => 'product_cat',
'parent' => 0
); 
$cates = get_categories( $args ); 
foreach ( $cates as $cate ) { ?>

name; ?>





 'product',
'posts_per_page' => 8 
); 
?>

in_the_loop = true; ?>
have_posts()) : $getposts->the_post(); ?>



'thumnail') ); ?>


get_price_html(); ?>
Thêm vào giỏ



 0,
'taxonomy' => 'product_cat',
'parent' => 0
); 
$cates = get_categories( $args ); 
foreach ( $cates as $cate ) { ?>

 'product',
'posts_per_page' => 8,
'product_cat' => $cate->slug
); 
?>

in_the_loop = true; ?>
have_posts()) : $getposts->the_post(); ?>



'thumnail') ); ?>


get_price_html(); ?>
Thêm vào giỏ

Tóm lại: 

Hôm nay mình đã hướng dẫn cho các bạn cách để làm tính năng hiển thị sản phẩm theo danh mục dạng tabs. Bài viết trong khá dài nhưng thật sự nếu bạn nắm các phần về frontend thì cũng không có chi khó cả.