WooCommerce Checkout Radio Buttons Missing After WordPress 6.9 Update? Fix CSS Styling Loss

WooCommerce Checkout Radio Buttons Missing After WordPress 6.9 Update? Fix CSS Styling Loss

After updating to WordPress 6.9, many store owners report that the radio buttons for selecting payment methods on the WooCommerce checkout page lose their styling. They appear as tiny, un-styled circles or are completely invisible, making the checkout flow confusing and inaccessible. This issue occurs because WordPress 6.9 introduced changes to the default CSS for input types, and themes or plugins that rely on specific selectors (e.g., `input[type="radio"]`) may break. The core browser default styling for radio buttons can also differ between browsers. To fix it, you can add custom CSS to restore the proper appearance, or perform a conflict test to identify if a plugin or theme is overriding the styles. The solution involves targeting the WooCommerce payment method radio buttons with appropriate CSS rules to ensure they are visible and styled consistently.

Step-by-Step Solution

• 1Clear browser cache and test on a fresh incognito window.
• 2Temporarily switch to a default WordPress theme (e.g., Twenty Twenty-Five) to see if the issue persists.
• 3If the radio buttons return with a default theme, the problem is with your active theme or a plugin. Proceed with a full conflict test: deactivate all plugins except WooCommerce, then reactivate one by one.
• 4Add the provided CSS to your theme's custom CSS area (Appearance > Customize > Additional CSS) or via a plugin like 'Simple Custom CSS and JS'.
• 5If using Elementor, ensure your WooCommerce checkout template uses the standard WooCommerce widget (not custom HTML) and check Elementor's global CSS settings.
• 6Verify that no plugin (like security or caching) is minifying or stripping CSS rules. Exclude checkout page from minification if needed.
• 7For persistent issues, use browser developer tools to inspect the radio button element and see which CSS rules are applied or overridden.

/* Restore WooCommerce checkout radio button styling after WordPress 6.9 */
.woocommerce-checkout #payment .payment_methods li .input-radio {
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border: 2px solid #333;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
}
.woocommerce-checkout #payment .payment_methods li .input-radio:checked {
    background-color: #007cba;
    border-color: #007cba;
    box-shadow: inset 0 0 0 3px #fff;
}

/* Alternative if using WordPress default styling */
.wc_payment_method input[type="radio"] {
    opacity: 1 !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
}

Final Recommendation