Move shipping methods

Question

I need to move the shipping methods to the first step in the checkout but I want the "Next" button to stay at the bottom.

I can rearrange the position in shipping.html but I dont think this is the best way of doing it

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<!--Shipping method template-->
<li id="opc-shipping_method"
    class="checkout-shipping-method"
    data-bind="fadeVisible: visible(), blockLoader: isLoading"
    role="presentation">
    <div class="checkout-shipping-method">
        <div class="step-title"
             translate="'Shipping Methods'"
             data-role="title" />

        <each args="getRegion('before-shipping-method-form')" render="" />

        <div id="checkout-step-shipping_method"
             class="step-content"
             data-role="content"
             role="tabpanel"
             aria-hidden="false">
            <form id="co-shipping-method-form"
                  class="form methods-shipping"
                  if="rates().length"
                  submit="setShippingInformation"
                  novalidate="novalidate">

                <render args="shippingMethodListTemplate"/>

                <div id="onepage-checkout-shipping-method-additional-load">
                    <each args="getRegion('shippingAdditional')" render="" />
                </div>
                <div role="alert"
                     if="errorValidationMessage().length"
                     class="message notice">
                    <span text="errorValidationMessage()" />
                </div>

            </form>
            <div class="no-quotes-block"
                 ifnot="rates().length > 0"
                 translate="'Sorry, no quotes are available for this order at this time'" />
        </div>
    </div>
</li>
<li id="shipping" class="checkout-shipping-address" data-bind="fadeVisible: visible()">
    <div class="step-title" translate="'Shipping Address'" data-role="title" />
    <div id="checkout-step-shipping"
         class="step-content"
         data-role="content">

        <each if="!quoteIsVirtual" args="getRegion('customer-email')" render="" />
        <each args="getRegion('address-list')" render="" />
        <each args="getRegion('address-list-additional-addresses')" render="" />

        <!-- Address form pop up -->
        <if args="!isFormInline">
            <div class="new-address-popup">
                <button type="button"
                        class="action action-show-popup"
                        click="showFormPopUp"
                        visible="!isNewAddressAdded()">
                    <span translate="'New Address'" />
                </button>
            </div>
            <div id="opc-new-shipping-address"
                 visible="isFormPopUpVisible()"
                 render="shippingFormTemplate" />
        </if>

        <each args="getRegion('before-form')" render="" />

        <!-- Inline address form -->
        <render if="isFormInline" args="shippingFormTemplate" />
    </div>
</li>

<!--Next Button-->
<li id="opc-shipping_method"
    class="checkout-shipping-method"
    data-bind="fadeVisible: visible(), blockLoader: isLoading"
    role="presentation">
    <div class="checkout-shipping-method">
        <div  />

        <div id="checkout-step-shipping_method"
             class="step-content"
             data-role="content"
             role="tabpanel"
             aria-hidden="false">
            <form id="co-shipping-method-form"
                  class="form methods-shipping"
                  if="rates().length"
                  submit="setShippingInformation"
                  novalidate="novalidate">

                <div id="onepage-checkout-shipping-method-additional-load">
                    <each args="getRegion('shippingAdditional')" render="" />
                </div>
                <div role="alert"
                     if="errorValidationMessage().length"
                     class="message notice">
                    <span text="errorValidationMessage()" />
                </div>
                <div class="actions-toolbar" id="shipping-method-buttons-container">
                    <div class="primary">
                        <button data-role="opc-continue" type="submit" class="button action continue primary">
                            <span translate="'Next'" />
                        </button>
                    </div>
                </div>
            </form>
            <div class="no-quotes-block"
                 ifnot="rates().length > 0"
                 translate="'Sorry, no quotes are available for this order at this time'" />
        </div>
    </div>
</li>

So basically I have copied the Shipping method template section to the bottom and removed the <render args="shippingMethodListTemplate"/>

Answer 1

Check this, I made some modifications.

<!-- Shipping method template -->
<li id="opc-shipping_method" class="checkout-shipping-method" data-bind="fadeVisible: visible(), blockLoader: isLoading" role="presentation">
    <div class="checkout-shipping-method">
        <div class="step-title" translate="'Shipping Methods'" data-role="title"></div>

        <each args="getRegion('before-shipping-method-form')" render=""></each>

        <div id="checkout-step-shipping_method" class="step-content" data-role="content" role="tabpanel" aria-hidden="false">
            <form id="co-shipping-method-form" class="form methods-shipping" if="rates().length" submit="setShippingInformation" novalidate="novalidate">

                <render args="shippingMethodListTemplate"></render>

                <div id="onepage-checkout-shipping-method-additional-load">
                    <each args="getRegion('shippingAdditional')" render=""></each>
                </div>
                <div role="alert" if="errorValidationMessage().length" class="message notice">
                    <span text="errorValidationMessage()"></span>
                </div>

            </form>
            <div class="no-quotes-block" ifnot="rates().length > 0" translate="'Sorry, no quotes are available for this order at this time'"></div>
        </div>
    </div>
</li>

<!-- Shipping Address -->
<li id="shipping" class="checkout-shipping-address" data-bind="fadeVisible: visible()">
    <div class="step-title" translate="'Shipping Address'" data-role="title"></div>
    <div id="checkout-step-shipping" class="step-content" data-role="content">

        <each if="!quoteIsVirtual" args="getRegion('customer-email')" render=""></each>
        <each args="getRegion('address-list')" render=""></each>
        <each args="getRegion('address-list-additional-addresses')" render=""></each>

        <!-- Address form pop-up -->
        <if args="!isFormInline">
            <div class="new-address-popup">
                <button type="button" class="action action-show-popup" click="showFormPopUp" visible="!isNewAddressAdded()">
                    <span translate="'New Address'"></span>
                </button>
            </div>
            <div id="opc-new-shipping-address" visible="isFormPopUpVisible()" render="shippingFormTemplate"></div>
        </if>

        <each args="getRegion('before-form')" render=""></each>

        <!-- Inline address form -->
        <render if="isFormInline" args="shippingFormTemplate"></render>

        <!-- Next Button -->
        <div class="actions-toolbar" id="shipping-method-buttons-container">
            <div class="primary">
                <button data-role="opc-continue" type="submit" class="button action continue primary">
                    <span translate="'Next'"></span>
                </button>
            </div>
        </div>
    </div>
</li>