Elementor弹窗内WooCommerce结账表单无法正常显示问题求助

问题根因 #

你遇到的问题核心是Elementor弹窗默认在页面初始加载时就预渲染了[woocommerce_checkout]短代码内容，此时还没有执行后续的ajax加购操作，WooCommerce购物车会话数据未更新，初始渲染的结账表单是空的。加购操作仅更新了后端会话，没有触发弹窗内容的同步刷新，因此首次点击结账弹出的是预渲染的旧内容，整页刷新后页面重新拉取了最新会话数据，表单才正常显示。

无需整页刷新的ajax修复方案 #

你可以通过动态拉取最新结账表单注入弹窗的方式解决，不需要整页重载，步骤如下：

• 第一步：关闭对应Elementor弹窗的预加载开关，取消页面初始渲染弹窗内容的逻辑。
• 第二步：添加自定义PHP代码，注册ajax接口用于返回最新的结账表单渲染结果，代码可放在子主题functions.php文件或自定义代码插件中：

// 注册前台ajax接口，支持登录/未登录用户调用
add_action('wp_ajax_nopriv_get_latest_checkout', 'ajax_get_latest_checkout_form');
add_action('wp_ajax_get_latest_checkout', 'ajax_get_latest_checkout_form');
function ajax_get_latest_checkout_form() {
    echo do_shortcode('[woocommerce_checkout]');
    wp_die();
}

• 第三步：添加自定义JS代码，绑定结账按钮点击事件，点击时先拉取最新表单再触发弹窗显示，代码可放在主题自定义JS区域或Elementor全局自定义代码中：

jQuery(function($) {
    // 替换为你站点实际的结账按钮类名、弹窗内容容器类名、弹窗ID
    const CHECKOUT_BTN = '.checkout-btn';
    const MODAL_CONTENT = '.elementor-popup-modal .elementor-widget-container';
    const POPUP_ID = 123; // 替换为你的Elementor弹窗数字ID

    $(document).on('click', CHECKOUT_BTN, function(e) {
        e.preventDefault();
        $.ajax({
            url: wc_add_to_cart_params.ajax_url,
            type: 'POST',
            data: { action: 'get_latest_checkout' },
            success: function(formHtml) {
                $(MODAL_CONTENT).html(formHtml);
                elementorProFrontend.modules.popup.showPopup({ id: POPUP_ID });
            }
        });
    });
});

• 第四步：替换JS代码中三个占位符的实际参数，保存后清空缓存测试即可。

适配说明 #

该方案完全适配你使用的WordPress 5.8、WooCommerce 5.6.0版本，不需要修改原有WooCommerce ajax加购的配置，不会影响站点其他功能。

内容的提问来源于stack exchange，提问作者Kenneth Angel Ramirez