Bootstrap 4 - alpha 6 Nav Tabs

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="btn-cart" data-toggle="tab" href="#pane-cart" role="tab">Cart</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" id="btn-checkout" data-toggle="tab" href="#pane-checkout" role="tab">Checkout</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="pane-cart" role="tabpanel">
    <form class="woocommerce-cart-form" action="<?php echo esc_url( wc_get_cart_url() ); ?>" method="post">
    <p><input type="text" name="billing_phone_visible" id="billing_phone_visible" placeholder="Номер телефона *" value=""></p>
    <p><button type="submit" id="transfer" class="button" name="sb">Подтвердить</button></p>
    </form>
  </div>
  <?php $fields = $checkout->get_checkout_fields( 'billing' );
        $fields['billing_phone']['default'] = $_POST['billing_phone_visible'];
  ?>
  <div class="tab-pane" id="pane-checkout" role="tabpanel">
    <p><input type="text" name="billing_phone" id="billing_phone" placeholder="Номер телефона *" value=""></p>
  </div>
</div>

JavaScript

if($('#btn-cart').length) {
		$('#btn-cart').tab('show');
	}	
//1 вариант
if($('#transfer').length) {
		$('#transfer').click(function(e){
      $('#btn-checkout').removeClass('disabled');
			$('#btn-checkout').click();
		});
	}
//2 вариант
//if($('#transfer').length) {
//		$('#transfer').click(function(e){
//      e.preventDefault();
//      $('#btn-checkout').removeClass('disabled');
//			$('#btn-checkout').click();
      
//      var $form = $(this).closest("form");
//      $.ajax({
//      type: "POST",
//        url: $form.attr("action"),
//        data: $form.serialize()
//      });
//		});
//	}