Magento 2 Checkout – How to Add Custom Styling to Radio Buttons in Shipping Method Section

checkoutfrontendmagento2

I am trying to add a custom style to radio buttons in the shipping method on the magento 2 checkout.

Now normally I would do something like this…

        [type="radio"]:checked,
        [type="radio"]:not(:checked) {
            position: absolute;
            left: -9999px;
        }

        [type="radio"]:checked + label,
        [type="radio"]:not(:checked) + label {
            position: relative;     
            padding-left: 28px;
            cursor: pointer;
            line-height: 20px;
            display: inline-block;
            color: #666;
        } 

        [type="radio"]:checked + label:before,
        [type="radio"]:not(:checked) + label:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 18px;
            height: 18px;
            border: 1px solid #ddd;
            border-radius: 100%;
            background: #fff;
        }

        [type="radio"]:checked + label:after,
        [type="radio"]:not(:checked) + label:after {
            content: '';
            width: 12px;
            height: 12px;
            background: @color-coral;
            position: absolute;
            top: 4px;
            left: 4px;
            border-radius: 100%;
            -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
        }

        [type="radio"]:not(:checked) + label:after {
            opacity: 0;
            -webkit-transform: scale(0);
            transform: scale(0);
        }

        [type="radio"]:checked + label:after {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1);
        }

… but kindly Magento puts this input into a table with no label.

How would suggest I style the radio button?

I am happy to make changes to the template files is necessary but I don't really understand where to look or what to change.

Any suggestions would be met with much gratitude.

Best Answer

Override shipping-method-item.html in your custom theme

From:

vendor/magento/module-checkout/view/frontend/web/template/shipping-address/shipping-method-item.html

To:

app/design/frontend/{Vendor}/{theme}/Magento_Checkout/web/template/shipping-address/shipping-method-item.html

Here you can add <label> after <input type="radio"> for custom styling radio button

...
...
<td class="col col-method">
    <input type="radio"
           class="radio"
           ifnot="method.error_message"
           ko-checked="element.isSelected"
           ko-value="method.carrier_code + '_' + method.method_code"
           attr="'aria-labelledby': 'label_method_' + method.method_code + '_' + method.carrier_code + ' ' + 'label_carrier_' + method.method_code + '_' + method.carrier_code,
                'checked': element.rates().length == 1 || element.isSelected" />
    <div class="label"></div>
</td>
...
...

Run this commands after override html file in your theme

php bin/magento setup:static-content:deploy
php bin/magento cache:flush
Related Topic