Search code examples
magento2

Adding Custom Logos to Shipping Methods in Magento

¿How can I add custom logos to the shipping methods in Magento? I need specific logos to appear for each shipping method during the checkout process. What is the best way to achieve this, and where should I make the code modifications in Magento?

Solution

  • It would be mostly CSS and knockout html work. Use a CSS selector with the custom attribute match.

    The original implementation of the template is in knockout template

    vendor/magento/module-checkout/view/frontend/web/template/shipping-address/shipping-method-item.html
    1. Override the html with your theme, add attr attribute. attr is the knockout attribute to update node attributes.
    <tr class="row"
    click="element.selectShippingMethod"
    attr="'data-carrier-code': method.carrier_code">
    1. Use tr.row[data-carrier-code="my_super_carrier"] or similar within CSS.
    2. Use CSS background, padding, margin to put things together.

    Good luck