Adding a badge to a specific shipping method

Sometimes it is nice to add a specific badge to a shipping method. The template checkout/shipping/shipping-methods/item.phtml contains various ways to add child templates to it. Some of them are generic (for all shipping methods). This playbook shows a method-specific child template.

XML layout

We are going to add a block to the shipping method tablerate_bestway. Add the following using an XML layout file loki_checkout_block_shipping_methods.xml:

<block name="loki-checkout.shipping.methods.tablerate_bestway.label-after" template="LokiCheckout_Example::most-popular-label.phtml"/>

Note that this example assumes the dummy module LokiCheckout_Example is used.

PHTML template

Next, create the template LokiCheckout_Example::most-popular-label.phtml:

<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
    <?= __('Most Popular') ?>
</span>