每页添加产品下拉菜单到woocommerce [英] adding a products per page dropdown to woocommerce

问题描述

我试图在不使用插件的情况下向我的woocommerce店面子主题中添加每页产品数"下拉列表.我正在将以下代码添加到我的函数中.php源代码

I'm trying to add a 'products per page' dropdown to my woocommerce storefront child theme without using a plugin. I'm adding the below code to my 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 );
    }
}

执行此操作时，会显示下拉框，但是我选择的任何选项只会带我回到主题的首页.

When I do this, the drop down box shows but any option I choose just takes me back to the front page of my theme.

有人可以帮助我吗?

推荐答案

您可以将以下代码添加到 functions.php 文件中. 参考:

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

The first step is to display a select box on the shop archive page. With some basic php we can echo a select box via the 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()函数获取外部变量，在这种情况下，该变量为要展示和消毒的产品数量.

The filter_input() function gets the external variable which in this case is the number of products to show and sanitizes it.

现在一切就绪，我们可以通过获取"方法运行每页产品数的pre_get_posts钩子.

Now everything is in place we can run the pre_get_posts hook with number of products per page via the "get" method.

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方法进行替换.

This is the most simpliest of methods to add a "products per page" dropdown for your WooCommerce store, alternativle you could go about using an ajax method.

这篇关于每页添加产品下拉菜单到woocommerce的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！