Vì một lý do nào đó mà bạn muốn chọn hiển thị Danh sách sản phẩm của một danh mục nào đó với thiết kế riêng, không phải của Theme hay mặc định của Woocommerce. Bài viết này sẽ giúp bạn dễ dàng thực hiện được điều ấy.
Hiển thị danh sách sản phẩm của Danh mục được chọn
Dưới đây là đoạn code để hiển thị Danh sách sản phẩm của danh mục mà mình sưu tầm được:
Tên danh mục
-
‘product’, ‘posts_per_page’ => 1, ‘product_cat’ => ‘ten-danh-muc’, ‘orderby’ => ‘rand’ );
-
‘; ?>
get_price_html(); ?>
post, $product ); ?>
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
Như trên chúng ta có thể thấy:
- Post Type: Product
- Post Per Page: Số sản phẩm hiển thị ra, ở đây đang để là 1
- Product Cat: Slug của danh mục sản phẩm
- Order By: Thứ tự sắp xếp, ở đây là Random
- Các thành phần hiển thị ra
- Thumbnail: Size 300x300px
- Tiêu đề
- Giá
- Thêm vào giỏ hàng
Với đoạn code này, chúng ta có thể gọi ra số lượng sản phẩm mong muốn của một danh mục bất kỳ.
Áp dụng cho Theme Flatsome
Hiển thị dạng Grid
Đây là kiểu hiển thị cơ bản mặc định của Flatsome với các sản phẩm được chia theo hàng – cột
Để hiển thị như này, chúng ta sử dụng đoạn code dưới đây:
'product', 'posts_per_page' => 12, 'product_cat' => 'cap-sac', 'orderby' => 'rand' ); $loop = new WP_Query( $args ); while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
Việc còn lại là tùy chỉnh CSS cho đẹp mắt
Hiển thị dạng List
Đây là kiểu hiển thị với Ảnh thumbnail bên trái, nội dung (bao gồm Tiêu đề, Mô tả ngắn, Giá) nằm ở bên phải.
Đoạn code cho kiểu hiển thị này như sau:
'product', 'posts_per_page' => 12, 'product_cat' => 'cap-sac', 'orderby' => 'rand' ); $loop = new WP_Query( $args ); while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
Hiển thị dạng Slider
Chỉ cần một thay đổi nhỏ ở đoạn code ở 2 cách hiển thị Grid và List ở trên, chúng ta sẽ có kiểu hiển thị Slider, cụ thể:
Đoạn
Được thay thế bằng đoạn