Chào bạn, việc sử dụng shortcode có sẵn của WooCommerce để lọc sản phẩm theo chuyên mục (product_cat) là một cách rất nhanh và hiệu quả mà không cần can thiệp quá sâu vào code PHP phức tạp.
Dưới đây là hướng dẫn chi tiết cách triển khai bằng code để tạo ra một shortcode tùy chỉnh, giúp bạn linh động hơn trong việc hiển thị.
1. Sử dụng Shortcode mặc định của WooCommerce
Nếu bạn chỉ muốn hiển thị sản phẩm của một chuyên mục cụ thể, WooCommerce đã hỗ trợ sẵn:
Vi dụ: [ products category=”slug-chuyen-muc” ]
Trong đó, slug-chuyen-muc là đường dẫn tĩnh của danh mục sản phẩm bạn muốn lọc.
2. Code tạo Shortcode tùy chỉnh (Filter theo Category)
Nếu bạn muốn viết code trong file functions.php của Theme để tạo ra một danh sách sản phẩm theo chuyên mục một cách chuyên nghiệp hơn, hãy sử dụng đoạn code sau:
// Thêm shortcode mới: [loc_san_pham cat="slug-danh-muc"]
add_shortcode('loc_san_pham', 'custom_filter_products_by_cat');
function custom_filter_products_by_cat($atts) {
// Lấy tham số truyền vào từ shortcode
$atts = shortcode_atts(array(
'cat' => '', // Mặc định để trống
'limit' => '8', // Số lượng sản phẩm hiển thị
'columns' => '4' // Số cột
), $atts);
$slug = $atts['cat'];
$limit = $atts['limit'];
$columns = $atts['columns'];
// Sử dụng lại chính shortcode gốc của WooCommerce để xử lý hiển thị
return do_shortcode("[products category='$slug' limit='$limit' columns='$columns' orderby='date' order='DESC']");
}
3. Cách sử dụng trên website
Sau khi thêm code vào functions.php, bạn có thể chèn vào trang nội dung hoặc Widget bằng cú pháp:
- Hiển thị sản phẩm thuộc danh mục “Điện thoại”:
[loc_san_pham cat="dien-thoai"] - Hiển thị 4 sản phẩm thuộc danh mục “Laptop” chia làm 2 cột:
[loc_san_pham cat="laptop" limit="4" columns="2"]
Tại sao nên dùng cách này?
- Tận dụng tối đa WooCommerce: Bạn không cần viết lại câu lệnh truy vấn dữ liệu (
WP_Query), giúp website nhẹ và ổn định hơn. - Dễ bảo trì: Shortcode mặc định của WooCommerce đã bao gồm sẵn các tính năng như phân trang, định dạng CSS chuẩn của theme.
- Linh hoạt: Bạn có thể thay đổi số lượng sản phẩm hoặc số cột ngay trong shortcode mà không cần sửa code PHP.
Lưu ý: Hãy đảm bảo bạn sử dụng đúng Slug (đường dẫn tĩnh) của chuyên mục chứ không phải tên hiển thị. Bạn có thể kiểm tra slug này trong phần Sản phẩm > Danh mục.
Rồi, bây giờ chúng ta nâng cấp lên 1 xíu hen
Để lọc sản phẩm theo các tab chuyên mục con, chúng ta sẽ kết hợp giữa việc lấy danh sách các danh mục con của một danh mục cha, sau đó sử dụng AJAX hoặc đơn giản hơn là các tab HTML/CSS để hiển thị sản phẩm tương ứng bằng shortcode WooCommerce.
Dưới đây là phương pháp sử dụng Tab (HTML/JS) kết hợp với shortcode có sẵn để đảm bảo giao diện chuyên nghiệp và mượt mà.
1. Code tạo Shortcode Tab Chuyên Mục Con
Bạn hãy chèn đoạn code này vào file functions.php của child theme hoặc theme đang dùng:
PHP
function shortcode_product_tabs_by_subcats($atts) {
// Lấy tham số 'parent' là ID hoặc Slug của danh mục cha
$atts = shortcode_atts(array(
'parent' => '',
), $atts);
// Tìm ID danh mục cha từ slug nếu người dùng nhập slug
$parent_cat = get_term_by('slug', $atts['parent'], 'product_cat');
if (!$parent_cat) return 'Không tìm thấy danh mục cha.';
// Lấy tất cả danh mục con
$sub_categories = get_terms(array(
'taxonomy' => 'product_cat',
'child_of' => $parent_cat->term_id,
'hide_empty' => true,
));
if (empty($sub_categories)) return 'Danh mục này không có danh mục con.';
// Bắt đầu tạo HTML
ob_start(); ?>
<div class="woo-product-tabs">
<ul class="tab-nav" style="display:flex; list-style:none; gap:15px; border-bottom:1px solid #ddd; padding-bottom:10px;">
<?php foreach ($sub_categories as $index => $cat) : ?>
<li>
<a href="javascript:void(0)"
class="tab-link <?php echo $index === 0 ? 'active' : ''; ?>"
onclick="openTab(event, 'tab-<?php echo $cat->slug; ?>')"
style="text-decoration:none; font-weight:bold; padding: 10px; color: #333;">
<?php echo $cat->name; ?>
</a>
</li>
<?php endforeach; ?>
</ul>
<div class="tab-content-wrapper" style="margin-top:20px;">
<?php foreach ($sub_categories as $index => $cat) : ?>
<div id="tab-<?php echo $cat->slug; ?>" class="tab-content" style="<?php echo $index === 0 ? 'display:block;' : 'display:none;'; ?>">
<?php echo do_shortcode("[products category='" . $cat->slug . "' limit='8' columns='4' orderby='date' order='DESC']"); ?>
</div>
<?php endforeach; ?>
</div>
</div>
<script>
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tab-content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tab-link");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove("active");
tablinks[i].style.borderBottom = "none";
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.classList.add("active");
evt.currentTarget.style.borderBottom = "2px solid #000";
}
</script>
<?php
return ob_get_clean();
}
add_shortcode('tabs_san_pham', 'shortcode_product_tabs_by_subcats');
2. Cách sử dụng Shortcode
Bạn chỉ cần lấy Slug của danh mục cha (ví dụ: dien-tu) và dán vào trang:
[tabs_san_pham parent="dien-tu" ]
3. Giải thích cơ chế hoạt động
- Lấy dữ liệu: Code sử dụng hàm
get_termsđể tự động liệt kê tất cả các danh mục con của danh mục cha bạn đã nhập. - Hiển thị: Với mỗi danh mục con, nó tự động chạy một shortcode WooCommerce chuẩn:
. Điều này giúp bạn giữ nguyên được kiểu dáng (style) nút “Thêm vào giỏ”, giá tiền, và nhãn giảm giá của theme. - Hiệu ứng: Đoạn JavaScript nhỏ đi kèm giúp chuyển đổi qua lại giữa các danh mục mà không cần tải lại trang (nếu số lượng sản phẩm không quá lớn).
4. Tùy biến thêm (CSS)
Để các Tab trông đẹp hơn, bạn có thể thêm đoạn CSS này vào mục Giao diện > Tùy biến > CSS bổ sung:
.tab-link.active {
color: #ff0000 !important; /* Màu đỏ khi tab được chọn */
border-bottom: 2px solid #ff0000 !important;
}
.tab-link:hover {
color: #ff0000;
}
.woo-product-tabs {
margin-bottom: 30px;
}
