修改WooCommerce缺货商品"Read More"按钮：跳转特定页或Lightbox弹窗

嘿，这个需求完全能搞定！我给你整理了两种实用的实现方案，分别对应跳转指定URL和触发Lightbox弹窗的场景，都是纯代码实现，不用额外装插件：

方案一：将"Read More"跳转至指定页面/URL #

WooCommerce默认给缺货商品显示的"Read More"按钮会跳转到单品页，我们可以通过钩子直接替换它的链接：

• 把下面的代码添加到你的主题functions.php文件里，或者用自定义代码插件（避免主题更新丢失代码）：

add_filter( 'woocommerce_loop_add_to_cart_link', 'custom_outofstock_read_more_link', 10, 2 );
function custom_outofstock_read_more_link( $button_html, $product ) {
    // 检查商品是否处于缺货状态
    if ( ! $product->is_in_stock() ) {
        // 替换成你想要跳转的目标URL，比如你的补货通知页面
        $target_url = 'https://your-custom-page.com';
        // 可选：修改按钮上的文字，默认是"Read More"
        $button_text = __( '了解补货信息', 'woocommerce' );
        // 重新生成按钮的HTML结构
        $button_html = sprintf(
            '<a href="%s" class="button product_type_simple add_to_cart_button ajax_add_to_cart">%s</a>',
            esc_url( $target_url ),
            esc_html( $button_text )
        );
    }
    return $button_html;
}

• 简单说下这段代码的作用：它会拦截商品循环里的按钮渲染逻辑，一旦检测到商品缺货，就把按钮的链接换成你指定的地址，还能顺便改按钮文字，记得把$target_url换成你实际要跳转的页面地址就行。

方案二：触发Lightbox弹窗展示自定义提示消息 #

如果不想跳转页面，而是想弹出一个提示框，需要结合PHP、CSS和JS来实现，步骤如下：

1. 先修改缺货商品的按钮，让它变成触发弹窗的按钮（不再跳转）：

add_filter( 'woocommerce_loop_add_to_cart_link', 'outofstock_read_more_lightbox', 10, 2 );
function outofstock_read_more_lightbox( $button_html, $product ) {
    if ( ! $product->is_in_stock() ) {
        // 自定义按钮文字和提示消息
        $button_text = __( '查看详情', 'woocommerce' );
        $custom_message = __( '抱歉，该商品目前暂时缺货，您可以通过客服联系我们了解补货时间哦！', 'woocommerce' );
        // 生成带自定义类和消息数据的按钮
        $button_html = sprintf(
            '<button class="button product_type_simple outofstock-lightbox-trigger" data-message="%s">%s</button>',
            esc_attr( $custom_message ),
            esc_html( $button_text )
        );
    }
    return $button_html;
}

2. 添加弹窗的HTML结构和基础样式，把这段代码放到主题的footer.php文件末尾，或者用钩子注入到页面底部：

<!-- 缺货提示弹窗结构 -->
<div id="outofstock-lightbox" class="lightbox">
    <div class="lightbox-content">
        <span class="lightbox-close">&times;</span>
        <p id="lightbox-message"></p>
    </div>
</div>

<style>
/* 弹窗样式可以根据你的主题风格调整 */
.lightbox {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
}

.lightbox-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 450px;
    text-align: center;
    position: relative;
}

.lightbox-close {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 24px;
    color: #999;
    cursor: pointer;
}

.lightbox-close:hover {
    color: #333;
}
</style>

3. 最后添加JavaScript来控制弹窗的显示和隐藏，同样放到footer.php里：

<script>
document.addEventListener('DOMContentLoaded', function() {
    const triggerButtons = document.querySelectorAll('.outofstock-lightbox-trigger');
    const lightbox = document.getElementById('outofstock-lightbox');
    const messageElement = document.getElementById('lightbox-message');
    const closeButton = document.querySelector('.lightbox-close');

    // 点击按钮显示弹窗并加载自定义消息
    triggerButtons.forEach(button => {
        button.addEventListener('click', function() {
            const message = this.getAttribute('data-message');
            messageElement.textContent = message;
            lightbox.style.display = 'block';
        });
    });

    // 点击关闭按钮隐藏弹窗
    closeButton.addEventListener('click', function() {
        lightbox.style.display = 'none';
    });

    // 点击弹窗外部区域关闭弹窗
    window.addEventListener('click', function(event) {
        if (event.target === lightbox) {
            lightbox.style.display = 'none';
        }
    });
});
</script>

• 这个方案的逻辑是：先把缺货商品的"Read More"按钮改成一个普通按钮，存储好要显示的提示消息；然后添加弹窗的HTML和样式；最后用JS监听按钮点击事件，弹出窗口并显示自定义消息，同时支持点击关闭按钮或弹窗外部关闭。你可以根据自己的主题风格调整弹窗的样式，或者修改提示文本。

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