Tùy biến search form với WooCommerce

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Tùy biến search form với WooCommerce

Search form là một thành phần chẳng thể thiếu của một website có dữ liệu lớn, tầm 100 bài trở lên. Trong wordpress để tìm sửa cấu trúc giao diện của form bạn thay đổi vào file searchform.php . Form gồm có field chính là input text có thuộc tính: name="s" > và nút submit hoặc có thể chẳng cần dùng nút, người sử dụng nhập văn bản tìm kiếm trên input text và có thói quen nhấn Enter là form đã hoạt động.
product-search-form

Tạo search form

Cấu trúc của 1 form tìm kiếm chuẩn wordpress.

      ">       " />    " />      

Nếu muốn đổi tham số chuỗi kiếm tìm “s” trong trang kết quả kiếm tìm wordpress, bạn có thể xem bài viết này. Bạn cũng cũng có thể phối hợp lọc dữ liệu bởi tên trường thuộc tham số wordpress, vd lọc post trong category thì xem bài viết này.
Vì kiếm tìm mặt hàng woocommerce, bạn cần lọc dữ liệu ở trang kết quả sau khi thi hành kiếm kiếm với post_type="product" . Chúng ta không can thiệp thêm hook mà bằng cách sử dụng trực diện tham số GET &post_type=product , để chèn tham số query này trên URL bạn thêm hidden input như sau:

     

Sửa lại toàn bộ nội dung HTML cho Form kiếm tìm sản phẩm vào filter get_product_search_form .

 add_filter( 'get_product_search_form' , 'woo_custom_product_searchform' ); function woo_custom_product_searchform( $form ) { $form = '    
'; return $form; }

Hiển thị search form

Bạn có thể hiển thị search form trong trang web theo 2 cách, sử dụng sidebar với widget search.
search-widget-wp

Hoặc chèn vào bất kể vị trí nào trong template sử dụng hàm get_product_search_form .

  

Để chèn search form của WordPress bạn sử dụng hàm get_search_form

     

Search template

Nội dung form tìm kiếm sản phẩm cho woocommerce chứa ở template product-searchform.php , để thêm hay xóa thành phần trong form search bạn cũng có thể chỉnh sửa trực tiếp ở file này. Nếu không tìm thấy template product-searchform.php trong thư mục theme của bạn thì mặc định sẽ lấy nội dung form tìm kiếm ở hook get_product_search_form .

Trong folder theme Tạo file themes/your-theme/product-searchform.php và chép vào nội dung như dưới đây:

     
<input type="text" value=" " name="s" > " /> " />

Woocommerce sử dụng một trong 2 cách tạo search form, Nếu trong theme của bạn có template này thì hook get_product_search_form chưa được sử dụng và ngược lại. Nhưng nếu hiện hữu cả 2 thì template luôn được ưu tiên.

Nếu bạn thích bài viết này, hãy cỗ vũ chúng tôi bằng cách đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng cũng đều có thể theo dõi blog này trên Twitter và Facebook

Bài viết Tùy biến search form với WooCommerce được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang