如何在woocommerce商品首页添加搜索且不跳转到默认搜索页面

在 WooCommerce 中，直接在当前页面进行实时搜索可能需要使用 JavaScript 来处理搜索事件并更新页面内容。以下是一个示例代码，它可以帮助您实现在当前页进行实时搜索的功能：

<form role="search" method="get" class="woocommerce-product-search" action="">      <label class="screen-reader-text" for="woocommerce-product-search-field"><?php _e( 'Search for:', 'woocommerce' ); ?></label>      <input type="search" id="woocommerce-product-search-field" class="search-field" placeholder="<?php echo esc_attr__( 'Search products...', 'woocommerce' ); ?>" value="<?php echo get_search_query(); ?>" name="sp" />      <input type="hidden" name="post_type" value="product" />      <button type="submit" value="<?php echo esc_attr_x( 'Search', 'submit button', 'woocommerce' ); ?>"><?php echo esc_html_x( 'Search', 'submit button', 'woocommerce' ); ?></button>  </form>    <div id="woocommerce-product-search-results"></div>    <script>      (function($) {          var $searchField = $('#woocommerce-product-search-field');          var $searchResults = $('#woocommerce-product-search-results');            $searchField.on('input', function() {              var searchTerm = $searchField.val();                if (searchTerm.length >= 3) {                  $.ajax({                      url: '<?php echo esc_url( admin_url('admin-ajax.php') ); ?>',                      type: 'GET',                      data: {                          action: 'woocommerce_ajax_product_search',                          term: searchTerm                      },                      success: function(data) {                          $searchResults.html(data);                      }                  });              } else {                  $searchResults.empty();              }          });      })(jQuery);  </script>  

请将上述代码添加到archive-product.php文件中，以在当前页面的顶部添加搜索框并实现实时搜索功能。

这段代码通过使用JavaScript和Ajax来监听搜索框的输入，并在输入达到指定长度时（这里设置为3个字符）发起搜索请求。搜索请求将通过Ajax发送到WordPress后端，并返回搜索结果，然后将结果显示在id为”woocommerce-product-search-results”的元素中。

或者不适用js来实现，将以下代码加入到主题的functions.php文件里：

function woo_custom_pre_get_posts_query( $q ) {  if ( ! $q->is_main_query() ) return;    if ( ! $q->is_post_type_archive() ) return;      if ( ! is_admin() && is_shop() && isset($_GET['sp']) && $_GET['sp'] ) {  $q->set( 's', $_GET['sp']);  }    remove_action( 'pre_get_posts', 'custom_pre_get_posts_query' );    }    add_action( 'pre_get_posts', 'woo_custom_pre_get_posts_query' );

就是在当前页面传一个sp搜索参数来获取搜索结果。

来源地址：如何在woocommerce商品首页添加搜索且不跳转到默认搜索页面

转载声明：本站文章若无特别说明，皆为原创，转载请注明来源：www.88531.cn资享网，谢谢！^^