WooCommerce(Shoptmizer主题)：如何在商品目录显示预售商品‘仅预售’标签？

要在商品目录（归档页）显示预售标签，你可以通过WooCommerce的钩子函数实现，不用直接修改主题核心文件，避免更新丢失代码：

步骤1：添加自定义函数输出标签 #

你可以把下面的代码添加到子主题的functions.php文件，或者用「Code Snippets」这类自定义代码插件来添加：

add_action( 'woocommerce_before_shop_loop_item_title', 'display_pre_order_tag_on_archive', 10 );
function display_pre_order_tag_on_archive() {
    global $product;
    
    // 验证产品对象，同时判断是否处于预售状态
    if ( is_a( $product, 'WC_Product' ) && wc_product_is_on_pre_order( $product ) ) {
        // 输出标签，这里的HTML类名可以和单个商品页的预售标签保持一致，确保样式统一
        echo '<span class="pre-order-badge">仅预售</span>';
    }
}

这里用了WooCommerce官方的wc_product_is_on_pre_order()函数来判断预售状态，和你单个商品页的逻辑一致。如果你的Shoptmizer主题用了自定义的预售判断（比如自定义字段），可以把判断条件换成主题对应的逻辑，比如假设主题用了get_post_meta($product->get_id(), '_custom_pre_order', true)，就替换掉wc_product_is_on_pre_order( $product )部分。

步骤2：同步标签样式（可选） #

如果归档页的标签样式和单个商品页不一致，你可以在「外观 → 自定义 → 额外CSS」里添加对应样式，直接复制单个商品页预售标签的CSS即可，示例：

.pre-order-badge {
    background-color: #your-color;
    color: #fff;
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 4px;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
}

注意事项 #

• 不要直接修改Shoptmizer父主题的文件，用子主题或者代码插件，防止主题更新后代码丢失。
• 如果你的主题在归档页有自定义的商品结构，可能需要调整钩子的优先级（比如把10改成5或者15），让标签显示在合适的位置。

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