WooCommerce产品描述过滤改造：替换默认商品列表展示结果

核心问题分析 #

你当前的代码是手动全量查询所有产品后筛选ID并输出，没有修改WooCommerce商店页面的主查询，所以默认商品列表不会同步更新。正确的做法是通过WordPress钩子直接修改主查询逻辑，让默认商品循环自动加载筛选结果，同时大幅提升性能。

修改后的完整实现代码 #

1. PHP 核心逻辑（替换原插件PHP代码） #

function product_filter_plugin_enqueue_scripts() {
    wp_enqueue_script('product-filter-plugin-script', plugins_url('/assets/js/product-filter-plugin.js', __FILE__), array('jquery'), '1.0.0', true);
    wp_enqueue_style('product-filter-plugin-style', plugins_url('/assets/css/product-filter-plugin.css', __FILE__), array(), '1.0.0');
}
add_action('wp_enqueue_scripts', 'product_filter_plugin_enqueue_scripts');

// 拦截并修改商店页面主查询，实现描述内容筛选
function product_filter_modify_shop_query($query) {
    // 仅在商店页面、主查询、前台且存在搜索参数时生效
    if (is_shop() && $query->is_main_query() && !is_admin() && isset($_GET['search_query'])) {
        $search_query = sanitize_text_field($_GET['search_query']);
        
        // 设置搜索关键词
        $query->set('s', $search_query);
        // 强制仅搜索商品描述（post_content字段），若需要同时搜标题可删除此过滤器
        add_filter('posts_search_columns', function($columns) {
            return array('post_content');
        });
    }
}
add_action('pre_get_posts', 'product_filter_modify_shop_query');

// 短代码：仅渲染筛选表单
function product_filter_plugin_shortcode($atts) {
    ob_start();
    ?>
    <div class="product-filter-container">
        <form class="product-filter-form" action="<?php echo esc_url(get_permalink(wc_get_page_id('shop'))); ?>" method="GET">
            <input type="text" name="search_query" style="margin-bottom: 10px;" placeholder="搜索商品描述" value="<?php echo isset($_GET['search_query']) ? esc_attr($_GET['search_query']) : ''; ?>">
            <input type="submit" value="搜索">
        </form>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('product_filter', 'product_filter_plugin_shortcode');

2. JavaScript 代码（无需修改） #

/* product-filter-plugin.js */
(function($) {
    $(document).ready(function() {
      // 回车提交筛选表单
      $('.product-filter-form input[type="text"]').keypress(function(e) {
        if (e.keyCode === 13) {
          e.preventDefault();
          $('.product-filter-form').submit();
        }
      });
    });
  })(jQuery);

3. CSS 代码（无需修改，可按需调整样式） #

/* product-filter-plugin.css */
.product-filter-container {
    margin-bottom: 20px;
  }
  
  .product-filter-form input[type="text"] {
    padding: 8px;
    font-size: 16px;
  }

关键优化点说明 #

• 性能提升：用pre_get_posts钩子直接修改主查询，避免全量加载所有产品后再筛选，产品数量越多效果越明显。
• 原生展示：修改主查询后，WooCommerce的默认商品循环会自动渲染筛选结果，和原生过滤器展示效果完全一致。
• 搜索范围控制：通过posts_search_columns过滤器强制仅搜索商品描述，若需要同时搜索商品标题，删除该过滤器即可。
• 用户体验优化：表单直接提交到商店页面，同时保留输入框的历史搜索值。
• 移除冗余代码：删除了保存ID到本地文件的逻辑，无需手动维护筛选结果。

部署注意事项 #

1. 确保短代码[product_filter]已添加到商店页面的合适位置（如页面顶部）。
2. 测试前清空网站缓存，避免旧查询结果干扰。
3. 若你的主题自定义了商店页面模板，需确保模板使用WooCommerce默认循环（如woocommerce_product_loop）。

内容的提问来源于stack exchange，提问作者user22227954