I'm building a one-page WordPress site using WooCommerce for e-commerce functionality. I have a shopping cart that opens in a Bootstrap modal. When a user clicks "Proceed to Checkout," I want to load the WooCommerce checkout form into the same modal via AJAX, instead of redirecting to a separate checkout page. What I've Done: 1. Shopping Cart Template (shopping-bag.php): <div class="modal-header"> <h4 class="modal-title" id="cartModalLabel">Shopping Cart</h4> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <div id="cartContent"> <?php foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) { $_product = $cart_item['data']; // Display cart items } ?> </div> <div id="checkoutContent" style="display: none;"> <!-- Checkout form will be loaded here --> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button> <button type="button" id="proceedToCheckoutButton" class="btn btn-primary" onclick="proceedToCheckout()">Proceed to Checkout</button> <button type="button" id="goBackToCartButton" class="btn btn-secondary" style="display: none;" onclick="goBackToCart()">Go Back</button> </div> 2. JavaScript Function to Load Checkout via AJAX: function proceedToCheckout() { fetch(woocommerce_params.ajax_url, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: new URLSearchParams({ action: 'load_checkout_form' }) }) .then(response => response.json()) .then(data => { if (data.success) { // Hide cart content and show checkout form document.getElementById('cartContent').style.display = 'none'; document.getElementById('checkoutContent').innerHTML = data.data.html; document.getElementById('checkoutContent').style.display = 'block'; // Initialize WooCommerce checkout scripts initializeCheckoutScripts(); // Toggle buttons document.getElementById('proceedToCheckoutButton').style.display = 'none'; document.getElementById('goBackToCartButton').style.display = 'block'; } else { console.error('Error loading checkout form:', data); } }) .catch(error => console.error('AJAX error:', error)); } function goBackToCart() { // Show cart content and hide checkout form document.getElementById('cartContent').style.display = 'block'; document.getElementById('checkoutContent').style.display = 'none'; // Toggle buttons document.getElementById('proceedToCheckoutButton').style.display = 'block'; document.getElementById('goBackToCartButton').style.display = 'none'; } function initializeCheckoutScripts() { if (typeof jQuery !== 'undefined' && typeof wc_checkout_params !== 'undefined') { jQuery('body').trigger('update_checkout'); jQuery('form.checkout').wc_checkout_form(); } else { console.error('WooCommerce checkout scripts are not available.'); } } 3. PHP Function to Handle AJAX Request (functions.php): function load_checkout_form() { ob_start(); echo do_shortcode('[woocommerce_checkout]'); $html = ob_get_clean(); wp_send_json_success(['html' => $html]); wp_die(); } add_action('wp_ajax_load_checkout_form', 'load_checkout_form'); add_action('wp_ajax_nopriv_load_checkout_form', 'load_checkout_form'); 4. Enqueue WooCommerce Scripts and Styles (functions.php): function enqueue_woocommerce_scripts() { // Enqueue WooCommerce styles wp_enqueue_style('woocommerce-general'); wp_enqueue_style('woocommerce-layout'); wp_enqueue_style('woocommerce-smallscreen'); // Enqueue WooCommerce scripts wp_enqueue_script('wc-checkout'); } add_action('wp_enqueue_scripts', 'enqueue_woocommerce_scripts'); Problem: When I click "Proceed to Checkout," the modal remains empty or shows the raw HTML structure of the checkout blocks without rendering the form. The checkout form doesn't function correctly, and necessary scripts don't seem to initialize. window.wc or window.wc.checkout is undefined, so I can't initialize the checkout scripts properly. What I've Tried: Ensured WooCommerce scripts and styles are enqueued. Attempted to initialize the checkout scripts after loading the form. Checked for JavaScript errors; none are present. Additional Information: Using the latest version of WooCommerce. Custom one-page theme. Modal implemented with Bootstrap 5. Prefer not to use jQuery, but WooCommerce scripts depend on it. Question: How can I properly load the WooCommerce checkout form into a modal via AJAX, ensuring all necessary scripts are initialized so the form renders and functions correctly? Is there a recommended way to achieve this, or are there limitations with loading the WooCommerce checkout form via AJAX into a modal? Any help would be appreciated.