I’ve been trying to get some code to work but doesn’t seem to be firing. Think I might be missing something between versions.
I’m using the base checkout from WooCommerce plugin. Text appears at the bottom of checkout instead of buttons, but that might be a theme issue and haven’t added a CSS. Pretty sure I’ve enqueued the script right from everything I can find.
Here’s what I have:
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' );
In custom JS file
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;
}
});
}
});