Looking to customize the shipping method radio button styles like making the radio button size a little bigger and also adding the box shadow to provide a clean separation between radio buttons on the WooCommerce cart page, then the below snippet works well for you.
add_action('wp_head', 'ts_cart_shipping_method_radio_button_styles');
function ts_cart_shipping_method_radio_button_styles() {
if (is_cart()) {
echo '<style>
ul#shipping_method input {
height: 18px !important;
background: #ff0000; /* Red background */
border: 2px solid #777;
height: 1.5em;
width: 1.5em;
border-radius: 100%;
vertical-align: text-bottom;
position: relative;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Box shadow for visual distinction */
}
</style>';
}
}
Output
The below output shows that the size of the radio button for the shipping method has increased along with its box shadow.
Read Related Article: How to Customize the “Proceed To Checkout” Redirect Link in WooCommerce?
On the WooCommerce cart page, the radio buttons are not styled and there is no box shadow effect on them by default.
You can also customize the selected shipping methods title in WooCommerce cart which will change the color of the text based on the selected shipping method radio buttons. This can be achieved by using CSS code to target the specific shipping method and change its title color.
