Hoàng Web

Thiết Kế Website WordPress

  • Kho giao diện
  • Dịch Vụ
    • Thiết kế web giá rẻ
    • Thiết kế website WordPress
    • Hosting Miễn Phí 100GB
    • Tích hợp thanh toán MoMo, ViettelPay, Vietcombank, MB..
    • Tối ưu Google PageSpeed
    • Sửa lỗi nâng cấp website
    • Viết plugin WordPress
    • Code Tool theo yêu cầu
  • Bảng giá
  • Quy trình làm việc
  • Giới thiệu
  • Liên Lạc
Trang chủ » Wordpress » Wordpress plugins » Tùy biến search form với WooCommerce

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

Thứ Tư, 24/09/2014 by Hoàng Quách

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Search form là một thành phần khô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" id="s" và nút submit hoặc có thể không cần sử dụng nút, người 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 một form tìm kiếm chuẩn wordpress.

<?php
/**
 * The template for displaying search forms in Twenty Eleven
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?>
	<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
		<label for="s" class="assistive-text"><?php _e( 'Search', 'twentyeleven' ); ?></label>
		<input type="text" class="field" name="s" id="s" placeholder="<?php esc_attr_e( 'Search', 'twentyeleven' ); ?>" />
		<input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'twentyeleven' ); ?>" />
	</form>

Nếu muốn đổi tham số chuỗi tìm kiếm “s” trong trang kết quả tìm kiếm wordpress, bạn có thể xem bài viết này. Bạn cũng có thể kết 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ì tìm kiếm sản phẩm woocommerce, bạn cần lọc dữ liệu ở trang kết quả sau khi thực hiện 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 tiếp tham số GET &post_type=product, để chèn tham số query này trên URL bạn thêm hidden input như sau:

<input type="hidden" name="post_type" value="product" />

Sửa lại toàn bộ nội dung HTML cho Form tìm kiế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 = '<form role="search" method="get" id="searchform" action="' . esc_url( home_url( '/'  ) ) . '">
		<div>
			<label class="screen-reader-text" for="s">' . __( 'Search for:', 'woocommerce' ) . '</label>
			<input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="' . __( 'My Search form', 'woocommerce' ) . '" />
			<input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search', 'woocommerce' ) .'" />
			<input type="hidden" name="post_type" value="product" />
		</div>
	</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 cứ vị trí nào trong template sử dụng hàm get_product_search_form.

<div id="search-form">
<?php
get_product_search_form();
?>
</div>

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

<?php
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ó 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:

<form role="search" method="get" id="searchform" action="' . esc_url( home_url( '/'  ) ) . '">
	<div>
		<label class="screen-reader-text" for="s"><?php echo __( 'Search for:', 'woocommerce' ) ?> '</label>
		<input type="text" value="<?php echo get_search_query() ?>" name="s" id="s" placeholder="<?php echo __( 'My Search form', 'woocommerce' ) ?>" />
		<input type="submit" id="searchsubmit" value="<?php echo esc_attr__( 'Search', 'woocommerce' ) ?>" />
		<input type="hidden" name="post_type" value="product" />
	</div>
</form>

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 không được sử dụng và ngược lại. Nhưng nếu tồn tại cả 2 thì template luôn được ưu tiên.

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ với bạn bè bằng cách nhấn nút chia sẻ ở bên dưới. Theo dõi chúng tôi trên Twitter và Facebook

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Bài liên quan:

  • Tạo thêm custom fields cho product trong woocommerce
    Tạo thêm custom fields cho product trong woocommerce
  • Tạo Field Type cho Advanced Custom Fields WP Plugin
    Tạo Field Type cho Advanced Custom Fields WP Plugin
  • 20 plugins vận chuyển và tính phí cho WooCommerce
    20 plugins vận chuyển và tính phí cho WooCommerce
  • Tạo thêm trường trong Contact Form 7
    Tạo thêm trường trong Contact Form 7
  • Click ảo là gì? Cách Chặn click ảo và Hạn chế click tặc 80%
    Click ảo là gì? Cách Chặn click ảo và Hạn chế click tặc 80%
  • Hướng dẫn tùy chỉnh WooCommerce [A-Z]
    Hướng dẫn tùy chỉnh WooCommerce [A-Z]

Chuyên mục: Wordpress, Wordpress plugins Tìm kiếm: web bán hàng, Woocommerce, wordpress plugins

Đăng ký nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Bạn đã đăng ký thành công!

Lỗi! hãy làm lại.

thông tin của bạn được 100% bảo mật...

Tôi giúp gì cho bạn?

Nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Cám ơn bạn đã đăng ký.

Lỗi, hãy làm lại

thông tin của bạn được 100% bảo mật...

HOÀNG WEB

Địa chỉ: Tây Sơn, Phường Quang Trung, Quận Đống Đa, Hà Nội

Hotline: 0987 342 124 – 0868 292 303 (8h:00 – 21h:00)

Email: hoangweb24@gmail.com

Website: www.hoangweb.com

KẾT NỐI VỚI TÔI

  • Facebook
  • GitHub
  • YouTube

SẢN PHẨM

  • Plugin Thanh Toán Quét Mã QR Code Tự Động
  • WP2Speed – Tối ưu Google Speed
  • 23WebHost – Hosting Miễn Phí 100GB

LIÊN KẾT

  • Có nên thuê thiết kế website giá rẻ?
  • Hướng dẫn thanh toán
  • Chính sách hoàn tiền
  • Trung tâm hỗ trợ

Copyright © 2023 | All rights reserved | HOANG WEB
Mọi hình thức sao chép nội dung trên website này mà chưa được sự đồng ý đều là trái phép.