Black Friday & Cyber Monday SUPER SALE ALL WEEK:
Grab 40% OFF on plugins
Days
Hours
Minutes
Seconds

How To Customize Shipping Method Radio Button Styles in WooCommerce?

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.

How To Customize Shipping Method Radio Button Styles in WooCommerce? - Tyche Softwares

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.

How To Customize Shipping Method Radio Button Styles in WooCommerce? - Tyche Softwares

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.

Browse more in: Code Snippets, WooCommerce How Tos, WooCommerce Tutorials

Share It:

Subscribe
Notify of
0 Comments
Newest
Oldest
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x