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

在 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搜索参数来获取搜索结果。