创建WooCommerce产品每页数量下拉菜单时遇语法错误

错误原因分析 #

1. URL格式错误：原代码直接生成?perpage=$value作为下拉选项值，当页面已有其他GET参数（如排序、分类参数）时，会出现双重?的无效URL（比如?product_cat=xxx?perpage=25），导致JS解析报错Uncaught SyntaxError: Unexpected number。
2. 查询条件覆盖不全：pre_get_posts里仅判断了is_post_type_archive('product')，但WooCommerce的产品分类页、标签页不会触发这个条件，导致这些页面的产品数量无法修改。
3. 空值处理缺失：当未选择任何选项时，$perPage为空，直接设置给posts_per_page会导致查询异常，默认数量无法正常生效。

修复后的完整代码 #

if (!function_exists('tf_display_products_per_page_dropdown_on_shop')) :

    add_action('woocommerce_after_shop_loop', 'tf_display_products_per_page_dropdown_on_shop', 25);

    function tf_display_products_per_page_dropdown_on_shop() {
        $current_per_page = filter_input(INPUT_GET, 'perpage', FILTER_SANITIZE_NUMBER_INT);
        // 获取当前页面所有GET参数，保留原有筛选条件
        $current_query_args = $_GET;
        unset($current_query_args['perpage']);

        $per_pages_options = array(
            ''    => '每页产品数',
            '12'  => '显示12个产品',
            '20'  => '显示20个产品',
            '50'  => '显示50个产品',
            '100' => '显示100个产品',
            '-1'  => '显示全部产品'
        );

        echo '<div class="woocommerce-perpage" style="float:right">';
            echo '<select onchange="if(this.value) window.location.href=this.value">';

            foreach ($per_pages_options as $value => $label) :
                // 生成包含原有参数的正确URL
                $new_query_args = $current_query_args;
                if (!empty($value)) {
                    $new_query_args['perpage'] = $value;
                }
                $option_value = add_query_arg($new_query_args, get_permalink());
                // 匹配选中状态，统一类型避免判断偏差
                $selected = selected((string)$current_per_page, $value, false);
                echo "<option {$selected} value='{$option_value}'>{$label}</option>";
            endforeach;

            echo '</select>';
        echo '</div>';
    }

endif;

if (!function_exists('tf_change_products_query_for_page')) :

    add_action('pre_get_posts', 'tf_change_products_query_for_page');

    function tf_change_products_query_for_page($query) {
        $per_page = filter_input(INPUT_GET, 'perpage', FILTER_SANITIZE_NUMBER_INT);
        // 获取WooCommerce默认每页产品数量
        $default_per_page = get_option('posts_per_page');

        // 覆盖所有产品列表页面：商城主页、产品分类、产品标签
        if ($query->is_main_query() && !is_admin() && (is_shop() || is_product_category() || is_product_tag())) :
            // 处理空值和全量显示逻辑
            if (empty($per_page)) {
                $query->set('posts_per_page', $default_per_page);
            } elseif ($per_page === '-1') {
                $query->set('posts_per_page', -1);
            } else {
                $query->set('posts_per_page', (int)$per_page);
            }
        endif;
    }

endif;

修复要点说明 #

• URL正确生成：使用add_query_arg()函数整合现有GET参数，确保新URL格式合法，同时保留排序、分类等用户已选的筛选条件。
• 扩展查询覆盖范围：将判断条件扩展为is_shop() || is_product_category() || is_product_tag()，覆盖所有WooCommerce产品展示页面。
• 完善参数逻辑：增加空值与全量显示的处理分支，空值时调用系统默认数量，避免查询异常。

内容的提问来源于stack exchange，提问作者Marcel du Plessis