Nhiều người dùng Elementor Pro thắc mắc tại sao WordPress đã có sẵn phần tìm kiếm sản phẩm của WooCommerce rồi mà vẫn cần xài Search Form của Elementor. Lý do rất đơn giản: Search Form của Elementor cho phép bạn chỉnh style trực tiếp thông qua giao diện kéo thả, từ đó tạo form tìm kiếm đẹp mắt, đồng bộ với thiết kế website mà không cần viết CSS hay PHP.
Tuy nhiên, Search Form của Elementor Pro có một hạn chế đáng chú ý: mặc định nó chỉ tìm kiếm post (bài viết) chứ không tìm kiếm product (sản phẩm). Điều này gây khó khăn cho các website bán hàng sử dụng WooCommerce và Elementor Pro, vì khách hàng gõ từ khóa vào ô tìm kiếm sẽ không tìm thấy sản phẩm nào.
Hiểu cách Search Form của Elementor Pro hoạt động
Elementor Pro Search Form widget tạo ra một form HTML đơn giản với phương thức GET. Khi người dùng nhập từ khóa và nhấn nút tìm, browser sẽ gửi request đến URL dạng /?s=tu-khoa&post_type=post. Tham số post_type=post chính là nguyên nhân khiến kết quả chỉ hiện bài viết.
Để thay đổi post_type mục tiêu, chúng ta cần thêm một hidden input field vào form. Hidden input là một trường ẩn trong HTML, người dùng không nhìn thấy nó nhưng nó sẽ được gửi cùng với form khi submit. Bằng cách thêm <input type="hidden" name="post_type" value="product">, chúng ta hướng dẫn WordPress chỉ tìm kiếm trong bảng sản phẩm.
Elementor Pro cung cấp hook elementor_pro/search_form/after_input cho phép chúng ta chèn nội dung HTML vào ngay sau input field chính của form. Đây chính là điểm chèn hoàn hảo cho hidden input của chúng ta.
Code thay đổi tìm kiếm Elementor Pro sang sản phẩm
Thêm đoạn code sau vào file functions.php của theme đang sử dụng:
/**
* Them hidden input de Elementor Search Form
* tim kiem san pham WooCommerce (product)
* thay vi chi tim bai viet (post)
*/
add_action( 'elementor_pro/search_form/after_input', function( $form ) {
echo '<input type="hidden" name="post_type" value="product" />';
}, 10, 1 );
Giải thích code:
Action hook elementor_pro/search_form/after_input chạy ngay sau khi Elementor render input field chính. Tham số $form chứa thông tin form hiện tại. Hàm callback của chúng ta chỉ cần echo một hidden input field với name="post_type" và value="product". Khi form submit, URL sẽ trở thành /?s=tu-khoa&post_type=product và WordPress sẽ chỉ tìm trong sản phẩm.
Tìm kiếm cả bài viết lẫn sản phẩm
Nếu bạn muốn Search Form của Elementor tìm kiếm cả sản phẩm lẫn bài viết, thay vì chỉ mỗi product, bạn có thể truyền mảng post_type:
// Tim kiem ca san pham va bai viet
add_action( 'elementor_pro/search_form/after_input', function( $form ) {
echo '<input type="hidden" name="post_type[]" value="product" />';
echo '<input type="hidden" name="post_type[]" value="post" />';
}, 10, 1 );
Khi sử dụng mảng post_type[], WordPress sẽ tìm kiếm trong tất cả post type được chỉ định. Bạn có thể thêm nhiều hidden input với các value khác nhau như page, portfolio hoặc bất kỳ custom post type nào.
Tìm kiếm theo custom post type khác
Bạn có thể áp dụng kỹ thuật này cho bất kỳ custom post type nào trên website. Ví dụ nếu có post type event (sự kiện) và muốn Search Form Elementor chỉ tìm kiếm sự kiện:
// Chi tim kiem custom post type 'event'
add_action( 'elementor_pro/search_form/after_input', function( $form ) {
echo '<input type="hidden" name="post_type" value="event" />';
}, 10, 1 );
Để biết tất cả post types đang hoạt động trên website, bạn có thể thêm đoạn code tạm sau vào functions.php rồi xem kết quả ở footer của website:
// Hien thi danh sach post types public - xoa sau khi xem xong
add_action( 'wp_footer', function() {
if ( current_user_can( 'manage_options' ) ) {
$types = get_post_types( array( 'public' => true ), 'names' );
echo '<pre style="text-align:left">';
print_r( $types );
echo '</pre>';
}
} );
Tạo dropdown chọn loại nội dung tìm kiếm
Một nâng cấp thú vị hơn là cho phép người dùng tự chọn muốn tìm kiếm sản phẩm hay bài viết thông qua dropdown. Thay vì hidden input, chúng ta thêm một select box vào form:
/**
* Them dropdown chon loai noi dung tim kiem
* vao Search Form cua Elementor Pro
*/
add_action( 'elementor_pro/search_form/after_input', function( $form ) {
echo '<select name="post_type" style="margin-left:8px;padding:6px;">';
echo '<option value="product">Sản phẩm</option>';
echo '<option value="post">Bài viết</option>';
echo '<option value="page">Trang</option>';
echo '</select>';
}, 10, 1 );
Đoạn code này thêm một dropdown ngay bên cạnh ô nhập từ khóa. Người dùng có thể chọn loại nội dung muốn tìm trước khi nhấn nút search. Bạn có thể tinh chỉnh style inline hoặc thêm class CSS để dropdown đồng nhất với thiết kế form.
Tùy chỉnh giao diện kết quả tìm kiếm
Sau khi thay đổi post_type, kết quả tìm kiếm sẽ hiển thị theo template mặc định của WordPress. Nếu bạn muốn tùy chỉnh trang kết quả tìm kiếm, hãy sử dụng file search.php trong theme hoặc tạo template với Elementor Theme Builder.
Đối với website WooCommerce, bạn có thể tạo trang kết quả tìm kiếm hiển thị sản phẩm dạng lưới (grid) với giá, hình ảnh và nút thêm vào giỏ hàng. Sử dụng Action hook pre_get_posts trong functions.php để điều chỉnh số kết quả hiển thị trên mỗi trang:
// Tang so ket qua tim kiem san pham len 20
add_action( 'pre_get_posts', function( $query ) {
if ( ! is_admin() && $query->is_search && $query->get( 'post_type' ) === 'product' ) {
$query->set( 'posts_per_page', 20 );
}
} );
Các hook Elementor Pro khác liên quan đến Search Form
Besides elementor_pro/search_form/after_input, Elementor Pro còn cung cấp các hook khác giúp bạn tùy chỉnh sâu hơn Search Form:
– elementor_pro/search_form/before_input: Chèn nội dung trước input field chính. Thích hợp để thêm label, icon hoặc hướng dẫn.
– elementor_pro/search_form/after_form: Chèn nội dung sau toàn bộ form. Thích hợp để thêm hidden input cho các tham số khác như orderby, order.
Ví dụ thêm sắp xếp kết quả theo giá (cho WooCommerce):
// Sap xep ket qua theo gia thap den cao
add_action( 'elementor_pro/search_form/after_form', function() {
echo '<input type="hidden" name="orderby" value="price" />';
echo '<input type="hidden" name="order" value="ASC" />';
}, 10, 1 );
Vấn đề thường gặp và cách khắc phục
Code không hoạt động: Đảm bảo bạn đang dùng Elementor Pro (phiên bản miễn phí không có widget Search Form). Kiểm tra version Elementor Pro, nếu quá cũ thì có thể hook chưa được hỗ trợ. Hãy cập nhật Elementor Pro lên bản mới nhất.
Kết quả vẫn hiện bài viết thay vì sản phẩm: Có thể template tìm kiếm đang sử dụng query riêng. Hãy kiểm tra file search.php của theme hoặc các plugin ảnh hưởng đến search. Sử dụng plugin Query Monitor để xem truy vấn SQL thực tế và xác nhận post_type đang được truyền đúng.
Xung đột với plugin tìm kiếm khác: Nếu bạn cài plugin như Ivory Search, YITH Ajax Search hoặc WP Fastest Site Search, các plugin này có thể sử dụng AJAX để xử lý tìm kiếm riêng, bỏ qua tham số post_type trong URL. Trong trường hợp này, hãy cấu hình trực tiếp trong plugin thay vì dùng code.
URL search hiển thị sai post_type: Mở Developer Tools của browser (F12), chuyển sang tab Network, gõ từ khóa và submit form. Kiểm tra request URL xem có chứa post_type=product không. Nếu không, có thể JavaScript của theme đang can thiệp vào form submit.
Tổng kết
Search Form của Elementor Pro là widget mạnh mẽ để tạo ô tìm kiếm đẹp, nhưng mặc định nó chỉ tìm bài viết. Bằng cách sử dụng hook elementor_pro/search_form/after_input để thêm hidden input post_type, bạn có thể hướng dẫn form tìm kiếm vào bất kỳ loại nội dung nào: sản phẩm WooCommerce, custom post type, hoặc kết hợp nhiều loại. Kỹ thuật này nhẹ, không cần plugin thêm và dễ dàng tùy chỉnh mở rộng.
Xem thêm: Cho phép search page trong WordPress không sử dụng Plugin hoặc Thêm hiệu ứng hover khác class với Elementor.
Mình viết bài này cũng như bao bài khác trên blog – chủ yếu để ghi lại những lúc vấp váp với WordPress, plugin, hosting. Nên chắc chắn không phải dân làm web chuyên nghiệp. Nếu bạn đang cần một website đàng hoàng, có thể liên hệ TaigaWeb – mình quen từ lâu, họ xử lý gọn hơn mình nhiều.
