基于WooCommerce实现仅显示可售商品的URL及侧边栏按钮需求

当然可以！用URL参数来实现这个需求完全可行，而且不需要额外安装插件，只需要几行代码就能搞定。下面我一步步给你讲具体怎么做：

首先我们需要让WooCommerce识别自定义的URL参数，并根据参数过滤商品。你可以把这段代码添加到主题的functions.php文件里（或者更推荐用自定义代码片段插件，避免主题更新时代码丢失）：

add_action( 'woocommerce_product_query', 'filter_products_by_stock_status_via_url' );
function filter_products_by_stock_status_via_url( $q ) {
    // 检查URL中是否存在`show_only_in_stock`参数且值为1
    if ( isset( $_GET['show_only_in_stock'] ) && $_GET['show_only_in_stock'] == '1' ) {
        $meta_query = $q->get( 'meta_query' );
        // 添加库存状态的筛选条件，只保留"有货"的商品
        $meta_query[] = array(
            'key'     => '_stock_status',
            'value'   => 'instock',
            'compare' => '=',
        );
        $q->set( 'meta_query', $meta_query );
    }
}

这段代码的作用是：通过woocommerce_product_query钩子拦截商品列表的查询请求，当URL里带有?show_only_in_stock=1参数时，自动筛选出库存状态为“有货”的商品。

接下来我们要在侧边栏添加按钮，让用户可以切换“显示全部”和“仅显示可售商品”状态。有两种简单的实现方式：

方法一：用自定义HTML小工具 #

1. 进入WordPress后台 → 外观 → 小工具
2. 找到「自定义HTML」小工具，拖动到你的侧边栏区域
3. 粘贴以下代码（如果你的商品列表页不是默认的Shop页面，记得把链接替换成你的商品页URL）：

<div class="stock-filter-buttons">
    <a href="https://mywebsite.com/products" class="button">显示全部商品</a>
    <a href="https://mywebsite.com/products?show_only_in_stock=1" class="button">仅显示可售商品</a>
</div>

方法二：动态生成按钮（更灵活） #

如果想要按钮根据当前状态自动切换显示（比如筛选时高亮“显示全部”按钮），可以用PHP代码动态生成。你可以用代码片段插件添加这段代码，或者在主题的侧边栏模板（比如sidebar.php）里插入：

<div class="stock-filter-buttons">
    <?php
    // 获取商品列表页的URL
    $shop_url = get_permalink( wc_get_page_id( 'shop' ) );
    // 判断当前是否处于筛选状态
    $is_filtered = isset( $_GET['show_only_in_stock'] ) && $_GET['show_only_in_stock'] == '1';
    
    if ( $is_filtered ) {
        echo '<a href="' . esc_url( $shop_url ) . '" class="button button-active">显示全部商品</a>';
        echo '<a href="' . esc_url( add_query_arg( 'show_only_in_stock', '1', $shop_url ) ) . '" class="button">仅显示可售商品</a>';
    } else {
        echo '<a href="' . esc_url( $shop_url ) . '" class="button">显示全部商品</a>';
        echo '<a href="' . esc_url( add_query_arg( 'show_only_in_stock', '1', $shop_url ) ) . '" class="button button-active">仅显示可售商品</a>';
    }
    ?>
</div>

为了让按钮看起来更直观，可以给激活状态的按钮加一点样式。把这段CSS添加到主题的style.css或者自定义CSS里：

.stock-filter-buttons .button {
    margin: 5px 0;
    display: block;
    padding: 8px 12px;
    text-align: center;
    background: #f0f0f0;
    text-decoration: none;
    color: #333;
    border-radius: 4px;
}

.stock-filter-buttons .button-active {
    background: #2d7dd2;
    color: white;
}

• 如果你的网站用了缓存插件，记得清除缓存后再测试，或者在缓存设置里排除带有show_only_in_stock参数的页面，避免缓存影响筛选效果。
• 确保你的商品正确设置了库存状态：WooCommerce中，商品的「库存状态」设为“有货”，或者开启「管理库存」且库存数量大于0的商品，才会被筛选出来。

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