Tài Liệu Wordpress

Hiển thị danh sách sản phẩm của một Danh mục bất kỳ trên Flatsome

Posted on by admin12
30
Th8

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’ );
    $loop = new WP_Query( $args );
    while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>

  • ‘; ?>

    get_price_html(); ?>

    post, $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

luu ban nhap tu dong 3867 1
Danh sách Sản phẩm dạng Grid

Để 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; ?>
            

                

                    

                        

                            
                            

                                
                                    post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo 'Placeholder'; ?>
                                
                            

                        

                        

                            
                                

                             
                            get_price_html(); ?>

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.

luu ban nhap tu dong 3867 2
Danh sách Sản phẩm dạng List

Đ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; ?>
            

                    

                        

                            

                                

                                    

                                        
                                        

                                            
                                                post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo 'Placeholder'; ?>
                                            
                                        

                                    

                                

                                

                                    

                                        
                                            

                                         
                                        
                                        get_price_html(); ?>

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
Kết quả là chúng ta có Slider tương ứng như sau
luu ban nhap tu dong 3867 3
Danh sách sản phẩm dạng Grid Slider
luu ban nhap tu dong 3867 4
Danh sách Sản phẩm dạng List Slider
Việc còn lại là chúng ta tùy chỉnh CSS để hiển thị trông đẹp mắt hơn.
Trên đây là chia sẻ từ kinh nghiệm triển khai dự án của mình, là một trong nhiều cách để đạt được mong muốn hiển thị sản phẩm theo yêu cầu. Hi vọng nó sẽ giúp được bạn khi triển khai dự án của mình.
Chúc bạn thành công!
admin12