Cách tạo bộ lọc sản phẩm theo thuộc tính dạng dropbox trong woocommerce

5/5 - (1 bình chọn)

Nếu bạn đang sử dụng thuộc tính sản phẩm (năm sinh) để lọc sản phẩm, thì URL đúng sẽ có định dạng dựa trên taxonomy ?filter_<slug-thuoc-tinh>=<slug-cua-gia-tri> thay vì product-tag.

Cách Tạo Bộ Lọc Sản Phẩm Theo Thuộc Tính Dạng Dropbox Trong Woocommerce

Dưới đây là cách tạo shortcode đúng để lọc sản phẩm theo thuộc tính “Năm sinh”:


1. Mã Shortcode

Thêm đoạn mã này vào file functions.php của theme con (child theme):

// Tạo shortcode hiển thị dropdown lọc theo thuộc tính "Năm sinh"
add_shortcode('year_of_birth_filter', 'create_year_of_birth_filter_shortcode');

function create_year_of_birth_filter_shortcode() {
    // Thay 'pa_nam-sinh' bằng slug của thuộc tính "Năm sinh"
    $attribute_name = 'pa_nam-sinh';

    // Lấy danh sách các giá trị (terms) của thuộc tính
    $terms = get_terms([
        'taxonomy'   => $attribute_name,
        'hide_empty' => true,
    ]);

    if (!empty($terms) && !is_wp_error($terms)) {
        ob_start(); // Bắt đầu buffer để trả về nội dung

        echo '<form method="GET" action="' . esc_url(get_permalink(wc_get_page_id('shop'))) . '" id="year_of_birth_filter">';
        echo '<label for="year_of_birth">Lọc theo năm sinh:</label>';
        echo '<select id="year_of_birth" name="filter_' . esc_attr(str_replace('pa_', '', $attribute_name)) . '">';
        echo '<option value="">Chọn năm sinh</option>';

        foreach ($terms as $term) {
            echo '<option value="' . esc_attr($term->slug) . '">' . esc_html($term->name) . '</option>';
        }

        echo '</select>';
        echo '</form>';

        // JavaScript tự động submit form khi chọn năm sinh
        echo "
        <script>
            document.getElementById('year_of_birth').addEventListener('change', function() {
                this.form.submit();
            });
        </script>
        ";

        return ob_get_clean(); // Kết thúc buffer và trả về nội dung
    } else {
        return '<p>Không tìm thấy thuộc tính "Năm sinh".</p>';
    }
}

2. Cách sử dụng

  • Sau khi thêm đoạn mã vào functions.php, bạn có thể sử dụng shortcode [year_of_birth_filter] ở bất kỳ vị trí nào (trang, bài viết, widget, v.v.).

3. Cách hoạt động

  1. URL sẽ tự động được tạo: Khi chọn một giá trị năm sinh (ví dụ: 1992), URL sẽ có định dạng:
    https://yourwebsite.com/shop/?filter_nam-sinh=1992
    
    • nam-sinh: Slug của thuộc tính.
    • 1992: Slug của giá trị thuộc tính.
  2. WooCommerce sẽ tự động hiển thị các sản phẩm tương ứng với năm sinh được lọc.

4. Lưu ý

  • Slug thuộc tính chính xác: Đảm bảo slug của thuộc tính “Năm sinh” trong WooCommerce là pa_nam-sinh. Nếu slug khác, thay đổi biến $attribute_name trong mã.
  • Trang cửa hàng: Mặc định, form sẽ chuyển hướng đến trang cửa hàng (Shop). Nếu bạn muốn thay đổi, hãy thay wc_get_page_id('shop') bằng ID hoặc URL của trang bạn muốn.

Chúc bạn thành công! 🚀

5/5 - (1 bình chọn)


Để lại một bình luận