php - WooCommerce Fields Validation on MultiStep Checkout page


i have this problem, and need your help to resolve it. I use MultiStep Checkout form, and all seems fine, except fields validation. I have 3 steps

Billing > Payment > Order Confirmation

Issue is that when left empty required field into "Billing" step, Woocommerce allow me to go to "Payment" step, and there show me error that required field is not filled. I want that check to be executed in "Billing" step. I checked into form-checkout.php, and found that navigation is made by this JS:

<?php if ($thegem_checkout_type == 'multi-step'): ?>
(function($) {
    function active_checkout_tab($tab, isinit) {
        if ($tab.length == 0 || ($tab.hasClass('active') && !isinit)) {
            return false;

        $tab.parent().find('.checkout-step').removeClass('active before-active');
        var tab_id = $'tab-id');
        $('.checkout-contents[data-tab-content-id="' + tab_id + '"]').addClass('active');
        window.location.hash = '#' + tab_id;

    var m = window.location.hash.match(/#checkout\-(.+)/);
    if (m && $('.checkout-steps .checkout-step[data-tab-id="checkout-' + m[1] + '"]').length == 1) {
        active_checkout_tab($('.checkout-steps .checkout-step[data-tab-id="checkout-' + m[1] + '"]'), true);
    } else {
        active_checkout_tab($('.checkout-steps .checkout-step:first'), true);

    $('.checkout-steps .checkout-step').not('.disabled').click(function() {
        active_checkout_tab($(this), false);

and this is php code:

<?php if ($thegem_checkout_type == 'multi-step'): ?>
<div >
  <?php if(is_user_logged_in() || 'no' === get_option( 'woocommerce_enable_checkout_login_reminder' )): ?>
    <div data-tab-id="checkout-billing"><?php esc_html_e('1. Facturation','thegem'); ?></div>
    <div data-tab-id="checkout-payment"><?php esc_html_e('2. Paiement','thegem'); ?></div>
    <div data-tab-id="checkout-confirmation"><?php esc_html_e('3. Confirmation','thegem'); ?></div>
  <?php else: ?>
    <div data-tab-id="checkout-signin"><?php esc_html_e('1. Se connecter','thegem'); ?></div>
    <div data-tab-id="checkout-billing"><?php esc_html_e('2. Facturation','thegem'); ?></div>
    <div data-tab-id="checkout-payment"><?php esc_html_e('3. Paiement','thegem'); ?></div>
    <div data-tab-id="checkout-confirmation"><?php esc_html_e('4. Confirmation','thegem'); ?></div>
  <?php endif; ?>

So my question is how to made fields verification on first step instead of second one?

People are also looking for solutions to the problem: php - Memory usage increasing even after executing the process again


Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.