如何为Woocommerce添加默认激活的全部产品标签页？

核心实现思路 #

• 在标签导航最前方添加「全部产品」标签并标记active类
• 新增对应#all的内容块，查询并展示所有产品
• 调整页面初始化逻辑，默认显示「全部产品」内容，优化标签切换交互

优化后的完整代码 #

<?php
// 获取产品分类（仅显示有产品的分类）
$categories = get_terms( array(
    'taxonomy' => 'product_cat',
    'hide_empty' => true,
) );

// 输出标签容器
echo '<div class="tabs-container">';
    // 标签导航
    echo '<ul class="tabs">';
        // 默认激活的全部产品标签
        echo '<li class="tab active"><a href="#all">全部产品</a></li>';
        foreach ( $categories as $category ) {
            echo '<li class="tab"><a href="#' . esc_attr( $category->slug ) . '">' . esc_html( $category->name ) . '</a></li>';
        }
    echo '</ul>';

    // 全部产品内容块（默认显示）
    echo '<div id="all" class="tab-content car" style="display: flex;">';
        ?>
        <h1>产品</h1>
        <div class="post-intro">要不要给您看点便宜货？ <img src="https://images.all-free-download.com/images/graphicwebp/road_tested_208353.webp" alt=""></div>
        <?php
        // 查询全部产品，可修改posts_per_page控制显示数量
        $all_products_args = array(
            'post_type' => 'product',
            'posts_per_page' => -1,
            'post_status' => 'publish'
        );
        $all_products_query = new WP_Query( $all_products_args );

        if ( $all_products_query->have_posts() ) {
            while ( $all_products_query->have_posts() ) {
                $all_products_query->the_post();
                $product = wc_get_product( get_the_ID() );
                ?>
                <div class="post-cont">
                    <?php if ( has_post_thumbnail() ) : ?>
                        <img src="<?php echo esc_url( get_the_post_thumbnail_url( get_the_ID(), 'full' ) ); ?>" class="card-image" />
                    <?php endif; ?><br>
                    <div class="post-details">
                        <div class="post-title">
                            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                        </div>
                        <div class="shop-button-cont">
                            <div class="shop-button"><a href="<?php the_permalink(); ?>">立即购买</a></div>
                            <?php if ( $product->is_on_sale() ) : ?>
                                <div class="sale-prise"><?php echo esc_html( $product->get_sale_price() ); ?></div>
                            <?php endif; ?>
                            <div class="reg-prise"><?php echo esc_html( $product->get_regular_price() ); ?></div>
                        </div>
                    </div>
                </div>
                <?php
            }
            wp_reset_postdata();
        } else {
            echo '<p>暂无产品</p>';
        }
    echo '</div>';

    // 分类产品内容块（默认隐藏）
    foreach ( $categories as $category ) {
        $category_products_args = array(
            'post_type' => 'product',
            'tax_query' => array(
                array(
                    'taxonomy' => 'product_cat',
                    'field' => 'slug',
                    'terms' => $category->slug,
                ),
            ),
            'post_status' => 'publish'
        );
        $category_products_query = new WP_Query( $category_products_args );

        echo '<div id="' . esc_attr( $category->slug ) . '" class="tab-content car" style="display: none;">';
            if ( $category_products_query->have_posts() ) {
                while ( $category_products_query->have_posts() ) {
                    $category_products_query->the_post();
                    $product = wc_get_product( get_the_ID() );
                    ?>
                    <div class="post-cont">
                        <?php if ( has_post_thumbnail() ) : ?>
                            <img src="<?php echo esc_url( get_the_post_thumbnail_url( get_the_ID(), 'full' ) ); ?>" class="card-image" />
                        <?php endif; ?><br>
                        <div class="post-details">
                            <div class="post-title">
                                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                            </div>
                            <div class="shop-button-cont">
                                <div class="shop-button"><a href="<?php the_permalink(); ?>">立即购买</a></div>
                                <?php if ( $product->is_on_sale() ) : ?>
                                    <div class="sale-prise"><?php echo esc_html( $product->get_sale_price() ); ?></div>
                                <?php endif; ?>
                                <div class="reg-prise"><?php echo esc_html( $product->get_regular_price() ); ?></div>
                            </div>
                        </div>
                    </div>
                    <?php
                }
                wp_reset_postdata();
            } else {
                echo '<p>该分类暂无产品</p>';
            }
        echo '</div>';
    }
echo '</div>';
?>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const tabs = document.querySelectorAll(".tabs li");
    const tabContents = document.querySelectorAll(".tab-content");

    tabs.forEach(tab => {
        tab.addEventListener("click", function() {
            const tabId = this.querySelector("a").getAttribute("href");
            
            // 隐藏所有内容块
            tabContents.forEach(content => content.style.display = "none");
            // 显示当前选中的内容块
            document.querySelector(tabId).style.display = "flex";
            
            // 更新标签激活状态
            tabs.forEach(t => t.classList.remove("active"));
            this.classList.add("active");
        });
    });
});
</script>

关键修改说明 #

1. 默认激活逻辑：
   • 「全部产品」标签添加active类，对应内容块初始设置display: flex;，其他分类内容块默认隐藏，页面加载直接展示全部产品
2. 代码安全性与兼容性优化：
   • 使用WooCommerce内置方法get_sale_price()、get_regular_price()获取价格，替代直接读取元数据，适配WooCommerce版本更新
   • 添加esc_attr()、esc_html()等安全函数，避免XSS风险
   • 修复原代码中所有产品显示同一缩略图的问题，改为展示每个产品自身的缩略图
3. 交互逻辑简化：
   • 移除冗余条件判断，统一处理所有标签的切换逻辑，代码更简洁易维护

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