Tự tạo tìm kiếm nâng cao cho sản phẩm Woocommerce

Như các bạn cũng biết việc tìm kiếm sản phẩm với 1 trang web bán hàng là điều vô cùng quan trọng, nó giúp cho khách hàng dễ dàng tìm thấy sản phẩm mà họ cần, vậy với bài viết này mình sẽ giúp các bạn tự tạo tìm kiếm nâng cao cho sản phẩm Woocommerce mà không phải dùng đến Plugin nào cả.

Demo trên Vnkings.com:

Các thành phần trong khung tìm kiếm(mình sử dụng Bootstrap Form để các bạn dễ tùy biến):

• Từ khóa
• Chọn Danh mục sản phẩm
• Chọn Sắp xếp theo
• Input ẩn post_type
• Input ẩn taxonomy

– Từ khóa: : Sau khi thêm đoạn này khi tìm kiếm sẽ có dạng Vnkings.com/?s=từ+khóa

<div class="form-group">
	<label for="">Từ khóa</label>
	<input type="text" class="form-control" name="s" placeholder="Nhập từ khóa...">
</div>

– Chọn Danh mục sản phẩm

<div class="form-group">
	<label for="">Danh Mục</label>
	<select name="term" class="form-control" id="vnkings_cat">
	<option value="0">--- Chọn danh mục sản phẩm ---</option>
	<?php
	$vnkings_terms = get_terms('product_cat', 'orderby=name');
	foreach ($vnkings_terms AS $term) :
		echo "<option value='".$term->slug."'".($_GET['publication_categories'] == $term->slug ? ' selected="selected"' : '').">".$term->name."</option>\n";
	endforeach;
	?>
	</select>
</div>

Giải thích : Sau khi thêm đoạn này khi tìm kiếm sẽ có dạng Vnkings.com/?term=slug-danh-muc-san-pham

• select name=”term”:Gán giá trị cho term sẽ bằng 1 trong các option bên dưới
• get_terms: Lấy tất cả danh mục sản phẩm trong product_cat
• option $term->slug: lấy slug của danh mục sản phẩm
• $term->name : lấy tên danh mục sản phẩm

– Chọn Sắp xếp theo

<div class="form-group">
	<label for="">Sắp xếp</label>
	<select name="orderby" class="form-control" id="vnkings_cat">
	<option value="menu_order">--- Sắp xếp theo ---</option>
	<option value="popularity">Mức độ phổ biến</option>
	<option value="rating">Điểm đánh giá</option>
	<option value="date">Theo sản phẩm mới</option>
	<option value="price">Giá Thấp đến Cao</option>
	<option value="price-desc">Giá Cao đến Thấp</option>
	</select>
</div>

Giải thích: Sau khi thêm đoạn này khi tìm kiếm sẽ có dạng Vnkings.com/?orderby=sap-xep . Các tùy chọn bên trên như menu_order, popularity, rating, date, price được Woocommerce cung cấp để chúng ta sử dụng bộ lọc sắp xếp.

– Hai Input ẩn quan trọng : post_type và taxonomy:

<input type="hidden" name="post_type" value="product">
<input type="hidden" name="taxonomy" value="product_cat">

khi cài Woocommerce nó sẽ tạo ra 1 Post type là Product làm trang sản phẩm và taxonomy = product_cat để tạo danh mục sản phẩm, đây là 2 input giúp cho phần tìm kiếm biết được ta đang hướng tới post type và danh mục là gì cho phần tìm kiếm

Vậy Ta sẽ có 1 khung tìm kiếm hoàn tất như sau :

<form action="<?php bloginfo('url');?>" method="get">
	<div class="form-group">
		<label for="">Từ khóa</label>
		<input type="text" class="form-control" name="s" placeholder="Nhập từ khóa...">
	</div>
	<div class="form-group">
		<label for="">Danh Mục</label>
		<select name="term" class="form-control" id="vnkings_cat">
		<option value="0">--- Chọn danh mục sản phẩm ---</option>
		<?php
		$vnkings_terms = get_terms('product_cat', 'orderby=name');
		foreach ($vnkings_terms AS $term) :
			echo "<option value='".$term->slug."'".($_GET['publication_categories'] == $term->slug ? ' selected="selected"' : '').">".$term->name."</option>\n";
		endforeach;
		?>
		</select>
	</div>
	<div class="form-group">
		<label for="">Sắp xếp</label>
		<select name="orderby" class="form-control" id="vnkings_cat">
		<option value="menu_order">--- Sắp xếp theo ---</option>
		<option value="popularity">Mức độ phổ biến</option>
		<option value="rating">Điểm đánh giá</option>
		<option value="date">Theo sản phẩm mới</option>
		<option value="price">Giá Thấp đến Cao</option>
		<option value="price-desc">Giá Cao đến Thấp</option>
		</select>
	</div>
	<input type="hidden" name="post_type" value="product">
	<input type="hidden" name="taxonomy" value="product_cat">
	<button type="submit" class="btn btn-default">Tìm kiếm</button>
</form>

Cùng xem kết quả khi tìm kiếm nhé:

Mong rằng kiến thức nhỏ bé này sẽ giúp được các bạn tối ưu website của mình hơn!. Nếu có bất kỳ câu hỏi nào, đừng ngại hãy để lại comment cho mình, để chúng ta cùng giải quyết 🙂

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