<% if (ob.filteredShipping.length) { %>
  <div class="flexColRows boxList border borderStacked clrP clrBr">
    <% ob.filteredShipping.forEach((option, i) => { %>
      <% option.services.forEach((service, j) => { %>
        <div>
          <div class="btnRadio width100">
            <input type="radio"
                   class="js-shippingOption"
                   id="<%= `${i}${j}` %>"
                   <% if (i===0 && j === 0) print('checked') %>
                   data-name="<%= option.name %>"
                   data-service="<%= service.name %>"
                   name="shippingOption">
            <label for="<%= `${i}${j}` %>" class="flex gutterH pad">
              <div>
                <div class="tx5 rowSm txB"><%= service.name %></div>
                <div class="tx5b clrT2 txUnb">
                  <% const price = ob.convertAndFormatCurrency(service.price, ob.metadata.pricingCurrency, ob.displayCurrency) %>
                  <%= ob.polyT('purchase.serviceDetails', { price, delivery: service.estimatedDelivery }) %>
                </div>
              </div>
            </label>
          </div>
        </div>
      <% }); %>
     <% }); %>
  </div>
<% } else { %>
  <div class="padGi flexCent">
    <h5><%= ob.polyT('purchase.noShippableAddresses') %></h5>
  </div>
<% } %>

<% if (ob.filteredShipping.length) { %>
  <div class="flexColRows boxList border borderStacked clrP clrBr">
    <% ob.filteredShipping.forEach((option, i) => {
       option.services = _.sortBy(option.services, 'price'); %>
      <% option.services.forEach((service, j) => { %>
        <div>
          <div class="btnRadio width100">
            <input type="radio"
                   class="js-shippingOption"
                   id="<%= `${i}${j}` %>"
                   <% if (i===0 && j === 0) print('checked') %>
                   data-name="<%= option.name %>"
                   data-service="<%= service.name %>"
                   name="shippingOption">
            <label for="<%= `${i}${j}` %>" class="flex gutterH pad">
              <div>
                <div class="tx5 rowSm txB"><%= option.name %>: <%= service.name %></div>
                <div class="tx5b clrT2 txUnb">
                  <% const price = ob.convertAndFormatCurrency(service.price, ob.metadata.pricingCurrency, ob.displayCurrency) %>
                  <%= ob.polyT('purchase.serviceDetails', { price, delivery: service.estimatedDelivery }) %>
                </div>
              </div>
            </label>
          </div>
        </div>
      <% }); %>
     <% }); %>
  </div>
<% } else { %>
  <div class="padGi flexCent">
    <h5><%= ob.polyT('purchase.noShippableAddresses') %></h5>
  </div>
<% } %>

Add the option title to the name of the shipping option. Sort the services by the price within the option.
Add the option title to the name of the shipping option. Sort the services by the price within the option.
