Added code sample:
<article>
{exp:store:checkout
form_class="checkout_form"
form_id="checkout_form"
next="store/order-confirmation"
}
{if no_items}
{redirect="store/cart"}
{/if}
<div class="main-content">
<h1>Store</h1>
<ul class="breadcrumb text-center">
<li><a href="{path='store'}">Store</a></li>
<li><a href="{path='store/cart'}">Your Cart</a></li>
<li><a href="{path='store/customer-details'}" class="active">Customer Details</a></li>
</ul>
<hr class="main-rule">
<div class="two-thirds">
<h2>Customer Details</h2>
{if logged_out}
<p>
Already a customer? <a href="{path='account/login'}">Login</a>
</p>
{/if}
<h4>Billing Details</h4>
<div class="one-half alpha">
<p class="control-group">
<label for="billing_name">Name</label>
<input type="text" name="billing_name" value="{billing_name}" data-msg-required="Please enter your billing name." required>
</p>
</div>
<div class="one-half gamma">
<p class="control-group">
<label for="order_email">Email</label>
<input type="text" name="order_email" value="{order_email}" data-rule-email="true" data-msg-required="Please enter your billing email address." data-msg-email="Please enter a valid billing email address." required>
</p>
</div>
<div class="one-half alpha">
<p class="control-group">
<label for="billing_address1">Address</label>
<input type="text" name="billing_address1" value="{billing_address1}" data-msg-required="Please enter your billing address." required>
</p>
</div>
<div class="one-half gamma">
<p class="control-group">
<label for="billing_address2">Apt/Suite</label>
<input type="text" name="billing_address2" value="{billing_address2}">
</p>
</div>
<div class="one-half alpha">
<p class="control-group">
<label for="billing_address3">City</label>
<input type="text" name="billing_address3" value="{billing_address3}" data-msg-required="Please enter your billing city." required>
</p>
</div>
<div class="one-half gamma">
<p class="control-group{if error:billing_postcode} error{/if}">
<label for="billing_postcode">Zip Code/Postcode</label>
<input type="text" name="billing_postcode" value="{billing_postcode}" data-msg-required="Please enter your billing zip." required>
</p>
</div>
<div class="one-half alpha">
<p class="control-group">
<label for="billing_region">State/Region</label>
<span class="select-menu">
{field:billing_region}
</span>
</p>
</div>
<div class="one-half gamma">
<p class="control-group">
<label for="billing_country">Country</label>
<span class="select-menu">
{field:billing_country}
</span>
</p>
</div>
<div class="one-half alpha">
<p class="control-group">
<label for="billing_phone">Phone</label>
<input type="text" name="billing_phone" value="{billing_phone}" data-msg-required="Please enter your billing phone number." required>
</p>
</div>
<hr />
<h4>Shipping Details</h4>
<p>
<input type="checkbox" name="shipping_same_as_billing" value="0" id="shipping_same_as_billing"> Same as Billing Details
</p>
<div id="shipping_details_drawer">
{exp:member:custom_profile_data}
<div class="one-half alpha">
<p class="control-group">
<label for="shipping_name">Name</label>
<input type="text" name="shipping_name" value="{shipping_name}" data-msg-required="Please enter your shipping name." required>
</p>
</div>
<div class="one-half gamma">
</div>
<div class="one-half alpha">
<p class="control-group">
<label for="shipping_address1">Address</label>
<input type="text" name="shipping_address1" value="{shipping_address1}" data-msg-required="Please enter your shipping address." required>
</p>
</div>
<div class="one-half gamma">
<p class="control-group">
<label for="shipping_address2">Apt/Suite</label>
<input type="text" name="shipping_address2" value="{shipping_address2}">
</p>
</div>
<div class="one-half alpha">
<p class="control-group">
<label for="shipping_address3">City</label>
<input type="text" name="shipping_address3" value="{shipping_address3}" data-msg-required="Please enter your shipping city." required>
</p>
</div>
<div class="one-half gamma">
<p class="control-group">
<label for="shipping_postcode">Zip Code/Postcode</label>
<input type="text" name="shipping_postcode" value="{shipping_postcode}" data-msg-required="Please enter your shipping zip." required>
</p>
</div>
<div class="one-half alpha">
<p class="control-group">
<label for="shipping_region">State/Region</label>
<span class="select-menu">
{field:shipping_region}
</span>
</p>
</div>
<div class="one-half gamma">
<p class="control-group">
<label for="shipping_country">Country</label>
<span class="select-menu">
{field:shipping_country}
</span>
</p>
</div>
<div class="one-half alpha">
<p class="control-group">
<label for="shipping_phone">Phone</label>
<input type="text" name="shipping_phone" value="{shipping_phone}" data-msg-required="Please enter your shipping phone number." required>
</p>
</div>
</div>
{/exp:member:custom_profile_data}
{if logged_out}
<p>
{field:register_member} <label for="register_member">Register Account? <span class="note">(If your register, we'll save your info so you won't have to enter it next time!)</span></label>
</p>
{/if}
<div id="register_details_drawer">
<div class="one-half alpha">
<p class="control-group">
<label for="password">Password</label>
<input type="text" id="password" name="password" value="{password}" data-msg-required="Please enter a password." required>
</p>
</div>
<div class="one-half gamma">
<p class="control-group">
<label for="password_confirm">Confirm Password</label>
<input type="text" name="password_confirm" value="{password_confirm}" data-msg-required="Please confirm your password." required>
</p>
</div>
<div class="one-half alpha">
<p class="control-group">
<label for="username">Username</label>
<input type="text" name="username" value="{username}" data-msg-required="Please enter a username." required>
</p>
</div>
<div class="one-half gamma">
<p class="control-group">
<label for="screen_name">Screen Name</label>
<input type="text" name="screen_name" value="{screen_name}" data-msg-required="Please enter a screen name." required>
</p>
</div>
</div>
<div class="alert" style="display:none;"></div>
<p>
<a href="{path='store/cart'}" class="button">Back</a>
<button type="submit" name="next" class="button orange">Review Order</button>
</p>
<script>
$().ready(function() {
$("#checkout_form").validate({
errorLabelContainer: $("#checkout_form div.alert"),
rules: {
password_confirm: {
equalTo: "#password"
}
},
messages: {
password_confirm: {
equalTo: "Your passwords do not match."
}
}
});
});
</script>
<script>
$('#register_member').change(function() {
if (this.checked) {
$('#register_details_drawer').slideDown();
} else {
$('#register_details_drawer').slideUp();
}
});
if (!$('#register_member').is(':checked')) {
$('#register_details_drawer').hide();
}
</script>
</div>
<div class="one-third">
{order-info}
</div>
</div>
{/exp:store:checkout}
</article>