php - 向 woocommerce 添加每页产品下拉列表

Question

我正在尝试在不使用插件的情况下将“每页产品”下拉列表添加到我的 woocommerce 店面子主题中。我将以下代码添加到我的functions.php source

add_action( 'woocommerce_before_shop_loop', 'ps_selectbox', 25 );
function ps_selectbox() {
    $per_page = filter_input(INPUT_GET, 'perpage', FILTER_SANITIZE_NUMBER_INT);     
    echo '<div class="woocommerce-perpage">';
    echo '<span>Per Page: </span>';
    echo '<select onchange="if (this.value) window.location.href=this.value">';   
    $orderby_options = array(
        '8' => '8',
        '16' => '16',
        '32' => '32',
        '64' => '64'
    );
foreach( $orderby_options as $value => $label ) {
    echo "<option ".selected( $per_page, $value )." value='?perpage=$value'>$label</option>";
}
echo '</select>';
echo '</div>';
}


add_action( 'pre_get_posts', 'ps_pre_get_products_query' );
function ps_pre_get_products_query( $query ) {
    $per_page = filter_input(INPUT_GET, 'perpage', FILTER_SANITIZE_NUMBER_INT);
    if( $query->is_main_query() && !is_admin() && is_post_type_archive( 'product' ) ) {
        $query->set( 'posts_per_page', $per_page );
    }
}

当我这样做时，会显示下拉框，但我选择的任何选项都会带我回到主题的首页。

有人可以帮助我吗？

Answer 1

You can add the below codes into functions.php file. Reference:

第一步是在商店存档页面上显示一个选择框。使用一些基本的 php，我们可以通过 woocommerce_before_shop_loop Hook 回显选择框。

add_action( 'woocommerce_before_shop_loop', 'ps_selectbox', 25 );
function ps_selectbox() {
    $per_page = filter_input(INPUT_GET, 'perpage', FILTER_SANITIZE_NUMBER_INT);     
    echo '<div class="woocommerce-perpage">';
    echo '<span>Per Page: </span>';
    echo '<select onchange="if (this.value) window.location.href=this.value">';   
    $orderby_options = array(
        '8' => '8',
        '16' => '16',
        '32' => '32',
        '64' => '64'
    );
    foreach( $orderby_options as $value => $label ) {
        echo "<option ".selected( $per_page, $value )." value='?perpage=$value'>$label</option>";
    }
    echo '</select>';
    echo '</div>';
}

添加了一些内联 jQuery，因此每次更改选择框时，“每页产品”变量都会发送到浏览器。

filter_input() 函数获取外部变量，在本例中是要显示并清理的产品数量。

现在一切就绪，我们可以通过“get”方法运行 pre_get_posts Hook ，并显示每页的产品数量。

add_action( 'pre_get_posts', 'ps_pre_get_products_query' );
function ps_pre_get_products_query( $query ) {
   $per_page = filter_input(INPUT_GET, 'perpage', FILTER_SANITIZE_NUMBER_INT);
   if( $query->is_main_query() && !is_admin() && is_post_type_archive( 'product' ) ){
        $query->set( 'posts_per_page', $per_page );
    }
}

这是为您的 WooCommerce 商店添加“每页产品”下拉列表的最简单方法，您也可以使用 ajax 方法。