Tự tạo hiển thị sản phẩm theo danh mục Woocommerce
Trong bài viết này mình sẽ giúp các bạn Tự tạo hiển thị sản phẩm theo danh mục Woocommerce một cách đơn giản nhất.
Chào các bạn,
Một chức năng mà mình thấy có khá nhiều bạn đang quan tâm là thay vì sử dụng shortcode hay Plugin để hiển thị sản phẩm theo danh mục trong Woocommerce, thì ta có thể tự làm nó với code của chính mình.
Trong bài viết này mình sẽ giúp các bạn Tự tạo hiển thị sản phẩm theo danh mục Woocommerce một cách đơn giản nhất
Cùng bắt đầu nào!
– Thông thường bạn sẽ cần có vòng lặp(Loop) lấy ra bài viết như sau :
<?php $vnkings = new WP_Query(array( 'post_status'=>'publish', 'orderby' => 'ID', 'order' => 'DESC', 'posts_per_page'=> '4')); ?> <?php while ($vnkings->have_posts()) : $vnkings->the_post(); ?> // nội dung cần lặp <?php endwhile ; wp_reset_query() ;?>
Nếu sử dụng Loop như trên thì nó sẽ mặc định lấy bài trong Post type = Post (chính là phần tin tức của các bạn)
– Vậy chúng ta cần 1 số điều kiện nâng cao để nó bắt được sản phẩm trong một danh mục cụ thể ở Woocommerce:
<?php $vnkings = new WP_Query(array( 'post_type'=>'product', 'post_status'=>'publish', 'tax_query' => array( array( 'taxonomy' => 'product_cat', 'field' => 'id', 'terms' => 'ID_Của_Danh_Mục_Sản_Phẩm' ) ), 'orderby' => 'ID', 'order' => 'DESC', 'posts_per_page'=> '4')); ?> <?php while ($vnkings->have_posts()) : $vnkings->the_post(); ?> // Nội dung từng sản phẩm <?php endwhile ; wp_reset_query() ;?>
Giải thích :
- WP_Query(): tạo 1 Query với các điều kiện bên trong
- ‘post_type’=>’product: Lấy các bài viết trong post type Product
- ‘post_status’=>’publish’: Hiển thị các bài viết đã đăng(không phải bài nháp)
- ‘taxonomy’ => ‘product_cat’: Bên trên ta thấy đã lấy bài viết ở Product, vậy tiếp theo ta hướng nó tới Danh mục cụ thể là Taxonomy product_cat
- ‘field’ => ‘id’: Cách để lấy ra taxonomy là sử dụng ID của taxonomy đó
- ‘terms’ => ‘ID_Của_Danh_Mục_Sản_Phẩm’: Đây chính là phần khai báo ID của danh mục sản phẩm bạn cần nhập vào
- ‘orderby’ => ‘ID’,’order’ => ‘DESC’: Hiển thị sản phẩm từ mới đến cũ
- ‘posts_per_page’=> ‘4’: hiển thị ra số lượng sản phẩm bạn muốn, cụ thể ở đây mình show ra 4 sản phẩm
Lấy ID_Của_Danh_Mục_Sản_Phẩm
bằng cách sửa danh mục sản phẩm và xem ID trên thanh Address trình duyệt
– Khi đã có vòng lặp ra các sản phẩm trong danh mục cụ thể rồi, chúng ta tìm hiểu đến cách hiển thị các sản phẩm trong vòng lặp đó nhé:
(Trước tiên bạn nên đọc bài viết này để xem ta có những hàm gì để lấy ra dữ liệu trong Woocommerce: Tổng hợp các hàm hiển thị dữ liệu cho Woocommerce)
– Bây giờ ta sẽ có đoạn code cụ thể như sau:
<div class="vnkings_category_product"> <div class="head_vnkings"> <h3 class="title_head"><a href="<?php echo get_term_link(ID_Của_Danh_Mục_Sản_Phẩm); ?>"><?php echo get_cat_name(ID_Của_Danh_Mục_Sản_Phẩm);?></a></h3> </div> <?php $vnkings = new WP_Query(array( 'post_type'=>'product', 'post_status'=>'publish', 'tax_query' => array( array( 'taxonomy' => 'product_cat', 'field' => 'id', 'terms' => 'ID_Của_Danh_Mục_Sản_Phẩm' ) ), 'orderby' => 'ID', 'order' => 'DESC', 'posts_per_page'=> '4')); ?> <?php while ($vnkings->have_posts()) : $vnkings->the_post(); ?> <div class="list_sp col-md-3"> <a class="image_sp" href="<?php the_permalink() ;?>"><?php the_post_thumbnail("medium",array( "title" => get_the_title(),"alt" => get_the_title() ));?></a> <h4 class="title_sp"><a href="<?php the_permalink() ;?>"><?php the_title() ;?></a></h4> <span class="price"><ins><span class="amount">Giá: <?php echo get_post_meta( get_the_ID(), '_regular_price', true ); ?></span></ins></span> </div> <?php endwhile ; wp_reset_query() ;?> </div>
Lưu ý:
- get_term_link() : lấy link danh mục sản phẩm
- get_cat_name() : hiển thị tiêu đề danh mục sản phẩm
- Hãy thay ID_Của_Danh_Mục_Sản_Phẩm bằng id danh mục sản phẩm của bạn nhé
Xem thử kết quả bên Vnkings.com:
Bằng sự sáng tạo của bạn hãy thử tạo style riêng cho phần này! nếu thành công hãy khoe phần bạn làm với mình qua fanpage hoặc comment nhé 😀
Bài liên quan
- Hiển thị danh mục sản phẩm theo hình ảnh WooCommerce
- Tổng hợp các hàm hiển thị dữ liệu cho Woocommerce
- Tự tạo tìm kiếm nâng cao cho sản phẩm Woocommerce
- Tạo khung tìm kiếm chỉ hiển thị ra sản phẩm Woocommerce
- Căn giữa hình ảnh sản phẩm Woocommerce bằng CSS
- Thêm giỏ hàng Woocommerce ở vị trí bạn muốn trên wordpress
bạn cho hỏi là copy cái đoạn code ”hiển thị sản phẩm theo danh mục trong woocommerce ” vào đâu vậy?
bạn vào file category.php(trang danh mục) hoặc index.php(trang chủ) để chèn đoạn này nhé
Minh đang rất quan tâm về bài viết này .mình làm bị lỗi.ad có thể chỉ cho mình tận tình chút được không .cảm ơn ad
Hi bạn,
Đầu tiên là cảm ơn bài viết rất hay của bạn.
Bạn cho mình hỏi, có lần nào bạn chèn thêm cái button add to card vào vòng lặp đó chưa, sau khi mình đã làm giống bạn nhưng mình chèn thêm 1 nút add to card vào nữa, khi nhấn nút thì nó lại load lại trang mặc dù có vào giỏ hàng. Vậy bạn có hướng giải quyết nào không. Thanks!
Chào bạn, nếu bạn muốn nó load dạng ajax không load trang thì vòng lặp ban cần trong div có class là woocommerce
Ví dụ:
Bở vì Woo Hỗ trợ Js cho các phần tử thuộc div class = woocommerce
nếu code này cho vào danh mục sản phẩm có dk k ad
Có bạn ạ, vì đoạn code kia là 1 query xác định chứ không phải dạng get tự động theo file danh mục bạn nhé.
Bạn ơi, mình muốn trong trang danh mục chỉ lấy 24 sản phẩm mới nhất của danh mục đó thì query viết ra sao.
Bạn chỉ cần thay đổi chỗ :
là được bạn nhé
Rat cam on bai viet cua ban. no giup minh giai quyet dc van de ma minh dang gap kho khan.
Chuc ban suc khoe de co nhieu bai viet hay va bo ich nhu the nay.
Đọc những câu này của bạn mình rất vui vì những kiến thức này đã hữu ích với mọi người. Cảm ơn bạn!
ah, ban cho minh hoi minh muon hien thi them gia sale thi lam sao ban? thanks
hihi, minh tim ra duoc roi. 🙂
Anh ơi làm sao để chèn code này vào ạ
mình coppy đoạn code trên đã thay id danh mục sản phẩm bằng id danh mục danh mục sản phẩm của mình ! chèn đoạn code trên vào tệp index.php xong thì bị treo trang luôn ! phải vào cpanlen xóa đi thì mới vào đc trang!
làm ơn hướng dẫn cho mình chi tiết hơn được không vì trình độ lập trình của mình rất non chỉ muốn biết sơ sơ để tùy biến cho trang của mình làm ơn giúp mình với
hello bạn, cho mình hỏi là sao mình click vào sản phẩm trên menu thì không ra sản phẩm nào hết. Mình đã change permanlink đầy đủ hết rồi vẫn không khắc phục được. Mình tạo và đăng sản phẩm mới bấm review thì ok nhưng khi load trang chủ xem lại thì không thể được, mình hỏi nhiều nơi nhưng chưa có cách giải quyết, bạn giúp dùm mình nhé. Trường hợp này mình search cũng không ra. Cám ơn bạn .
Website bạn là gì?
Cho mình hỏi, mình muốn hiển thị hết sản phẩm trong đó mình loại trừ một categoris mình không thíc nó hiển thị ra thì làm thế nào hả ??? Bằng cách khác có thể thêm 2,3 hoặc nhiều hơn id ở đây dc k ? ‘terms’ => ‘ID_Của_Danh_Mục_Sản_Phẩm’ (‘terms’ => 1,2,3,4 ….)
bỏ các cat không dùng thì bạn có thể đặt là:
trong đó id: 1,2,3 là những id không muốn hiển thị ra.
Mình có 1 đoạn code như vậy, hiển thị mọi thứ ok, tuy nhiên nếu mình làm nhiều file danh mục khác nhau thì nó lại chỉ hiện danh mục đầu tiên thôi @@, cứ cái widge nào được kéo lên trên cùng thì hiện, còn mấy cái sau là ko hiện sản phẩm, mặc dù đã check đi check lại. Ad có thể xem giúp mình xem lý do tại sao ko -_-
Bạn để ý xem các vòng lặp đã được reset khi kết thúc chưa nhé.
Sau comment ở Vnkings chèn code, bạn có thể dùng [ php ] nội dung [/ php ]. Lưu ý viết liền.
Em đau đầu quá muốn cho danh mục ra như của bác ko nổi bó tay
Bạn bị lỗi gì vậy?
Em chèn code trên đủ mọi nơi mà nó không hiện danh mục mới ra mệt quá
Bạn chụp lại màn hình hoặc paste code vào http://notepad.cc/ để mình kiểm tra cho.
mình bị lỗi: Call to undefined function get_userdata() in C:\wamp64\www\wordpress\wp-includes\class-wp-query.php sửa sao vậy bạn
trong đoạn hướng dẫn trên mình không có đoạn get_userdata nên không biết code của web bạn bị lỗi gì bạn nhé. bạn thử tìm hàm đó trên code của bạn rồi xem lại xem thế nào.
Bạn cho mình hỏi là mình muốn viết plugin để hiện các sản phẩm lên trang index.php thì làm sao vậy.
Mình viết giống như bạn trong phần plugin thì sản phẩm hiện ra ở phía dưới cùng của trang. Mình muốn cho nó lên đầu thì làm thế nào vậy bạn. Xin cảm ơn
Bạn đặt vào vị trí nào thì nó sẽ hiển thị ở vị trí đó chứ bạn. bạn đặt lên đầu của Index.php thì nó sẽ ở đầu của trang chủ.
nhưng mình muốn viết nó trong cái trang plugin để nó hiện lên đầu ấy bạn. Chứ k phải viết trong trang index.php
Trang Plugin là trang gì bạn?
ad ơi cho e hỏi chút với, e muốn hiển thị khi theo kiểu click vào 1 danh mục sản phẩm cha bất kỳ thì sẽ show ra 1 list các danh mục con và sản phẩm của danh mục con đấy kiểu như web trananh.vn ấy ạ, có cách nào làm như vậy ko a?
Sao mình thay đổi trong file index.php của theme rồi mà giao diện trang chủ không thay đổi tí nào nhỉ
Có phải cấu hình chỗ nào nữa không bạn. Cảm ơn
Bạn ơi, có thể chỉ cho mình fix để chỉnh lại sản phẩm trên 1 hàng được không ? Mình cóp vào nhưng nó nằm nhiều hang. Cảm ơn bạn đã chia sẽ 😀
cảm ơn bạn, Bài viết của bạn rất hữu ích
Chào bạn cho mình hỏi code trên muốn phân trang sao ạ.
Chào bạn, đầu tiên bạn cài WP-PageNavi để hỗ trợ phân trang, còn code phân trang bạn dùng đoạn này:
Cái vnkings là gì bạn? Mình đang làm thử mà chưa được.
$vnkings
là một biến khởi tạo Query theo điều kiện bạn ạAh.Mình hiểu rồi,cho mình hỏi là có 2,3,4 danh mục thì mình làm 2,3,4 đoãn code lặp lại rồi thay ID danh mục sản phẩm hả bạn?
Mình đã copy và paste ,cũng đã thay ID danh mục sản phẩm nhưng không được
Chào anh. Nếu em muốn làm thêm phần những hình ảnh có cùng tác giả thì phải làm sao ạ. khi nhấp vào 1 ảnh thì sẽ có 1 phần gợi ý những ảnh có cùng 1 tác giả đó
mình không tìm thấy file category.php bạn ơi, chỉ thấy 2 file content-product_cat.php với taxonomy-product_cat.php nên không biết chèn vào đâu ạ
Chào bạn! mình đang thục hành làm và đang mắc phải lỗi này (trong danh mục chỉ hiện thị 1 sản phẩm).
http://vnewstyle.com/sanpham/vay-xuong-be-gai. bạn giúp mình hiển thị 24sp trong 1 danh mục được không? cảm ơn bạn nhiều.
Chào bạn, trong hướng dẫn trên có 1 đoạn là:
Đây chính là thiết lập số lượng sản phẩm trên 1 trang, bạn có chắc chắn làm theo các bước mình viết bên trên không?
Em muốn phân bổ sản phẩm theo lướt trên PC và điện thoại luôn chứ không chỉ lưới trên PC còn ĐT thì 1 cột dọc, admin hay ai chỉ giúp em với. Em cảm ơn nhiều ạ.
Việc hiển thị như thế nào thì em Style CSS là được mà.
Bạn ơi, muốn hiển thị chuyên mục mặc định thì thay bằng gì vậy?
Chào em, em có thể điền ID danh mục mặc định của em vào.
Chào ad, mình đã đọc bài viết của bạn nhiều lần có nhiều bài hay mình đã áp dụng trên website của mình. Nhưng mình đang gặp khó khăn không biết xử lý thế nào về y/c: hiển thị tất cả các danh mục cha(level 1), sau khi vào 1 danh mục cha lại chuyển đến 1 trang hiển thị tất cả các danh mục level 2. Mong bạn giúp đỡ
Chào bạn, bạn có thể Add Skype mình nếu cần hỗ trợ trực tiếp bạn nhé:
vn.starter@gmail.com
Cho mình hỏi mình muốn kết hợp giữa ACF vs code này, mà k biết phải tùy biến ntn cho hợp lý, vì code mấy lần toàn lỗi trang :((
Chào bạn cho mình hỏi code trên muốn phân trang sao ạ.? Cho mình xin code với ạ! cảm ơn ạ!
cho mình hỏi chút, code đó đặt vào đâu
thanks Ad!
Mình đang dùng 1 web bán hàng sử dụng WC, vì cũng mới nhận SEO không để ý rằng trước khi update plugin và wordpress thì hình như nó hoạt động bình thường. Nhưng sau khi update thì hiện tại giỏ hàng không hiện ra sản phẩm dù vẫn báo số. Mình có xem tình trạng thì hình như giao diện lỗi thời, vậy cách khắc phục thế nào. Liệu mình xóa đi cài lại plugin bản cũ trước đó có ok không?
bạn ơi cho mình hỏi, nếu mình muốn chèn code này thì phải làm như thế nào vậy bạn?
Đoạn code này mình sẽ chèn vào file nào thế bạn?
Chào bạn, bạn có thể đưa vào trang chủ (index.php) hoặc bất kỳ file Page nào.
Cảm ơn admin, bài viết rất hay. Admin cho mình hỏi mình muốn phân trang nếu các sản phẩm nó vượt số lượng 1 trang?
Thanks.
Bạn có thể dùng Plugin WP-PageNavi để phân trang bạn nhé.
Xin chào,
Mình muốn hiển thị sản phẩm liên quan (related) chỉ show trong danh mục con (subcategory), không show trong danh mục cha (parent category) thì làm như thế nào trong Child theme? Mình search google thấy chỉ là tạo file related.php, paste code vào mà không thấy thay đổi gì.
Cám ơn bạn.