Php 编写WooCommerce多步骤签出

我一直在try 让一些代码工作，但似乎没有启动.我觉得我可能在不同版本之间漏掉了什么.

我正在使用WooCommerce插件的基本结帐.文本出现在结帐的底部，而不是按钮，但这可能是一个主题问题，并没有添加CSS.我很确定我已经把 playbook 排好了.

这就是我所拥有的:

In Function.php

add_action( 'woocommerce_after_checkout_form', 'step_controls');
function step_controls() {
    echo '
        <div class="step_controls_container">
            <a class="btn-primary step_back_to_cart" href="'.site_url("/cart", "https").'">Back to Cart</a>
            <a class="btn-primary step_next">Next</a>
            <a class="btn-primary step_prev">Previous</a>
        </div>
    ';
}
//

function cart_steps() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('cartsteps', get_stylesheet_directory_uri() . '/js/cart-steps.js');

} 
add_action( 'wp_enqueue_scripts', 'cart_steps' ); 

在自定义JS文件中

var steps = [
    {
        name: 'Billing & Shipping Details',
        selector: '#customer_details'
    },
    {
        name: 'Order Review & Payment',
        selector: '#order_review'
    }
]
var activeStep;
// Adjust the array length to match zero-base
var stepsLengthAdjusted = steps.length - 1;

// Utility functions
function initSteps() {
    // Set first checkout step
    sessionStorage.setItem('checkout_step', '0');
}
function getCurrentStep() {
    return sessionStorage.getItem('checkout_step');
}
function showCurrentStep() {
    activeStep = getCurrentStep();
    // Loop through the steps and see which is currently active
    for (let i = 0; i < steps.length; i++){
        let stepSelector = steps[i].selector;
        if ( i != activeStep ) {
            // Hide if not the current step
            $(stepSelector).hide();
        } else {
            // Show the correct step div
            $(stepSelector).fadeIn();
            // Show or hide navigation  buttons as appropriate
            $('.step_next, .step_prev').show();
            if ( getCurrentStep() == stepsLengthAdjusted ) {
                // This is the last step, so remove next button
                $('.step_next').hide();
            }
            if ( getCurrentStep() == 0 ) {
                // This is the first step, so remove previous button
                $('.step_prev').hide();
            }
        }
    }
    // Always go to the top of the steps
    $("body").get(0).scrollIntoView();
}
function nextStep() {
    if ( getCurrentStep() < stepsLengthAdjusted ) {
        var nextStep = parseInt(getCurrentStep()) + 1;
        sessionStorage.setItem('checkout_step', nextStep);
        showCurrentStep();
    }
}
function previousStep() {
    if ( getCurrentStep() > 0 ) {
        var previousStep = parseInt(getCurrentStep()) - 1;
        sessionStorage.setItem('checkout_step', previousStep);
        showCurrentStep();
    }
}

// Initialise
if ( getCurrentStep() == null ) {
    initSteps();
}
// Always show the correct step
showCurrentStep();
// Navigation
$('.step_next').click(function() {
    nextStep();
});
$('.step_prev').click(function() {
    previousStep();
});
// Hide a elements not in parent containers!
$('h3#order_review_heading').hide();

// Flush the current step when navigating away from checkout to prevent customer confusion
if ( !$('body').hasClass('woocommerce-checkout') ) {
    initSteps();
}

$('body').on('checkout_error', function(){
    for (let i = 0; i < steps.length; i++){
        let stepSelector = steps[i].selector;
        let fields = stepSelector + ' p';
        $( fields ).each(function() {
            if ( $(this).hasClass('woocommerce-invalid') ) {
                sessionStorage.setItem('checkout_step', i);
                showCurrentStep();
                return false;
            }
        });
    }
});