在 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搜索参数来获取搜索结果。
创作不易，用心坚持，请喝一怀爱心咖啡！继续坚持创作~~
