The shipping method list allows the user to select the shipping method they want for their order. It displays, for each method, the method's name and price.
Checkout page shipping step (by default).
It is possible to have 0 available shipping methods in some rare circumstances. Most of the time, there will be at least one method to select from.
<aside> ℹ️ Usually, styling this element takes from-to**: 3-5h**
</aside>
The CheckoutDeliveryOptions component is responsible for rendering the shipping options. It is rendered in the CheckoutShipping component.
You will likely also need to change the CheckoutDeliveryOption component. This is responsible for rendering the individual options.
By default, we have checkboxes near each delivery method, but often in the designs radio buttons are requested, the easiest way to implement a radio look like a button is to add SVG with a mod which will determine the selected/unselected state, see how it is performed for address preview cards.
CheckoutDeliveryOption.override.second.scss example