Separate Shipping Method from Shipping Address in Foundation Theme

• Overview
• Markup Changes for One Page Checkout
• Implementation Steps
• Previous Code
• New Code

Overview

The foundation theme has a new ability to separate the shipping method from the shipping address on the one page checkout. This will be standard in the Foundation theme going forward, however, older versions of Foundation will need to make changes to accommodate the new feature. The code changes can be referenced below. 

Markup Change Overview for One Page Checkout

• A new merge code $$CONTINUETOSHIPPINGMETHODS$$ is added to shipping-container for server side continue button. This button will be used to populate shipping methods on click.

• New shipping method container div needs is added with id "shippingmethods-container"

• New layoutarea is defined with id "OnePageCheckoutShippingMethodsArea"

• Visibilityarea with id "ShippingMethodArea" has been moved from shipping-container to above defined layoutarea i.e. "OnePageCheckoutShippingMethodsArea"

• The layoutarea with id "OnePageCheckoutShippingArea" has been moved from shipping-container to above defined div container i.e. "shippingmethods-container"

• CONTINUE button is added for this new div container

• There is also a new setting “Disable Update Shipping and Tax When Address Changed”

Implementation Steps

To begin updating your theme, navigate to Themes > Edit Foundation Theme > Pages > One Page Checkout > HTML Editor. Replace the Previous Code with the New Code listed below.

Previous Code

 <!-- END Gift Area -->
<!-- Shipping Method Area -->
<ac:layoutarea id="OnePageCheckoutShippingArea">
<ac:visibilityarea id="ShippingMethodArea">
<div class="checkout-shippingMethod shipping-content mb-2 mt-2 col-auto">
<div class="checkout-shippingMethod-header">
<div class="h4 fw-bold">
$$SHIPPINGMETHODHEADER$$
</div>
</div>
<div class="checkout-shippingMethod-body checkoutShippingMethod">

New Code to Replace the Previous Code Above

<!-- END Gift Area --> 
<!-- Next Button --> 
<div class="row row-cols-auto justify-content-end m-0"> 
<div class="next-btn shippingNextBtn"> 
$$CONTINUETOSHIPPINGMETHODS$$ 
</div> 
</div> 
<!-- END Next Button --> 
</div> 
</div> 
<!-- END Shipping -->
<!-- Shipping Methods -->
<div class="checkout-shipping step-item m-0 hide-notext" id="shippingmethods-container">
<ac:layoutarea id="OnePageCheckoutShippingMethodsArea">
<ac:visibilityarea id="ShippingMethodArea">
<div class="checkout-shipping">
<div class="checkout-shipping-header step-header row m-0 col-12">
<div class="numbadge-container col-auto align-middle">
<div class="numbadge"></div>
</div>
<div class="title h3 col-10 col-md-3 fw-bold">
$$SHIPPINGMETHODHEADER$$
</div>
<div class="step-minarea row m-0 col-12 col-md-8 align-items-center">
<div class="field-summary col-9 text-muted">
<div id="summ-shipping-method"></div>
</div>
<div class="edit-btn col-3 text-muted ms-auto text-end">Edit</div>
</div>
</div>
<div class="step-body pt-3">

</div>
</div>
</ac:visibilityarea>
</ac:layoutarea>

<div class="step-body pb-3">
<!-- Shipping Method Area -->
<ac:layoutarea id="OnePageCheckoutShippingArea">
<ac:visibilityarea id="ShippingMethodArea">
<div class="checkout-shippingMethod shipping-content mb-2 mt-2 col-auto">
<div class="checkout-shippingMethod-body checkoutShippingMethod">