将每页产品下拉列表添加到 woocommerce

Posted 2023-05-09

【中文标题】将每页产品下拉列表添加到 woocommerce

【英文标题】：adding a products per page dropdown to woocommerce

【发布时间】：2017-08-02 08:16:36

【问题描述】：

我正在尝试在不使用插件的情况下将“每页产品”下拉列表添加到我的 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 );
    

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

谁能帮帮我？

【问题讨论】：

woocommerce中有短代码

你有一个如何使用简码添加下拉菜单的例子吗？

【参考方案1】：

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

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

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 钩子，每页包含产品数量。

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 方法。

【讨论】：

将此标记为正确的解决方案。像魅力一样工作。为了更好地了解，我使用了 Astra 主题、WP bakery builder 以及我使用 WOOF 插件的过滤。但 WOOF 不提供按页显示产品功能。所以，这个钩子对我有用。谢谢坦梅。

【参考方案2】：

我正在使用从这里获取的以下代码-

http://designloud.com/how-to-add-products-per-page-dropdown-to-woocommerce/?showmodaldialog=1#comment-1554

// Lets create the function to house our form
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );

function woocommerce_catalog_page_ordering() 
?>
<?php echo '<span class="itemsorder">Items Per Page:' ?>
    <form action="" method="POST" name="results" class="woocommerce-ordering">
    <select name="woocommerce-sort-by-columns" id="woocommerce-sort-by-columns" class="sortby" onchange="this.form.submit()">
<?php

//Get products on page reload
if  (isset($_POST['woocommerce-sort-by-columns']) && (($_COOKIE['shop_pageResults'] <> $_POST['woocommerce-sort-by-columns']))) 
        $numberOfProductsPerPage = $_POST['woocommerce-sort-by-columns'];
           else 
        $numberOfProductsPerPage = $_COOKIE['shop_pageResults'];
          

//  This is where you can change the amounts per page that the user will use  feel free to change the numbers and text as you want, in my case we had 4 products per row so I chose to have multiples of four for the user to select.
            $shopCatalog_orderby = apply_filters('woocommerce_sortby_page', array(
            //Add as many of these as you like, -1 shows all products per page
              //  ''       => __('Results per page', 'woocommerce'),
                '20'        => __('20', 'woocommerce'),
                '-1'        => __('All', 'woocommerce'),
            ));

        foreach ( $shopCatalog_orderby as $sort_id => $sort_name )
            echo '<option value="' . $sort_id . '" ' . selected( $numberOfProductsPerPage, $sort_id, true ) . ' >' . $sort_name . '</option>';
?>
</select>
</form>

<?php echo ' </span>' ?>
<?php


// now we set our cookie if we need to
function dl_sort_by_page($count) 
  if (isset($_COOKIE['shop_pageResults']))  // if normal page load with cookie
     $count = $_COOKIE['shop_pageResults'];
  
  if (isset($_POST['woocommerce-sort-by-columns']))  //if form submitted
    setcookie('shop_pageResults', $_POST['woocommerce-sort-by-columns'], time()+1209600, '/', 'www.your-domain-goes-here.com', false); //this will fail if any part of page has been output- hope this works!
    $count = $_POST['woocommerce-sort-by-columns'];
  
  // else normal page load and no cookie
  return $count;


add_filter('loop_shop_per_page','dl_sort_by_page');
add_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_page_ordering', 20 );