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.

Để nhận được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng có thể nhận được sự trợ giúp trên Twitter và Facebook

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

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

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

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: [email protected]

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.