如何修改WooCommerce缺货预订按钮动作并关联Formcraft表单？

1. 修改WooCommerce缺货预订按钮的动作 #

可以通过钩子替换按钮行为，覆盖商品列表页和单商品页的默认按钮：

自定义按钮为链接或触发JS #

在主题functions.php中添加以下代码，判断商品是否允许缺货预订且当前缺货，再替换按钮：

// 修改单商品页缺货预订按钮
add_action('woocommerce_single_product_summary', 'custom_backorder_add_to_cart_button', 1);
function custom_backorder_add_to_cart_button() {
    global $product;
    
    if ($product->is_on_backorder(1) && $product->backorders_allowed()) {
        remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30);
        add_action('woocommerce_single_product_summary', 'custom_backorder_button_html', 30);
    }
}

function custom_backorder_button_html() {
    // 自定义按钮动作：这里示例为触发JS弹窗，可替换为跳转链接
    echo '<button class="button alt backorder-button" onclick="openPreOrderModal()">' . __('预订咨询', 'woocommerce') . '</button>';
}

// 修改商品列表页缺货预订按钮
add_filter('woocommerce_loop_add_to_cart_link', 'custom_loop_backorder_add_to_cart_link', 10, 3);
function custom_loop_backorder_add_to_cart_link($button, $product, $args) {
    if ($product->is_on_backorder(1) && $product->backorders_allowed()) {
        $button = sprintf(
            '<button class="button %s" onclick="openPreOrderModal()">%s</button>',
            esc_attr($args['class']),
            esc_html(__('预订咨询', 'woocommerce'))
        );
    }
    return $button;
}

配合JS实现弹窗（添加到主题JS文件或单页脚本）：

function openPreOrderModal() {
    // 自定义弹窗逻辑，比如显示隐藏的表单容器
    document.getElementById('pre-order-modal').style.display = 'block';
}

2. 仅针对缺货预订商品，点击按钮调用Formcraft联系表单 #

利用Formcraft的短代码，替换缺货商品的按钮为表单触发元素：

// 单商品页替换缺货按钮为Formcraft表单触发按钮
add_action('woocommerce_single_product_summary', 'replace_backorder_button_with_formcraft', 1);
function replace_backorder_button_with_formcraft() {
    global $product;
    
    if ($product->is_on_backorder(1) && $product->backorders_allowed()) {
        remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30);
        add_action('woocommerce_single_product_summary', 'formcraft_backorder_button', 30);
    }
}

function formcraft_backorder_button() {
    // 替换为你的Formcraft表单短代码
    $form_shortcode = '[formcraft id="1"]';
    echo '
    <button class="button alt backorder-form-btn" onclick="showFormcraft()">' . __('点击预订咨询', 'woocommerce') . '</button>
    <div id="formcraft-container" style="display:none; margin-top:20px;">
        ' . do_shortcode($form_shortcode) . '
    </div>
    <script>
    function showFormcraft() {
        document.getElementById("formcraft-container").style.display = "block";
    }
    </script>
    ';
}

// 商品列表页同步修改
add_filter('woocommerce_loop_add_to_cart_link', 'loop_backorder_formcraft_btn', 10, 3);
function loop_backorder_formcraft_btn($button, $product, $args) {
    if ($product->is_on_backorder(1) && $product->backorders_allowed()) {
        $button = sprintf(
            '<button class="button %s" onclick="location.href=\'%s#formcraft-container\'">%s</button>',
            esc_attr($args['class']),
            esc_url(get_permalink($product->get_id())),
            esc_html(__('预订咨询', 'woocommerce'))
        );
    }
    return $button;
}

注意：将[formcraft id="1"]替换为你实际的Formcraft表单短代码。

3. 通过functions.php修改缺货商品的加入购物车按钮链接 #

针对列表页和单商品页，单独替换缺货商品的按钮链接：

// 修改商品列表页缺货商品的按钮链接
add_filter('woocommerce_loop_add_to_cart_link', 'custom_backorder_cart_link', 10, 3);
function custom_backorder_cart_link($button, $product, $args) {
    if ($product->is_on_backorder(1) && $product->backorders_allowed()) {
        // 替换为你的目标页面URL，示例为站点内的预订页面
        $custom_url = get_permalink(get_page_by_title('预订申请'));
        $button = sprintf(
            '<a href="%s" class="button %s">%s</a>',
            esc_url($custom_url),
            esc_attr($args['class']),
            esc_html(__('前往预订', 'woocommerce'))
        );
    }
    return $button;
}

// 修改单商品页缺货商品的按钮链接
add_action('woocommerce_single_product_summary', 'custom_single_backorder_cart_link', 1);
function custom_single_backorder_cart_link() {
    global $product;
    
    if ($product->is_on_backorder(1) && $product->backorders_allowed()) {
        remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30);
        add_action('woocommerce_single_product_summary', 'single_backorder_custom_link', 30);
    }
}

function single_backorder_custom_link() {
    $custom_url = get_permalink(get_page_by_title('预订申请'));
    echo '<a href="' . esc_url($custom_url) . '" class="button alt">' . __('前往预订', 'woocommerce') . '</a>';
}

若需跳转外部链接，直接将$custom_url赋值为目标URL即可，如$custom_url = 'https://your-site.com/pre-order-apply/';。

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